目次
bodyに対して全体に適用させるスタイルを定義する
まずはページの大本となるbodyタグに対してCSSを定義していきます。
色は黒にほぼ近い#404040
行の高さは100%に
フォントの設定
背景色は白へ
上記を定義すると以下の様なCSSになります。
body {
font-size: 16px;
color: #404040;
line-height: 100%;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
background: #fff;
}
div id=”wrap”
同時に先ほど追加したdiv id=”wrap”にも追加します。
marginにauto設定することで中央に寄る（厳密には左右のみautoをかけてあげればOK）
左右に10pxの内側余白を設け、要素全体の横幅は960pxに
#wrap {
width: 940px;
margin: auto;
padding: 0 10px;
}
ヘッダー部分のCSS
続いてヘッダー付近のCSSです。
ここでは主にグローバルメニューの作り方について解説します。
押させておくべきポイントは以下です。
メニューの上下の線
liはfloatさせ、左から順にメニューが並ぶように
それぞれのliの右側はmarginであけるが、最後のliだけはmarginを0に
aタグにdisplay: blockを指定することでインライン要素からブロック要素に変わり、リンクの幅が増える
このままだとfloatが解除されないままなので、次の要素である#mainにclear指定する
かけるCSSがこちら。
※わかりやすくするため適用した順に記述しています。見やすいように並び替えてOK
h1 {
padding-top: 33px;
padding-bottom: 34px;
}
header ul {
border-top: 1px solid #9d9d9d;
border-bottom: 1px solid #9d9d9d;
padding: 20px 10px;
height: 38px;
}
header ul li {
float: left;
width: 200px;
margin-right: 40px;
}
header ul li.lastChild {
margin-right: 0;
}
header ul li a {
display: block;
}
#main {
clear: both;
}
header {
margin-bottom: 40px;
}
重要な部分を説明します。
header ul liと最後のli
メニューは大体フロートさせることが多いのです。displayプロパティでも表示可能ですがIE7が非対応なので一応対応しておきましょう。
横幅にも200pxを設定し、それぞれの右側には40pxのmargin。
しかし最後のliはclass名lastChildを設定しているのでここに対してmargin-rightを0にしてあげる。そうすると最後のliの右側余白がなくなりピッタリ収まってくれるはずです。
aタグはblock要素に変換
aタグは元々インライン要素です。このままだと横幅が画像より小さくなってしまう。
そこでaタグにdisplayプロパティのblockという値を設定してあげることでリンクの幅が拡がりました。
floatしたら必ず解除を
liをfloatして回りこませているので、これをどこかで解除してあげないといけません。基本は次の要素で解除をするので、次の要素であるdiv#mainにclearプロパティをかけてあげます。
これでフロートも解除でき、親要素であるheaderタグに下への余白を40px設けてヘッダーの完成。
メインコンテンツエリアのCSS
続いてメインエリアです。「About SAMPLE SITE」と書かれているところからですね。
見出しh2とh3に対するスタイル
フォントの大きさは12pxにする必要があるがpx指定よりemや%といった指定&どのセレクタにかけるのがいいか
pタグの下側に余白
回り込みをさせる画像のスタイル
#wrap {
width: 940px;
margin: auto;
padding: 0 10px;
font-size: 0.75em;
line-height: 1.833em;
}
#main {
clear: both;
width: 700px;
float: left;
margin-right: 20px;
}
#main h2 {
border-bottom: 1px solid #bababa;
padding-bottom: 10px;
margin-bottom: 20px;
}
#main p {
margin-bottom: 50px;
}
#main h3 {
margin-bottom: 10px;
}
.floatL {
float: left;
margin: 0 20px 10px 0;
border: 1px solid #666;
padding: 1px;
}
フォントサイズの書き方と定義するセレクタ
フォントサイズは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を指定するこで余白が生まれ、背景の白が見えるという感じです。
サイドバーのCSS
回り込みにて右側の空いた部分に回りこんできたサイドバーについてスタイルをかけていきます。
h4のネガティブマージン
liの下方向の値に注意
aside {
width: 200px;
float: right;
padding: 0 10px;
}
aside h4 {
margin-bottom: 20px;
margin-left: -10px;
}
aside p {
margin-bottom: 30px;
}
aside li {
margin-bottom: 23px;
}
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 h4のネガティブマージン
ここでネガティブマージンの設定をします。ネガティブマージンとは、marginプロパティにマイナスの値(-10px等）を設定し、通常の逆方向に持っていく手法です。
paddingで内側に入れられてしまったところから、h4だけ左方向に10px動かしましょう。「margin-left: -10px;」を設定すると左へ10px動いてくれます。
listのmargin-bottom
バナー部分はliで囲っています。この間は30pxあればいいんですが、何も設定しなくても7px程あいています。なので30px-7px=23px設定すればOK。
フッターのCSS
最後にフッターのCSSをやっておしまいです。
余白を得るため#mainにmargin-bottoomを追加
h5をulの中へ移動
h5のspanタグに色づけ
ulのfloat、横幅、margin-right
最後のulのmarginを戻す
liにインデント処理
リンクはaタグ
copyrightのスタイル
#main {
clear: both;
width: 700px;
float: left;
margin-right: 20px;
margin-bottom: 60px;
}
footer {
clear: both;
padding: 30px 10px;
border-top: 1px solid #bababa;
}
footer h5 {
font-size: 1.167em;
margin-bottom: 20px;
}
footer h5 span {
color: #009bdb;
}
footer ul {
float: left;
width: 300px;
margin-right: 10px;
margin-bottom: 10px;
}
footer ul.lastChild {
margin-right: 0;
}
footer ul li {
text-indent: 1em;
margin-bottom: 20px;
}
footer ul li a {
text-decoration: none;
color: #404040;
}
footer p {
clear: both;
text-align: center;
color: #bababa;
}
余白を得るため#mainにmargin-bottoomを追加
footerと#mainとの間の余白はどこでとればいいでしょうか？footerのmargin-topでしたいところなんですが、直前までfloatが効いている関係でmargin-topが効きません。そこで#mainのmargin-bottomとして再定義します。
h5をulの中へ移動
ulをfloatにかけ横並びにする関係で、h5をulの中にいれましょう。（最初に気づけばよかったんですが。。。）
- HTMLについて
- CSSについて
- jQueryについて
- ホームページを作ろう
■サービス紹介
ulのfloat、横幅、margin-right
ここはグローバルナビゲーションと同じで対象がulに変わっただけです。最後のulにlastChildというclassをつけているので、これにmargin-rightを0にすればOK。
他も特別難しいことはなく、基本のCSSのみで完結できます。
CSSの完成
これでCSSが出来たはずです。保存し、HTMLファイルをブラウザで開いてみて問題がないか確認しましょう。
どこかが崩れている、完成形と違う、という場合はCSSのどこかが間違っている可能性が大きいです。セレクタのclassやhtmlタグの違いは大丈夫か、プロパティ名は打ち間違えてないか、値の単位は抜けてないか、閉じにかっこ「}」は抜けてないか…など。間違っているときはだいたいこの辺りが考えられます。
無事表示できたら、ファイル一式をいつでも見れるように保存しておきましょう。サイトをつくるときに骨組みとして使っていただいて構いません。これを基本としてカスタマイズして使うのもいいでしょう。
初心者のためのホームページ制作 まとめ
ここまで大変お疲れ様でした。初めてのHTML、CSSはなれないことばかりで大変だったかと思います。しかしやってみれば意外と簡単だったりもします。htmlとcssを押さえれば自由にファイルを作ることができます。これにjavascriptやphpなどプログラミング言語を交えればメールフォームやブログのように動的にページ生成したり、スライダーやスライドショーなど動きのあるアニメーションなどもできるようになります。
是非ウェブサイト制作の楽しみを知り、自身で制作・更新する楽しみを身につけていっていただければ幸いです。
ご協力ください
ホームページ制作に関する授業をこのような形で公開します。「こんなスキルを身につけたい」「これがよくわからない」といったことを教えて下さい。
個別のフォローも対応
「マンツーマンで個別で指導してほしい」
という方はオンラインと出張の個人指導ホームページ制作レッスンをご利用ください。全国どちらでも対応可能です。あなたの環境にあったアドバイスをさせていただきます。
