こんにちは、フローです。
さて、今回も前回に引き続きHTMLの勉強をして行きたいと思います。
前回の記事はこちらです。
目次
headタグ
前回は、”style.css”を使って色やフォントで装飾するやり方を紹介しました。
そもそも、”stylesheet”ってなに？
と、思った方もいるかと思うので、その辺を含めて
headタグ内に記述するタグなど、必要なコードの紹介をしていきたいと思います。
コード例
例えば、一般的に必要とされるコードの例を書いてみます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>前回は、”<!DOCTYPE html>”これを紹介したと思うので、紹介出来なかった部分を書いていきます。
<html lang=”en”>
HTML文書の開始タグであり、文書が書かれている言語を示します。
“lang”属性には、文書の言語が指定されます。
この例では、”en”という値が指定されているため、文書の言語が英語であることを示しています。
通常私たち日本人が使うには、”en”ではなく、”ja”(日本語)になります。
ブラウザや検索エンジンは、この属性の値を使用して、
ユーザーが検索するときに正しい言語のコンテンツを表示することができます。
この属性は、アクセシビリティにも役立ちます。
画面読み上げソフトウェアは、言語を正しく認識することで、
適切な発音や読み方を行うことができます。
また、スクリーンリーダーソフトウェアは、文書の言語に基づいて、
適切なテキスト読み上げ声を選択することができます。
<meta charset=”UTF-8″>
文書の文字エンコーディングを指定するための要素です。
“charset”は、文字エンコーディングの略語であり、
“UTF-8″はUnicodeで定義された一般的な文字エンコーディングの一つです。
UTF-8は、世界中の多くの言語をサポートするために設計されており、英語、日本語、ロシア語、中国語など
様々な言語を含む広範な文字セットを表現することができます。
この要素を指定することにより、ブラウザは正しい文字エンコーディングで文書を解釈し、
正しい文字を表示することができます。
また、文字エンコーディングが誤って指定されていると、
特定の文字が正しく表示されない、文字化けが起こる、
または文字列のエラーが発生するなど、多くの問題が生じる可能性があります。
“UTF”は大文字じゃないとダメ？
“UTF”は大文字でも小文字でも問題ありません。
つまり、”UTF-8″、”utf-8″、”UtF-8″など、異なる形式で表現することができます。
HTML仕様では、属性名や要素名については、
大文字小文字を区別しないと規定されています。
つまり、”charset”属性を”CHARSET”としても使うことができます。
ただし、一般的には、”UTF-8″という表記が一般的であり、
多くのWebページでもこの形式が使用されています。
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
Internet Explorerの互換性モードを無効化するための指示を含む、
HTML文書のヘッダーに書かれる要素です。
“X-UA-Compatible”は、
Internet Explorerが表示するバージョンを指定するためのマイクロソフト独自の拡張機能であり、
この要素に”IE=edge”という値が指定されている場合、
IEの最新バージョンでページを表示するよう指示します。
互換性モードとは、
古いバージョンのInternet Explorerで、
最新のWeb規格に対応していないページでも正しく表示するための機能です。
しかし、この機能は、最新のWeb技術や標準に適合したページが正しく表示されないことがあるため、
Web開発者からは好ましくないとされています。
したがって、互換性モードを無効化し、
最新のWeb技術や標準に基づくページの表示を保証することができます。
ただし、この指示はInternet Explorerに対してのみ有効であり、他のブラウザには影響を与えません。
Internet Explorerだけなら書かなくてもいい？
書かなくても、多くの場合正しく動作する可能性があります。
ただし、
Internet Explorerで特定のWebページが正しく表示されない場合、
互換性モードが原因である可能性があります。
その場合は、”<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>”を
ヘッダーに追加することで、互換性モードを無効化し、ページが正しく表示されることがあります。
ただし、何度も言いますが、この指示はInternet Explorerの最新バージョンでのみ機能するため、
IEを使用していない場合、この要素の指定は無効になります。
また、他のブラウザでは無視されますので、
互換性モードに対する対応が必要な場合には、他の方法を探る必要があります。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
レスポンシブWebデザインを実現するための指示を含む、
HTML文書のヘッダーに書かれる要素です。
“viewport”は、
ビューポートと呼ばれる、Webページの表示領域を指します。
この要素により、ビューポートのサイズとスケーリング方法を指定することができます。
“width=device-width”は、
ビューポートの幅をデバイスの幅に合わせる指示を示します。
つまり、デバイスの幅がどのように変化しても、ページの幅を合わせることができます。
“initial-scale=1.0″は、
ページの初期表示時のスケールを指定します。”1.0″は、通常のスケールとして設定されており、ユーザーが拡大縮小することができます。
この要素により、異なるデバイスでのWebページの表示が最適化されるため、
ユーザーがスマートフォンやタブレットなどの様々なデバイスからアクセスしても、
ページが適切に表示されるようになります。
また、レスポンシブWebデザインにより、
画面サイズに応じてデザインを最適化することができるため、
ユーザーエクスペリエンスを向上させることができます。
この要素だけでレスポンシブされるの？
レスポンシブWebデザインの基礎となる重要な要素ですが、
レスポンシブなデザインを実現するためには、さらに多くの工夫と設計が必要となります。
<link rel=”stylesheet” href=”style.css”>
HTML文書内に外部のスタイルシートファイルを読み込むための要素です。
“rel”属性には、
読み込むファイルの種類を指定するために使用されます。
スタイルシートを読み込む場合は、”rel”属性に”stylesheet”という値を指定します。
“href”属性には、
読み込むファイルの場所を指定するために使用されます。
この例では、”style.css”というファイルが同じディレクトリにあることを示しています。
スタイルシートは、
HTML文書の見た目やスタイルを定義するために使用されます。
スタイルシートファイルには、
色やフォント、レイアウトなどのスタイル情報が含まれており、
この情報を読み込むことにより、Webページのデザインを一括で変更することができます。
外部スタイルシートを使用することにより、
複数のWebページで同じスタイルを使用することができます。
また、HTML文書の見た目とコンテンツを分離することにより、メンテナンスが容易になります。
まとめ
今回は、WEBサイトのページを正しく表示させる為の、必要なタグ類を紹介しました。
他にも色々とあるなで、是非調べてみて下さい。
次回は、使われる例や、CSSの要素などの紹介を書きたいと思っています。
最近のコメント