cssでul、liのデザインを変更する方法と横並びにする方法

2021.11.10

箇条書きや内容を列挙したいときなどには、リストタグ(ul、li)が便利です。

しかしそのままでは、ただの文字の羅列のように見えてしまうということもあります。ユーザーにとって分かりにくいですし、読み飛ばされてしまうこともあるかもしれません。

分かりやすく、目を引くようなリストを作るには、デザインが重要です。HTMLで記述するだけでなく、CSSで装飾をほどこす必要があります。

この記事ではul、liのデザインを変更する方法を解説しています。リスト作りに是非お役立てください。

liの使い方

全体をulタグで囲い、その中にliタグで内容を1つずつ記述していきます。

具体的には、以下のような形です。

HTML
<ul>
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
CSSのliタグを説明する画像

liタグは、必ずulの中に入れる必要があります。

最初の開始タグと、最後の閉じタグを忘れないようにしてください。

中のliの数には制限がありません。

ちなみにリストタグはulだけではなく、ol、dlといったタグがあります。

ulは記述した内容がそのまま並ぶシンプルなリストです。

olは記述した順に番号が振られます。dlは定義リストと呼ばれるもので、中のdtとddがセットになっていてdtの内容をddで説明するときなどに使われます。

list-styleを変更する

liはデフォルトの状態で、左側に黒い丸が表示されます。これがlist-styleです。

黒い丸のデザインを変更することができます。

CSS
li {
list-style-type: circle;
}
list-style-typeをcircleに指定した時の画像

このように記述すると、黒い丸が白い丸に変わります。

list-style-typeには以下のようにいくつものパターンがあります。

disk黒丸(デフォルト)
circle白丸
square黒四角
lower-roman小文字のローマ数字
upper-roman大文字のローマ数字
lower-greek小文字のギリシャ文字
decimal算用数字
decimal-leading-zero先頭に0がついた算用数字
lower-alpha小文字のアルファベット
upper-alpha大文字のアルファベット
cjk-ideographic漢数字
hiraganaあいうえお順のひらがな
katakanaアイウエオ順のカタカナ
hiragana-irohaいろはにほへと順のひらがな
katakana-irohaイロハニホヘト順のカタカナ
hebrewヘブライ数字
armenianアルメニア数字
georgianグルジア数字
noneなし

提供された上記のパターンだけではありません。

任意の画像を指定することもできます。ここでは画像のファイルをsample.pngとします。

CSS
li {
list-style-image:url("sample.png") ;
}

このように、list-style-imageで自作の画像を設定することもできるのです。画像名、パスは各自で変更してください。

list-styleのアイコンは、表示位置の調整が可能です。

CSS
li {
list-style-image:url("sample.png");
list-style-position:outside;
}

list-style-positionが表示位置を調整するプロパティです。outsideは初期値で、アイコンがリストの外側に表示されます。

insideは内側です。テキストが複数行になる場合、2行目以降の開始位置がアイコンの位置と揃います。

なお、list-style-type、list-style-image、list-style-positionは記述の省略が可能です。

CSS
li {
list-style:circle outside;
}

このようにlist-styleと記述し、typeまたはimageとpositionを一括で指定することができます。

list-styleを使わずにアイコンを表示させる

list-styleによるアイコン表示を紹介しましたが、これには難点があります。表示位置に関する設定が、list-style-positionのみで細かな調整ができないのです。

そのため、実際のコーディングの際は、list-styleではない別の方法でアイコンを表示させることが多々あります。

背景画像を使う

アイコンを背景画像として表示させるという方法です。

以下のように記述します。

CSS
ul {
padding:0; /*デフォルトの指定解除*/
list-style :none /*list-styleを非表示に*/;
}
li {
background-image: url("sample.png"); /*アイコン画像指定*/
background-repeat:no-repeat; /*画像の繰り返し指定を解除*/
background-position:left center; /*画像の表示位置指定*/
padding-left:15px; /*画像を表示させるスペースを確保*/
}

まずulにデフォルトの余白指定解除の記述を行っています。

list-styleの表示はnoneでなしにしています。画像のアイコンを表示させるので、もともとのアイコンは不要です。

liにbackground-imageで表示させる画像を指定しています。背景画像はそのままでは、繰り返しで表示されてしまうので、no-repeatで1度だけの表示に指定しています。

background-positionは画像の表示位置を指定するプロパティで、横方向が左、縦方向が真ん中という記述です。

このままではアイコンとテキストが重なってしまうので、左側にpaddingで15ピクセルのスペースを設けました。

background-positionはピクセルでも指定可能で、細かな位置調整が可能です。

疑似要素を使う

疑似要素でアイコンを表示させる手法もポピュラーです。

CSS
ul {
padding:0; /*デフォルトの指定解除*/
list-style :none /*list-styleを非表示に*/;
}
li {
position:relative;/*疑似要素にabsoluteを使用する場合必要*/
padding-left:15px; /*画像を表示させるスペースを確保*/
}
li:before {
content:""; /*空の疑似要素を生成する*/
width:10px; /*幅指定*/
height:10px; /*高さ指定*/
background:#ff0000;/*色指定*/
border-radius:5px;/*アイコンを丸く*/
position:absolute;/*絶対配置にする*/
left:0px;/*横の表示位置指定*/
top:7px;/*縦の表示位置指定*/
}

「content:””」で空の疑似要素を生成しました。これを高さ10ピクセル、幅10ピクセルに指定し、背景色で#ff0000(赤)に着色しています。さらに角丸のプロパティ、border-radiusで丸くしました。これでアイコンの完成です。

「position:absolute;」によって、ピクセル単位で任意の位置に配置できるようにしています。

画像を作成する必要がないので、使い方を覚えると非常に便利です。CSS3の応用によって、三角形や矢印のアイコンも生成できます。

画像の使用も可能です。背景画像として設定できます。

CSSでリスト全体を装飾する

liだけでなくul全体のデザインを変更することで、リスト全体が際立ち、閲覧者の目にとまりやすくなるでしょう。

borderやbackgroundが効果的です。

CSS
ul {
padding:0; /*デフォルトの指定解除*/
border:3px solid #2a77e0; /*ul全体の境界線を指定*/
background: #d3e6ff; /*背景色を指定*/
}
li {
padding:10px; /*liの余白指定*/
border-bottom: 1px #2a77e0 dotted; /*liの下に境界線を指定*/
}
li:last-child {
border-bottom:none; /*最後のliだけborderを非表示に*/
}

ul全体を#2a77e0(濃い青)の境界線で囲い、背景に#d3e6ff(薄い青)を敷きました。これでリスト全体を目立たせることができます。

liの下には点線の境界線をひいて、ひとつずつ区切っています。このようにすれば目立つだけでなく、内容を分かりやすくすることも可能です。

一番下のliの境界線はulの境界線と重なってしまうので、疑似要素を使って非表示にしています。「li:last-child」は最後のliという意味です。

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

短文のリストであれば、縦ではなく横に並べた方が見栄えがいいことがあります。また、リストはメニューを記述するときにもよく使用されるタグです。

グローバルメニューを作るときなどのために、横並びの方法は覚えておくとよいでしょう。

float

floatは、要素を横に回り込ませるプロパティです。

CSS
li {
float:left;
}

このように記述すると、liが左から順番に横並びになります。rightだと右から順番に横並びです。

とても簡単に横並びを実現できますが、floatには欠点があります。liの次の要素まで横並びにしてしまうのです。

それを解除するために、clearfixというCSSがあります。

CSS
.clearfix:after {
content: "";
display: block;
clear: both;
}

CSSに上記の記述を行い、ulにclearfixというclassを指定してください。そうすることで、そのリスト以降の要素が横並びにならなくなります。

cleafixはfloatとセットで使われるので、一緒に覚えておいてください。

inlineまたはinline-block

liはブロックレベル要素です。要素の後に改行が入るというもので、p、divなど多くのタグがこれに当てはまります。タグを閉じるとそこで改行されるので、中身が短くても縦積みになるのです。

ブロックレベル要素をインライン要素に変えれば、横並びになります。

インライン要素は、要素の後に改行が入りません。span、aなどがこれに当てはまります。pの中でspanやaを使っても改行されないのはこのためです。

ブロックレベル要素をインライン要素に変更するには、displayというプロパティを使用します。

CSS
li {
display:inline;
}

これでliがインライン要素になり、横並びになります。

デフォルトでは左寄せですが、中央寄せ、右寄せにもできます。

CSS
ul {
text-align:center;
}
li {
display:inline;
}

ulに要素の水平方向の配置を指定するプロパティ、text-alignを記述し、centerを指定しました。これで横に並んだliが中央に集まって配置されます。

インライン要素は幅や高さを指定できません。リストを横並びにする場合、大きさを揃えることが多く、インライン要素では不便な場合があります。

その問題をクリアできるのが、インラインブロック要素です。インライン要素とブロックレベル要素の特徴を併せ持ち、改行されないにも関わらず、幅と高さの指定が可能です。

以下に、インラインブロックを使用した横並びリストの例を記述します。

CSS
ul {
text-align:center; /*リスト全体を中央寄せに*/
}
li {
display:inline-block; /*インラインブロックを指定*/
width:100px; /*幅を指定*/
padding:10px 0; /*縦方向の余白を指定*/
border:1px solid #cccccc; /*境界線を指定 */
text-align:center; /*liの内容を中央寄せに*/
}

これで100ピクセルで#cccccc(グレー)の境界線に囲われたブロックが、中央寄せで3つ並ぶようになります。

横並びにしたときの隙間に注意

inlineやinline-blockでliを横並びにすると、要素同士の間に隙間ができてしまいます。これはHTMLの改行が原因です。

HTML
<ul>
<li>内容</li><li>内容</li><li>内容</li>
</ul>

このようにliの間の改行をなくすと、隙間はできなくなります。

他に以下のような記述方法もあります。

<ul>
<li>内容</li><!--
--><li>内容</li><!--
--><li>内容</li>
</ul>

コメントタグによってliの間の改行を無効化しています。

HTMLには、手を加えたくないこともあるでしょう。CSSで解決する方法もあります。

CSS
ul {
font-size:0;
}
li {
font-size:14px;
}

ulのテキストの大きさを0にすることによって、隙間も0になります。しかし、そのままではリストの内容まで0になってしまうので、liでテキストの大きさを指定しなおしています。

flexbox

flexboxを使用することによって、要素の縦横の配置を柔軟に指定できます。

色々な並べ方がありますが、今回はliの横並びに関することのみ解説します。

CSS
ul {
display:flex;
}

このように記述するだけで、ulの子要素、つまりliがすべて横並びになります。

さらに関連するプロパティを指定することで、さまざまな並べ方が可能です。

CSS
ul {
display:flex;
flex-direction:row-reverse;
justify-content:space-between;
}

flex-directionは要素の並び順の方向です。初期値はrowで通常通り左から順に要素が並びます。row-reverseは初期値とは逆で、要素が右から順に配置されます。

justify-contentは要素の水平方向の配置を決めるプロパティで、space-betweenは要素を横幅いっぱいで均等に配置するというものです。

justify-contentには以下のような値があります。

flex-start初期値です。左寄せで配置されます。
flex-endflex-startとは逆に、要素が右寄せで配置されます。
center要素が中央寄せで配置されます。
space-between要素が横幅いっぱいに広がり、要素と要素の間には均等な余白がとられます。ただし、両端には余白がありません。
space-around要素が横幅いっぱいに広がります。両端にも均等に余白がとられるという点が、space-betweenとは異なります。

text-alignのように左、中央、右に寄せられるし、幅をいっぱいに使った均等な配置ということも可能なので、シンプルな記述で色々なレイアウトが実現できます。

他にも、要素の高さが異なる場合に上辺に揃える、中央に揃えるといったことも可能です。

まとめ

WEBサイトは見え方ひとつで印象が大きく変わります。リストもアイコンや境界線、色の工夫しだいで、分かりやすく、目を引きやすくもなるでしょう。

ただのテキストの羅列では読み飛ばされてしまうこともあるので、デザインには気を配らなければなりません。

横並びにすることも多々あります。解説した方法を覚えて実践してください。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2021 WEBCAMP MEDIA Powered by AFFINGER5