CSSでリストタグを横並びにする

通常、リストタグを利用すると、ブラウザ上では以下のように縦に並びます。
このリストをCSSで横並びにする方法をご紹介します。

Sample

  • <項目1>
  • <項目2>
  • <項目3>

↓CSSで横並びに

  • <項目1>
  • <項目2>
  • <項目3>


floatで横並びに

リストを横並びで表示させるには、liタグにfloatを適用することで実現できます。
ついでに、横並びにした際にリストのマークが邪魔なので、ulタグにlist-style:none;を適用して消してしまいます。
また、floatで回り込みが効いているので、任意の場所でclear:both;を適用してこれを解除します。

詳細は以下のサンプルコードをご覧下さい。


サンプルコード

HTML



CSS



装飾を加えてメニューらしくする

上記に、CSSで装飾してあげることで、横並びのメニューを作ることができます。
背景をグラデーションにするなり、ボタン風にするなりお好きなように。
以下のようなカスタマイズも可能です。

横並びのリストメニューのサンプル

以上、CSSでリストタグを横並びにする方法でした。

関連記事

no image

CSSでテキストの選択色を変更する方法

ホームページ上のテキストを選択(ドラッグ)した時、大抵は以下のように背景が青くなりませんか?

記事を読む

no image

【CSS】idとclassの違い

CSS記述の際に用いられる「id」と「class」。 この2つの違い、ちゃんと理解していますか?

記事を読む

no image

【CSS】複数のclassでセレクタを指定する

CSSでHTMLを装飾する際、複数のclassを組み合わせて使用したい場面がでてきます。 今回は、

記事を読む

no image

画像やボタン、divなどのボックスに影をつけるCSS

先日、文字に影をつけるCSSをご紹介しましたが、今回は画像やボタン、divなどのボックスに影をつける

記事を読む

no image

文字に影をつけるCSS

おそらく、ほとんどの方がホームページ上の文字に影がついているのをご覧になったことがあると思います。

記事を読む

no image

CSSを使って印刷用画面を実装する方法

知っている方も多いと思いますが、地図サービスなどで見かける印刷用画面。 それを自分のホームページで

記事を読む

  • tOqIoNgVisSae (by toradol for migraines)
    【サーバー】 ロリポップ
    【プラン】 volSVKaWHUO ( 1~2年 )
    感想
    toradol 60 mg, ... [続きを読む]
    皆様からの評価・クチコミを募集しています。
    ぜひ気軽にご利用ください。
PAGE TOP ↑