灰色背景がサンプルソース薄緑背景が実際の見た目
サンプルソース
HTMLソース
<ul id=”menu”>
<li><a href=”bbs.html”>掲示板</a></li>
<li><a href=”link.html”>リンク</a></li>
</ul>
<li><a href=”bbs.html”>掲示板</a></li>
<li><a href=”link.html”>リンク</a></li>
</ul>
CSSソース
#menu {margin:0px;list-style:none;}
#menu li {float:left; margin:1px 3px;}
#menu li {float:left; margin:1px 3px;}
サンプル表示
解説
考え方
リストというと縦並びなイメージですが、実は横に並べることも出来ます。
float:left;というものがあるのですが、これは左側から横に書いた順番に並べるという意味の指定です。
つまり、リストの各項目を左から右へと順番に並べて表示するという意味になります。
HTMLソース
メニューに使うリストにのみ適用させる為、リストにidを指定します。
ここでは、<ul id=”menu”>としています。
CSSソース
色々と書いてありますが、肝になる部分は1つのみ。
float:left;
ここだけです。
上でも説明しましたが、float:left;には左から右へと順番に並べて表示するという意味があります。なので、リストの各項目が横並びに表示されます。
表示される順番は、HTMLソースの一番上に書いたものが一番左で、その後は上から下へという流れで左から右へと表示されていきます。
なお、float:right;というのもあり、これは右から左へ順番に表示するというものです。
表示される順番は、HTMLソースの一番上に書いたものが一番右で、その後は上から下へという流れで右から左へと表示されていきます。
なおここでは、横並びにすると隣との境界が分かりにくかったので、margin:1px 3px;で上下1pxずつ左右3pxずつ隙間をあけています。
borderを使用して境界線を書いたり、background-colorで背景色を変えたりすることでも各項目を分かり易く分けることが出来ますのでお好みに応じてどうぞ。
