前回のエントリーで、全体の大枠は完成しました。
http://css-happylife.com/template/practice-01/11/
あとは、サイドとコンテンツ部分の調整だけです。
どっちから作業しても何の問題もないと思いますが、とりあえずサイドから組んでいきます。
んでは、いってみますか、、、
サイドを組む前に・・・
今更気付いたんですが、サイドにリンクが貼ってなかったので、適当なリンクを貼って下さい。
<ul> <li><a href="#page">ホーム</a></li> <li><a href="#page">アバウト</a></li> <li><a href="#page">ギャラリー</a></li> <li><a href="#page">掲示板</a></li> <li><a href="#page">ブログ</a></li> <li><a href="#page">プロフィール</a></li> <li><a href="#page">リンク</a></li> </ul>
↑こんな感じで。
せっかくなんで、リンクの貼り方についての説明も。
<ul> <a href="#page"><li>ホーム</li></a> ・ ・ ・ </ul>
↑たまにこんな風にリンクを貼っているのを見かけます。
もしくはh1やh2などの見出しとかのブロック要素にインライン要素を括ってることが。
コレは、完全に間違ってます。
絶対に犯してはいけない過ちの一つとも言えるので、もしそう組んでいたら速攻直した方がいいです。
一応、今回は最低限のHTMLが分かっている人を対象なんで大丈夫だと思いますが、もし理解されてない場合は、HTMLの基本的な部分から勉強した方が良いと思います。
と、ちょっと話がそれました。
前々回のエントリーでサイドのベース部分を組んだので、その続きでデザインを当てはめていきます。
#side h2 {
margin-bottom:10px;
padding:3px 8px;
font-size:120%;
letter-spacing:.2em;
text-transform:uppercase;
background:#FFF url(../img/bg_sidetitle.gif) repeat-x left bottom;
}
#side ul {
margin-left:10px;
}
#side ul li {
margin-bottom:10px;
}
#side ul li a {
padding:3px 5px 3px 23px;
background:url(../img/list_01.gif) no-repeat 0em .3em;
font-size:115%;
line-height:120%;
color:#DD7000;
}
上記のスタイルを当てると、サイドは下記のようになります。
http://css-happylife.com/template/practice-01/12/
では、ポイントっぽいトコロだけ説明していきます。
見出し部分
#side h2 では、letter-spacing:.2emと文字間を調整してるのですが、0.2emと書いても同じです。
何気に省略出来るので、省略できる部分は省略したいんだ！っていうボクみたいな人にはオススメです。
あと、あまり見慣れないプロパティかと思う、text-transformは、テキストの大文字表示・小文字表示を指定します。
各値の説明
| none | 記述した通りに表示。初期値。 |
|---|---|
| capitalize | 単語の先頭文字を大文字で表示。 |
| lowercase | 全てを小文字で表示 。 |
| uppercase | 全てを大文字で表示。 |
今回、値にuppercaseを指定しているので全てが大文字で表示されます。
見た目は大文字になりますが、コピってメモ帳とかに貼り付ければ書いた通りに表示されます。
この場合は、先頭文字だけ大文字で表示されます。
背景の処理ですが、1*23pxの画像を下位置基準に横にリピートさせています。
こうすることで、文字数が増えたり、文字サイズをかなり大きくしても崩れずに組めます。
リスト部分について
今回、a要素にリストマーク（変な花柄の）を指定してますが、li要素に指定しても見た目では同じように出来ます。
好みの問題だったり状況に応じて変わってくるかと思うのですが、a要素に指定することで、リストマーク部分もクリック出来るようになります。
CSS HappyLifeのCategoriesでは、li要素にマークとかの指定をしているのでマーク部分はクリックできません。
一応コレには理由があって、リンクを貼ってない場合も同様に見えるからです。
今回のサンプルのようにa要素に指定してると、リンクが貼られないリストには何のスタイルも適用されないのでかっこ悪くなっちゃいます。
この辺は、常にリンクが貼られるのか、状況によってはリンクが貼られないのかで変わってくると思います。
以上でサイドは完成です。