CSSでのレイアウト方法や、CSSテクニックなどをご紹介します。

CSSでのレイアウト

■CSSでのレイアウト
CSSでレイアウトを行う際、どこに記述すればいいのでしょうか。CSSでのレイアウト一部分に反映させたい場合はHTML文書に直接記述すればいいですし、ある1ページ内だけで適用させたい場合はヘッダ部に、WEBサイト全体に反映させたい時は、拡張子を「css」として外部ファイルを作成し記述します。その際には「id」「class」タグの使用でCSSの指定が反映できます。CSSでのレイアウト時にはこの外部ファイルへの記述が最もベターです。一番の理由は後ほど説明しますが、外部ファイルへの記述を行う事で、HTMLソースが軽くなり、ユーザ側の表示速度も早まります。またHEAD部に「META」タグを記述するのを忘れないようにしましょう。

■CSSテクニック
「id」と「class」タグの使用方法は、タグ内のidで指定するものはCSSプロパティ内で冒頭に「#」を、classで指定するものはCSS内で冒頭に「.」を付けて使用します。「id」は1ページ内で同じ名前を1度しか使えないのに対し、「class」は何度も使用できます。どちらを使えばいいのか迷った時は「class」を使っておけば問題ないでしょう。
またCSSでレイアウトを組む際、表示すると余分な余白やズレが生じる事があります。幅を決める時には外枠の合計がメインスペース・サイドスペース・必要余白を足した合計値になるようにきちんと計算しましょう。ブラウザによって解釈が異なる場合がありますので、幅の拡張ルールを理解しておく事が大切です。

記事へのコメント

※左の画像に書かれている文字をそのまま入力してください