今日は、我が家のネット環境が著しく悪かったもので、つながらないつながらない。ライフラインを絶たれたかのうように、あぁ一体どうすれば・・・って途方にくれておりました。ってことは私ってオタクなの?

それはさておき、今回このカテゴリーを上に持っていくにあたり使用したのがリスト用のタグ。とってもシンプルで<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;右に線をつける


(見え方はこんな感じ↓)

    果物>>
  • りんご
  • みかん
  • いちご

    野菜>>
  • キャベツ
  • きゅうり
  • 白菜



説明のため、かわいくはないのですが・・。横に並べるまではこんな感じ。
四角く囲ったものに色付けをするのは、こちらを見てみてくださいね。