CSSの記述 −外部ファイルに記載
CSSレイアウトの良さを最も効果的に出してくれる記述方法が、外部CSSファイルによる記述方法です。HTMLファイルとは別に拡張子を「css」としたファイルを作り、そこに記述していきます。HTMLのHEAD部分にLINKタグを使ってCSSファイルにリンクをはり、タグには「id」「class」を使うことでCSSの指定を反映させます。
1： HTML・HEAD部分への記述
<link rel=stylesheet type="text/css" href="*****.css">
<link rel=stylesheet type="text/css" href="*****.css">
2：HTML・タグへの記述
<*** id="*****">〜</****>
<***** class="*****">〜</****>
<*** id="*****">〜</****>
<***** class="*****">〜</****>
3：外部ファイルへの記述
#***** { ***** : ***** }
.***** { ***** : ***** }
#***** { ***** : ***** }
.***** { ***** : ***** }
CSSファイルの名前を「style-sheet.css」、CSSファイルに「文字を赤くし、左側に5pxのオレンジの罫線を引く」という指定を例に、実際の記述を表すと以下のようになります。
1：HTML・HEAD部分への記述
<link rel=stylesheet type="text/css" href="style-sheet.css">
<link rel=stylesheet type="text/css" href="style-sheet.css">
2：HTML・タグへの記述
<div class="selecter">文字が赤くなり、左に5pxの罫線が引かれます。</div>
<div class="selecter">文字が赤くなり、左に5pxの罫線が引かれます。</div>
3：外部ファイルへの記述
.selecter { color:#ff0000; border-left:solid 5px #ff9900; }
【ブラウザ上の表示】
文字が赤くなり、左に5pxの罫線が引かれます。
CSSの指定を外部ファイルに記述することで、これまでHTMLや直接記述などで行っていた指定部分の記述がセレクタ名に置き換わることで大きく軽減され、HTMLファイルの軽量化、表示速度のスピードアップを図ることができます。
また、余計な記述が省かれる分だけテキストの比重が増すため、SEO対策にも好影響を及ぼす効果的な記述方法です。
CSSを使う際は、ぜひ覚えるようにしてください。