HOME技術ウェブCSSで二段組のリストをつくる

CSSで二段組のリストをつくる

ulタグを使ったリストをCSSで二段組にして表示する方法です。

HTMLのコード

<h2>リスト表示</h2>
<ul class=”menu”>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>
<h2>次のリスト</h2>

CSSのコード

h2{
margin:10px 0;
clear:both;
}
ul.menu{
padding:0;
list-style-type:none;
overflow:hidden;
}
ul.menu li{
width:45%;
padding:5px 10px;
}
ul.menu li:nth-child(even){
float:left;
}
ul.menu li:nth-child(odd){
float:left;
clear:left;
}

実際の表示

上のコードを実際に表示した場合には、以下のように表示されます。
ul.menuにoverflow:hidden;を記したのは、floatをリセットさせるためです。
nth-child(even)は、偶数番目に出てくるタグに対する適用、nth-child(odd)は、奇数番目に出てくるタグに対する適用を意味します。
ここでは、偶数番目の時にfloat:left;で横に並べ、奇数番目のタグが出てきたらfloatを解除することで、2段組みを実現しています。

以下はUL要素を2段組みにしたサンプルです。

リスト表示

次のリスト

関連記事

ChromeでCSSを更新したときに再読み込みで反映させる

Chromeでウェブサイトをチェックしている場合、CSSを更新した際にブラウザの更新を行って再表示しても、CSSの変更が反映されません。 これはキャッシュがChrome内に残っているために起こっている…続きを読む

Windows10にアップグレードしたらApacheが起動しなくなった

Windows7からWindows10にアップグレードしたところ、Apacheが起動しなくなりました。 Apacheが起動しなくなる理由には大きく2つあります。 1つ目は、httpd.confの書き間…続きを読む

GoogleMapのURLを短縮URLで取得する

GoogleMapにリンクを貼るときに、URLが長くなってしまうのを防ぐ、短縮URLの取得の方法です。 まず、GoogleMapを開きます。 左上の検索窓に住所を入力して、その住所を検索します(ここで…続きを読む

CSS:floatの解除をclear以外で行う

CSSでfloatを使って二段組レイアウトをつくった場合、フッターにfloatの効果を解除するには、clear:bothなどを使っていました。 しかし、clear:bothを使うと、marginなどの…続きを読む

ウェブフォントを埋め込み任意のフォントを表示させる

ウェブサイトの表示をさせる際に、自分で指定したフォントで相手にも表示させる方法です。 通常、ウェブサイトのフォントは、閲覧する人のコンピュータに同じフォントがなければ、CSSでfont-familyを…続きを読む

CSS3で複数条件のセレクターを指定する

CSS3を使ってテーブルの両端の列の右側はボーダーを表示せず、それ以外のセルの右側にはボーダーを表示したい、という場合には、複数の条件を適用したセレクターを設定する方法です。 「~かつ、~」というセレ…続きを読む