それはさておき、今回このカテゴリーを上に持っていくにあたり使用したのがリスト用のタグ。とってもシンプルで<ul></ul>や<li></li>で作れます。なぜ、こんなものが必要だったかというと、まず綺麗に横に並べたかったこと、検索の対策にもちょっとイイかもってこと、後々デザインしやすいだろう事があったので。
【リストタグを使ってみる→HTML編集】
[例]りんご・みかん・いちごを、リストタグで書くと・・
<li>りんご</li><li><みかん</li><いちご</li>
単純に言うとこんなかんじ。これらを一つの分類としてくれるのが<ul></ul>というタグ。要するには、上記を果物、でまとめてくれる感じ。野菜のリストも増やしていくと・・
[例]キャベツ、きゅうり、白菜を追加して・・
<ul>果物>>
<li>りんご</li><li><みかん</li><いちご</li>
</ul>
<ul>野菜>>
<li>キャベツ</li><li><きゅうり</li><白菜</li>
</ul>
(見え方は下記のような感じに)
- 果物>>
- りんご
- みかん
- いちご
- 野菜>>
- キャベツ
- きゅうり
- 白菜
このままだと、ブッサイクなのでCSSにてデザインをするために・・
【まず、リスト全体に旗をつける→HTMLで編集】
名前は何でもよいですが、リストなのでlistという名前にするため、
<div class="list"></div>で上記のタグを囲みます。
[こんなかんじに↓]
<div class="list">
<ul>果物>>
<li>りんご</li><li><みかん</li><いちご</li>
</ul>
<ul>野菜>>
<li>キャベツ</li><li><きゅうり</li><白菜</li>
</ul>
</div>
【次にCSSでデザインを決める→CSSで編集】
listという名前をつけたので、DIV.listという名前が必要、それと今回リストタグを使用しているので、ulとliを加えたCSSを書く必要があります。今回のリストを横並べるCSS。詳しくは下記の例を見てください。
DIV.list{background-color:#ffcccc;} リスト全体の背景色をつける
DIV.list ul{background-color:#ffffff;リスト部分背景を白くする。
padding-top:3px;リストの上内余白を3pxに
padding-bottom:3px;リストの下内余白を3pxに
}
DIV.list li{display:inline;リストを横に並べる
font-color:#EF7311;文字色を決める
margin-right:30px;リストの右外余白を30pxに
padding-left:15px;リストの左内余白を15pxに
padding-right:15px;リストの右内余白を15pxに
padding-top:3px;リストの上内余白を3pxに
padding-bottom:3px;}リストの下内余白を3pxに
border-top:1px solid #003366;上に線をつける
border-left:1px solid #003366;左に線をつける
border-right:1px solid #003366;右に線をつける
(見え方はこんな感じ↓)
説明のため、かわいくはないのですが・・。横に並べるまではこんな感じ。
四角く囲ったものに色付けをするのは、こちらを見てみてくださいね。