*太陽光発電
ホームページ素材集のCSS メニューを利用するに当たり、『リスト』の使い方を理解しておくと、スムーズに応用できます。簡単な説明を載せておきます。
例として
Menu1
Menu2
Menu3
Menu4
Menu5
を横並びにしたメニューを作成します。
--- HTML ---
<div>
<a href="#">Menu1</a> <a href="#">Menu2</a> <a href="#">Menu3</a> <a href="#">Menu4</a> <a href="#">Menu5</a>
</div>
--- HTML ---
<div>
｜ <a href="#">Menu1</a> ｜ <a href="#">Menu2</a> ｜ <a href="#">Menu3</a> ｜ <a href="#">Menu4</a> ｜ <a href="#">Menu5</a> ｜
</div>
上の例でも、表示と動作上何も問題ありませんが、メンテナンスの時非常に苦労します。
一つ一つ探りながら間違いの無いように手直ししなくてはなりません。
それと、スマートで解りやすいコーディングではありません。
このような場合『リスト』を使って、次の例の用に作りましょう。
--- HTML ---
<div id="navi">
<ul>
<li class="first"><a href="#">Menu1</a>
</li>
<li><a href="#">Menu12</a></li>
<li><a href="#">Menu13</a></li>
<li><a href="#">Menu14</a></li>
<li><a href="#">Menu15</a></li>
</ul>
</div>
--- CSS ---
#fnavi {
text-align:center;
}
#fnavi li {
display:inline;
padding-left:10px;
padding-right:5px;
border-left:1px solid #000000;
}
#fnavi li.first {
border-left:none;
}
--- HTML --- 以下 HTML は同じ なので省略
<div id="navi">
<ul>
<li ><a href="#">Menu1</a>
</li>
<li><a href="#">Menu12</a></li>
<li><a href="#">Menu13</a></li>
<li><a href="#">Menu14</a></li>
<li><a href="#">Menu15</a></li>
</ul>
</div>
--- CSS ---
#fnavi {
text-align:center;
}
#fnavi li {
display:inline;
padding-left:10px;
padding-right:5px;
border-left:1px solid #000000;
}
#fnavi li:first-child {
border-left:none;
}
--- CSS ---
#fnavi {
text-align:center;
}
#fnavi li {
display:inline;
padding-left:10px;
padding-right:5px;
}
#fnavi li+li {
border-left:1px solid #000000;
}
--- CSS ---
#fnavi {
text-align:center;
}
#fnavi ul {
display:inline;
padding-left:5px;
border-left:1px solid #000000;
}
#fnavi li {
display:inline; padding-left:5px;
padding-right:10px;
border-right:1px solid #000000;
}
普通は縦に並ぶはずの『リスト』を横に並べる方法や、各要素の操作方法を学習すると、後はその要素をロールオーバーしたり、色を変えたりと、単なる応用になります。
是非このサイトのCSS メニュー素材を使う前に、マスターしておきましょう。
世界にたった一つ、あなただけのドメインが年額タッタの980円から取得できます！
マシンプラン、回線プランを自由に選択－使用目的に合わせて使えリソースが気にならない専用サーバRegistration：
コントロールパネルが分かりやすく初めての人でも簡単に設置できます。
オススメは月額500円の
「
