<div>〜</div>の使い方(フリーエリアのカスタマイズ)

カスタマイズはCSS(スタイルシート)をいじるだけという初心者のために、HTMLの<div>の使い方を説明しようと思います。

まず基本中の基本なことを簡単に説明しておきますが、HTMLには「ここにこれを置きますよ」というタグを書き、CSSにはその部分の見栄に関する記述をします。その際、HTMLに記述されるのが<div class="xxx"></div>というもので、<div>〜</div>で囲まれたものが「ひと固まり」です。classはそのひと固まりになった部分の名前なので、スタイルシートから「HTMLのxxxという固まりはこのような見栄にします」と命令する仕組みになっています。

<div>〜</div>で囲んだひと固まりは「1つの箱」だと思ってください。
テンプレートのHTMLを見れば分かるように、テンプレートはたくさんの箱で出来ているようなものです。
レイアウトという箱の中に、ヘッダーという箱、メニューという箱、メインという箱などがあり、メニュー、メインの箱の中にまたいくつもの箱があるというイメージです。

「この部分だけを個別に設定したい」という箇所は<div>〜</div>という箱の中に入れ、その箱に名前をつけ、CSSで見栄を設定することができます。
続きを読む
00:52 | カスタマイズ | edit | page top↑