ウェブログ

13.CSSを書いてレイアウトやデザインを施す(後編)


bodyに対して全体に適用させるスタイルを定義する

まずはページの大本となるbodyタグに対してCSSを定義していきます。

基本文字サイズを16px
色は黒にほぼ近い#404040
行の高さは100%に
フォントの設定
背景色は白へ

上記を定義すると以下の様なCSSになります。

div id=”wrap”

同時に先ほど追加したdiv id=”wrap”にも追加します。

このタグは全体を囲っているタグなので横幅を指定
marginにauto設定することで中央に寄る(厳密には左右のみautoをかけてあげればOK)
左右に10pxの内側余白を設け、要素全体の横幅は960pxに

ヘッダー部分のCSS

続いてヘッダー付近のCSSです。
ここでは主にグローバルメニューの作り方について解説します。
押させておくべきポイントは以下です。

h1の画像の上下の幅はpaddingで
メニューの上下の線
liはfloatさせ、左から順にメニューが並ぶように
それぞれのliの右側はmarginであけるが、最後のliだけはmarginを0に
aタグにdisplay: blockを指定することでインライン要素からブロック要素に変わり、リンクの幅が増える
このままだとfloatが解除されないままなので、次の要素である#mainにclear指定する

かけるCSSがこちら。
※わかりやすくするため適用した順に記述しています。見やすいように並び替えてOK

重要な部分を説明します。

header ul liと最後のli

メニューは大体フロートさせることが多いのです。displayプロパティでも表示可能ですがIE7が非対応なので一応対応しておきましょう。
横幅にも200pxを設定し、それぞれの右側には40pxのmargin。
しかし最後のliはclass名lastChildを設定しているのでここに対してmargin-rightを0にしてあげる。そうすると最後のliの右側余白がなくなりピッタリ収まってくれるはずです。

header_ul_liのcss

aタグはblock要素に変換

aタグは元々インライン要素です。このままだと横幅が画像より小さくなってしまう。
インライン要素のaタグ

そこでaタグにdisplayプロパティのblockという値を設定してあげることでリンクの幅が拡がりました。
ブロック要素になったaタグ

floatしたら必ず解除を

liをfloatして回りこませているので、これをどこかで解除してあげないといけません。基本は次の要素で解除をするので、次の要素であるdiv#mainにclearプロパティをかけてあげます。
これでフロートも解除でき、親要素であるheaderタグに下への余白を40px設けてヘッダーの完成。

ヘッダー完成

メインコンテンツエリアのCSS

続いてメインエリアです。「About SAMPLE SITE」と書かれているところからですね。

#mainに対して横幅設定、float、右側への余白
見出しh2とh3に対するスタイル
フォントの大きさは12pxにする必要があるがpx指定よりemや%といった指定&どのセレクタにかけるのがいいか
pタグの下側に余白
回り込みをさせる画像のスタイル

フォントサイズの書き方と定義するセレクタ

フォントサイズは12pxにします。これは相対数値で指定します。※参考:絶対数値と相対数値
今回はemにしましょう。16pxから12pxにしたいので値は0.750emです。(16×0.75=12)

そしてこれをかけるセレクタなんですが、どこにかければいいでしょうか?
pタグに直接かけてもいいんですが、このエリア内にて基本のサイズを決めておいたほうが後々テキストを増やしてサイズを変えるときに12pxが基準となり、そこからemにてかえていけばいいので親要素に定義します。
するとdiv#mainでしょうか?ここでも間違いではないですがこの後サイドバーにもフッターにもテキストはありますので、元々の親要素であるdiv#wrapperに定義します。最初に設定した#wrapにfont-sizeとline-heightを追加します。

回り込みをさせる画像のスタイル

画像を置いてとなりにテキストを表示。よく見るレイアウトですね。画像を直に置くのでは少々味気ないので枠に装飾をかけます。
floatプロパティはマストでかけるとして、marginの使い方が大事になってきます。ここでは「margin: 0 20px 10px 0;」としました。
4つの値がありますが、これは4つの場合「上、右、下、左」という順番でした。※参照:marginなどの値の数によりかけられるエリアの違い
なので右側が20px、下側が10px、上と左は無しという具合。

装飾の方はとてもシンプルで、borderにて全方向に設定し、paddingの1pxを指定するこで余白が生まれ、背景の白が見えるという感じです。
floatをかけたimgの装飾

サイドバーのCSS

回り込みにて右側の空いた部分に回りこんできたサイドバーについてスタイルをかけていきます。

aside全体の横幅、float、内側の余白の設定
h4のネガティブマージン
liの下方向の値に注意

asideの設定

#mainにfloatをかけたのでこちらは自動的に右に回り込みます。ではasideの横幅を220pxに設定したいのでwidthプロパティで220pxを設定します。するとfloatによって右側に回りこんでいたのに下に落ちてしまいました。これは横幅を指定することで下に下がってしまうんです。そのためこのasideにもfloatをかけてあげます。値はleftでもrightでもどっちでも一緒ですが右に移動するのでわかりやすいようrightにしておきます。
では内側の余白を設定します。サイドバーは見出し意外は左右に10pxの余白を設けています。内側の余白はpaddingなのでasideにpaddingで左右だけ10pxにしましょう。
するとfloatしたはずのasideがまた落ちてしまいました。これはpaddingで左右に10pxずつ設定したのでaside全体の横幅が220px+20px=240pxになってしまい、#wrapの横幅オーバーしてしまったので収まりきらず落ちてしまったのです。

全体の横幅

この解決方法はとてもシンプルで、足した分のpaddingをwidthから引けばOK。元々220pxだったのでpadding分の20pxをひいてwidthを200pxに再設定してあげます。するとちゃんともどってきました。

aside OK

aside h4のネガティブマージン

ここでネガティブマージンの設定をします。ネガティブマージンとは、marginプロパティにマイナスの値(-10px等)を設定し、通常の逆方向に持っていく手法です。
paddingで内側に入れられてしまったところから、h4だけ左方向に10px動かしましょう。「margin-left: -10px;」を設定すると左へ10px動いてくれます。

listのmargin-bottom

バナー部分はliで囲っています。この間は30pxあればいいんですが、何も設定しなくても7px程あいています。なので30px-7px=23px設定すればOK。
リストのmargin-bottom

フッターのCSS

最後にフッターのCSSをやっておしまいです。

footerのclearを忘れずに
余白を得るため#mainにmargin-bottoomを追加
h5をulの中へ移動
h5のspanタグに色づけ
ulのfloat、横幅、margin-right
最後のulのmarginを戻す
liにインデント処理
リンクはaタグ
copyrightのスタイル

余白を得るため#mainにmargin-bottoomを追加

footerと#mainとの間の余白はどこでとればいいでしょうか?footerのmargin-topでしたいところなんですが、直前までfloatが効いている関係でmargin-topが効きません。そこで#mainのmargin-bottomとして再定義します。

h5をulの中へ移動

ulをfloatにかけ横並びにする関係で、h5をulの中にいれましょう。(最初に気づけばよかったんですが。。。)

ulのfloat、横幅、margin-right

ここはグローバルナビゲーションと同じで対象がulに変わっただけです。最後のulにlastChildというclassをつけているので、これにmargin-rightを0にすればOK。

他も特別難しいことはなく、基本のCSSのみで完結できます。

CSSの完成

これでCSSが出来たはずです。保存し、HTMLファイルをブラウザで開いてみて問題がないか確認しましょう。
どこかが崩れている、完成形と違う、という場合はCSSのどこかが間違っている可能性が大きいです。セレクタのclassやhtmlタグの違いは大丈夫か、プロパティ名は打ち間違えてないか、値の単位は抜けてないか、閉じにかっこ「}」は抜けてないか…など。間違っているときはだいたいこの辺りが考えられます。

無事表示できたら、ファイル一式をいつでも見れるように保存しておきましょう。サイトをつくるときに骨組みとして使っていただいて構いません。これを基本としてカスタマイズして使うのもいいでしょう。

・サンプルサイトの完成版
sample site完成版

・完全版CSSファイル
CSS

初心者のためのホームページ制作 まとめ

ここまで大変お疲れ様でした。初めてのHTML、CSSはなれないことばかりで大変だったかと思います。しかしやってみれば意外と簡単だったりもします。htmlとcssを押さえれば自由にファイルを作ることができます。これにjavascriptやphpなどプログラミング言語を交えればメールフォームやブログのように動的にページ生成したり、スライダーやスライドショーなど動きのあるアニメーションなどもできるようになります。

是非ウェブサイト制作の楽しみを知り、自身で制作・更新する楽しみを身につけていっていただければ幸いです。

ご協力ください

ホームページ制作に関する授業をこのような形で公開します。「こんなスキルを身につけたい」「これがよくわからない」といったことを教えて下さい。

お問い合わせフォームから連絡する

個別のフォローも対応

「マンツーマンで個別で指導してほしい」
という方はオンラインと出張の個人指導ホームページ制作レッスンをご利用ください。全国どちらでも対応可能です。あなたの環境にあったアドバイスをさせていただきます。

この記事を書いた人

池田祐太郎

池田祐太郎

WordPress好きの池田です。Webの仕事の前はライブハウスでブッキングや音響をしてました。PHP, JavaScriptを自由に操りたいと思いつつ、つい訪れたサイトのソースコードを見てしまいます。


CONTACTお問い合わせ / お見積もり