仕事で使っているWebやシステム開発関連の情報を掲載しています。開発に使用するソフトウェアの使用方法やシステム開発に必要な技術的情報。トラブル解決方法等を掲載してるサイトです。相対配置または絶対配置されボックスは、その内部で絶対配置をする際の基準ボックスとなる1、実践的なページの枠組みを作るbody要素の内容は「header」「content」「footer」の3つに大きく分かれており、それぞれの内容はさらに「class=”inner”」が付けられたdiv要素で囲われています。「content」の内部には「main」と「sub」があり、この部分がマルチカラム(2段組み)となります。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。“utf-8”;」は、この外部スタイルシートの文字コードが「UTF-8」であることを示すための書式です。ページ全体に対する表示指定及びページ全体の枠組みに関連する指定を記載します。ページ全体のリンクに関連する指定はここに書き込みます。「#header」の内部に対する指定はここに書き込みます。トピックパス(パンくずリスト)「#topicpath」の内部に対する指定はここに書き込みます。メインコンテンツ「#main」の内部に対する指定はここに書き込みます。サブコンテンツ「#sub」の内部に対する指定はここに書き込みます。フッタ「#footer」の内部に対する指定はここに書き込みます。ページ全体に対する表示指定及びページ全体の枠組みに関連する指定を記載します。800px;}2、ページ全体の基本設定を行うCSSによる表示指定を書き込んでいきます。はじめにページ全体(body要素)の余白や文字サイズ・文字色を指定します。サンプルページは、ページの最上部に緑色の線が入っていますので、上のボーダーも指定します。テキストエディタで「styles.css」を開いて、次のCSSを追加します。ページ全体に対する表示指定及びページ全体の枠組みに関連する指定を記載します。}図13、#headerに背景画像を指定するヘッダ部分に背景画像を指定します。背景画像に合わせた高さ(423px)を指定し、背景画像は横に繰り返して表示させます。「styles.css」に次のCSSを追加します。#headerに表示させる背景画像「headbg.png」は図2のとおりです。指定した背景画像が横に繰り返して表示されます。repeat-x;}図3:#headerに表示させる背景画像4、#headerをセンタリングする今度はヘッダ部分の幅を指定して、センタリングさせます。幅とセンタリングの指定は、#headerではなく、その内側にある.innerに対して行います。「styles.css」に次のCSSを追加します。ヘッダ部分が中央に表示されています。800px;}図35、絶対配置で画像の位置を調整するこの段階では、建物の画像の縦位置がずれています。その上のロゴ画像は位置はずれていませんが、きちんとした位置指定はされていません。これらは画像なので大きさが変わることは基本的にないので、絶対位置で表示位置を指定します。ここでは、幅を800pxに固定してセンタリングしている.innerのボックスを基準ボックスにします(position:relative;を指定します)。「styles.css」の「/*ヘッダー*/」の見出しの下に、次のCSSを追加します。青空の画像と背景画像の位置がぴったりと合っています。「#header」の内部に対する指定はここに書き込みます。0;}図4この指定は「ページ全体の枠組み」ではなく「ヘッダ」の内部の表示指定なので、ここまでの指定とは分けて「/*ヘッダー*/」の部分に書き込みます。6、#contentをセンタリングする#headerと同様に#contentにも背景画像を指定してセンタリングします。背景画像には図7に示した「content.png」を使用し、繰り返しなしで上の中央に合わせて表示させます。センタリングは、#headerと同様に.innerで行いますが、幅の指定はパディングで余白をとる分だけ短くします。「styles.css」に次の指定のCSSを追加します。コンテンツ部分がセンタリングされ、背景画像も表示されます。メインコンテンツ「#main」の内部に対する指定はここに書き込みます。730px;}図57、#contetn内をマルチカラムにする#contetn内に含まれる#mainと#subをfloatで横に並べてみますそして、#footerでfloatをクリアします。「styles.css」に次のCSSを追加します。#contetn内がマルチカラムになっています。both;}図68、clearfixを導入する図9をみると#contentに指定した背景が途中から消えてしまっていることがわかります。実は、#mainと#subの両方にfloatを指定しているため、これらは高さは、背景が表示されている部分までしかないということです。そこで、対策としてclearfixを使用します。「styles.css」に次のCSSを追加します。clearfixでfloatはクリアされますので、#footerの「clear:both;」は削除します。#contentの背景が表示されるようになっています。visibility:hidden;}図:79、#footerをセンタリングするフッタ部分もセンタリングするフッタ部分もセンタリングして、背景を指定します。フッタ部分にはある程度の高さを確保したいのですが、heightプロパティを使用すると高さが固定になってしまい、ユーザーが文字サイズを大きくした場合などはボックスからはみ出てしまう可能性もあります。そこで、ここではheightプロパティではなく、最低の高さだけを設定できるmin-heightプロパティを使用して高さを確保します。「styles.css」に次のCSSを追加します。フッタ部分にも背景が表示されるようになっています。800px;}図810、body要素の背景色を#footerと同じにする図8をみると、フッタ下にbody要素の白い背景が見えてしまっています。そこで、body要素の背景色を#footerと同じにします。「styles.css」のbody要素向けの指定の最後に、次のCSSを追加します。フッタの背景色がページ最下部まで続くようになります。