今回でビギナー向けと銘打ったこのカテゴリも最終回です。
もっと色々盛り込みたかったとか思ったり、自分で突っ込んだりしてる部分もありますが、自分の知識をアウトプットする練習も兼ねているので、細かいところはどっかに置いとくとして...
このデザイン→これ
を今回でカタチにします。
最終は、コンテンツ部分の見栄えの調整です。
んじゃ、いってみますか、、、
前回の最終系
前回のエントリーでサイドまで完成させました。
http://css-happylife.com/template/practice-01/12/
h2の見た目を整える（InfoとHistory）
h2部分に使っている画像は左記の細っこいのです。
コレを横に並べる為に下記のスタイルを当てます。
#main h2 {
clear:both;
margin-bottom:10px;
padding:10px 15px;
background:url(../img/h_01.gif) repeat-x;
font-size:140%;
letter-spacing:.2em;
text-transform:uppercase;
}
当てると実際には下記のような感じになります。
http://css-happylife.com/template/practice-01/13/
じゃあ、主要なプロパティ部分を説明します。
clear:both;
特に回り込みが無い場合、clearは必須では無いのですが、何処かで回り込んだりして崩れてしまうのを防ぐ為に入れてます。
実際のケースでは頻繁にclearの必要があったりするので。
勿論、そういった状況になってから足しても問題ありません。
background:url(../img/h_01.gif) repeat-x
横にリピートし、位置は左上を基準にしているので省略してます。
一枚で横幅決め打ちの画像にしちゃうと、後から幅調整したい時など不便なので繰り返せる画像は全て繰り返せるように切っておくと何かと楽です。
ちょっと話反れますが、リピート画像が極端に小さいと、画像サイズは勿論極限まで抑えれるけど、リピートさせる為にマシンスペックが食われるとかって聞いた事があります。
コレってホントですか？（知ってる人教えて！
text-transform:uppercase;
コレに関しては前回のエントリーを参照して下さい。
http://css-happylife.com/log/cssbeginner/000104.shtml
当たり前っすけど、ココで指定しなくても、h2にtext-transform:uppercase;を指定していれば、サイド、メイン用で2度書かなくてもすみます。
h3、h4の見た目を整える
続いて、h3、h4の見た目を。
#main h3 {
margin-bottom:5px;
padding:7px;
background:#FCFAF5;
border:1px solid #FCAA53;
font-size:115%;
letter-spacing:.1em;
}
#main h4 {
margin-bottom:5px;
padding-left:5px;
border-left:3px solid #FCAA53;
font-size:115%;
font-weight:bold;
}
実際の表示は下記のようになります。
http://css-happylife.com/template/practice-01/14/
h3はベタの背景カラーに、ボーダーが1pxあるだけなんで、パディングで余白を調整。
h要素に、letter-spacingを比較的取っているのは、個人的な好みっす。
無い方がいいって人もいっぱいいるかと。
h3のmarginは後ほど調整します。
h4は左にボーダーを指定しているだけなんで、後はパディングで位置関係を調整してます。
font-weightは、最初に下記のように指定していたのでソレを上書き。
h2,h3,h4,h5,h6 {
font-weight:normal;
font-family:Georgia, "Times New Roman", Times, serif;
}
最初にfont-weightをnormalにする必要が有るのかはデザインに寄ってどっちの割合が多いとかで判断すると良いと思います。
個人的にはあんまりboldを使いたくなかったりします。
メイリオだと特に美しくないので。。。
ボーダーの色は、何となくオレンジ系な#FCAA53で。
また話反れますが、画面の色をちょいっと拾いたい場合はカラーピッカー使うと良いです。
ボクが普段使っているのは、ゆなカラーピッカーってのです。
特に拘りが有る訳でもないし、あんまり使わないですが、中々便利です。
テキスト部分とh3のmargin調整
htmlにclass:sectionを追加します。
<h2>Information</h2> <div class="section"> <h3>文書型宣言についてのアレコレ </h3> ・ ・ ・ <!-- / section END --></div> <h2>History</h2>
追加したら、sectionにスタイルを当てていきます。
#main .section {
margin:0 10px 20px;
}
#main .section p img {
float:right;
margin:0 0 5px 10px;
}
こんな感じで。
実際の表示は下記のように。
http://css-happylife.com/template/practice-01/15/
sectionで区切ってるのは、#mainの中にp要素のみならp要素に指定すればいいですが、実際はul要素やtableとか色々入る可能性があるのと、下部に適度な余白を確保するのに便利だったり、今回のように#main .section p img にのみ右に回り込ませたいなどで効果を発揮します。
実際のコンテンツが、今回のサンプルのみのボリュームならわざわざdivを追加する必要も無いと思います。
More部分のスタイルを適用させる
htmlに、class名moreを追加します。
<h2>History</h2> <p class="more"><a href="#page">More</a></p> <ul>
スタイルは下記のように。
#main .more {
position:relative;
}
#main .more a {
position:absolute;
top:-40px;
right:10px;
padding:0 5px 0 18px;
background:#FFF url(../img/list_02.gif) no-repeat 5px .5em;
color:black;
}
#main .more a:hover {
text-decoration:none;
}
この部分に限ってポジションで指定してます。
floatで組むより楽だと思うので。
コレの具体的な説明については、見出しの横などにボタンを配置を参照して下さい。
実際の表示は下記のように。
http://css-happylife.com/template/practice-01/16/
display:blockを使わずにa要素が心なしかボタンっぽくなってるのは、paddingとline-heightで調整しているからです。
リスト部分の見栄えを整える
コレが最後の指定です。
まずは、htmlのp要素のclass名moreとul要素の間にdiv.sectionを追加します。
<p class="more"><a href="#container">More</a></p> <div class="section"> <ul> ・ ・ ・ </ul> <!-- / section END --></div>
クラス、sectionを追加しているのは上記の理由と同じですが、ココは無くてもいいかも、、、とギリギリまで悩んでたんですが今回は使っていきます。
sectionを追加したら、スタイルを当ててきます。
#main .section ul li {
margin-bottom:5px;
padding-left:15px;
background:url(../img/list_02.gif) no-repeat 0em .5em;
}
#main .section li a {
margin-left:1em;
}
li要素でlist-style-typeでマークを指定しないのは、位置調整が上手くいかないからです。
リストマークの大きさにもよると思いますが、滅多に上手くいかないので自由度が高いbackgroundで指定するのをオススメします。
スペースなどで感覚を取らなくても、a要素でmarginの調整が出来るので、margin-left:1emで感覚調整をして全て完了！
完成バージョンは下記。
http://css-happylife.com/template/practice-01/17/
最後に
長々と付き合って頂いた方、ありがとう御座います。
全部丁寧に読んで頂いた方が居たら、心から感謝申し上げます。
ものすごい、不手際ばかりだったと思いますが、こうして書いてみると結構大変だなーって思いました。
探り探りで書いてたので、説明不足だったり過剰だったりと色々有ると思うので、メールとかでこう書いた方が分かりやすいんじゃない？とか、ある程度なら質問にも答えれたらなぁと思いますんで、お気軽にご連絡ください。
（質問は、このサンプルを組む上での質問のみでお願いします。）
時間に関してですが、サンプルの「コーディングだけ」の時間で、大よそ40分くらい掛かってます。
早い人だったら30分も掛からない程度のデザインですが、最初だとおそらく2～3日とか使うと思います。（ボクがその位苦労してたってだけですが）
大変だとは思いますが、そこから徐々に覚えていって色んなテクを見につけていけばいいんじゃないかな～って思います。
次回からは、このカテゴリ書いてるうちに書きたくなった事をボチボチ書いてきます。
CSSに興味持った方、引き続きお付き合い願います～。
それでは、良きCSS Lifeを！