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

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

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

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

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

liの使い方

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

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

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

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には以下のようにいくつものパターンがあります。

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

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

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

まとめ

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

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

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

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！