ホームページ作成講座HAC Design

CSSでレイアウト　書き方編

CSSでレイアウトをしよう！

では早速スタイルシート（以下、CSS）をHTMLに適用させましょう。

CSSをHTMLに適用させる方法は、HTMLファイルの<head>内に指定内容を書き加える

というように直接書き加えるタイプと、同じく<head>内に

とリンクしてCSSが書いてある外部ファイルを読み込むといった方法があります。
CSSを外部ファイルにまとめておく方が、ページ数の多いサイトのレイアウトの管理に便利です。

リンクの貼り方は<link rel="stylesheet" href="ファイル名.css" type="text/css" />

ファイル名.cssを指定のファイルにするだけです。

CSSの書き方のルール

まず、CSSの基本的な書き方を覚えましょう。

タグ名｛プロパティ：値｝

たとえば、p {font-size：small；}というような感じで、Pタグの｛フォントサイズを：小さく表示する；｝

といった感じで指定のタグにレイアウトをしていきます。

CSSの記述も基本的に小文字で書いていきましょう。

CSSの書き方のルールとしては、プロパティの後は半角コロン：、値の後ろはセミコロン；で閉めること。もちろんプロパティと値は｛｝で囲います。この半角コロンやセミコロン｛｝の何かの記述が抜けていると、CSSで指定した装飾やデザインがHTMLに反映されませんので気をつけましょう！

またCSSファイルはメモ帳などのテキストエディタで記入し保存の時は.cssという拡張子で保存しましょう。スタイルシートのファイル名はわかりやすい名前にしておけばOK！たとえば、style.css、layout.cssなど、.cssの拡張子が表示されなくてもわかるような名前にするといいでしょう。

セレクタの指定方法

CSSでレイアウトを組む場合は、ページをいくつかの領域に分けることからはじめます。サイドバーを右につけたり左につけたり、タイトルの入ったバナーの画像をトップに配置したりするには、まず領域の指定が必要となります。その領域を指定し、レイアウト、デザインしていくのは<div>で囲います。

ホームページ作成講座でも書きましたが、<div id="○○">という指定で場所と領域をブロッキングしていくような感じです。そしてその装飾や大きさ、場所などが"○○"で指定したCSSの反映される場所です。<div>にはidとclassというしていがあり、<div id=""><div class="">というのでは、CSSの記述が変わってきます。レイアウトの大きな囲みは<div id="">で指定していき、小さな装飾などは<div class="">をつかって指定します。