公開日：
おはようございます、児島です。
突然ですが、皆さんHTMLでサイトを作成する時、一番よく使うタグは何ですか？
通常なら「div、p、a、img、h」等でしょうか。
私の場合、リストタグ「li」です。
HTMLでサイトを作成していると、様々なコンテンツをリストにして表示する機会が多くなります。
パンくずリストや、リンクリスト、コンテンツメニュー、コメントリスト等様々ですが、その全てで
リストタグ「li」が活躍します。
コーディング初心者の方は、「div、p、a、img、h」等に加えて、リストタグ「li」のコーディングを覚えておくと良いかもしれません。
そんなわけで今日は、マルチスクリーンで役に立つリストタグのCSSコーディング方法を紹介したいと思います。
このページの目次
デフォルトであるインデントとマークを取り除く
まず、ul & li タグにはデフォルトで「インデント」と「マーク」が存在します。
この仕様は汎用性に欠けるので、一旦取り除いてやります。
次のように記述します。
HTML
<ul> <li>リストA</li> <li>リストB</li> <li>リストC</li> </ul>
css
ul{
padding: 0;
margin: 0;
}
li{
padding: 0;
margin: 0;
list-style-type:none;
}
横並びにする
続いて、最も使う機会が多い（？）通常は縦に並ぶリストを横並びにする方法です。
横並びと言えば「float: left;」！
「li」タグに「float: left;」を追加します。さらに、パンくずリストのように表示するために、隣の要素のとの間隔を調整します。
今回は、「margin-left: 10px;」として左に間隔をあけます。
HTML
<ul> <li>＞リストA</li> <li>＞リストB</li> <li>＞リストC</li> </ul>
css
ul{
padding: 0;
margin: 0;
}
li{
padding: 0;
margin: 0;
list-style-type:none;
float: left;
margin-left: 10px;
}
「float: left;」を追加した時に下部の要素が回り込んで表示が乱れる事があります。その様な時は「ul」を閉じたすぐ後に、次のように記述して回り込みを解除できます。
<br style="clear:both;">
２列に表示する
続いて、表を２列に表示する方法です。列を作るには「ul」と「li」にそれぞれ幅を指定します。
「ul」100%に対して、「li」50%とすると、２列にすることが出来ます。
HTML
<ul> <li>リストA</li> <li>リストB</li> <li>リストC</li> <li>リストD</li> <li>リストE</li> <li>リストF</li> </ul>
css
ul{
padding: 0;
margin: 0;
width: 100%;
}
li{
padding: 0;
margin: 0;
list-style-type:none;
float: left;
width: 50%;
}
３列にするには「li」のマージンを33.3％、4列なら25％ですね。
また、「ul」の幅が広すぎて、1列目と２列目の間隔が離れすぎてしまう場合は、「ul」のマックスサイズを指定することで解決できます。
css
max-width: 640px;
メニューバーを作る
最後に、メニューバーのようなものを作ってみました。
横にリストを横に６列並べています。
HTML
<ul> <li>リストA</li> <li>リストB</li> <li>リストC</li> <li>リストD</li> <li>リストE</li> <li>リストF</li> </ul>
css
ul{
padding: 0;
margin: 0;
width: 100%;
}
li {
padding:5px 0;
margin: 0;
float: left;
width: 16.6%;
box-sizing:border-box;
display: block;
text-align: center;
border: 1px #dddddd solid;
background:#eeeeee; /* デフォルト */
background:-moz-linear-gradient(top, #4169e1, #ffffff); /* Safari,Chrome */
background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee));/* Firefox */
background: linear-gradient(to bottom, #ffffff, #eeeeee); /* ie10 */
}
レスポンシブwebデザインっぽく、ブラウザサイズに合わせて列を縮小してみます！
css
@media screen and (max-width: 640px){
/* 640px以下は3列 */
li {
width: 33.3%;
}
}
@media screen and (max-width: 320px){
/* 320px以下は２列 */
li {
width: 50%;
}
}
こんなところでしょうか。
因みにデザイン面だけを考えると、パンくずリストやリンクリストにあえて「ul & li」を使用する必要はないかもしれません。
しかし、HTMLの理論的な構造を整える事は、SEO的に意味のある事です。
見出しは「h」、段落は「p」、リスト「li」とするのが、HTMLの構造上自然ではないでしょうか。
是非やってみてくださいね！
タグ
