8

【CSSのみ】画像を使わずリストをデザインをする方法


要素を使うリストの表示ですが、デフォルト設定では、単純な”・”で始まるため、用途によっては変化させたいことも考えられます。
そのため、中にはあらかじめ画像を読み込んで表示させる方法もあります。
しかし、CSSを利用してその用途に合わせたリストをデザインする方法もあります。
CSSで設定できるのはリストマーカーだけでなく、パディングやマージン等の設定も可能です。

list-style-typeプロパティでマーカーを設定する

シンプルな形にしたい場合、list-style-typeプロパティで設定可能です。
どんな表示が可能か、代表的なものを一覧にしてみました。

プロパティ一覧

記号から、数字など様々な形で設定できるのがわかります。

しかし、これだけではまだ味気ないので他にも紹介していきます。

CSSを活用した色々なリストデザイン

CSSの描画機能を使用して、様々な形のモノを作ることが出来ます。とはいっても、あまりに複雑なものは見る側としても、よくわからなかったりするので、ここでは基本的な形のものを紹介します。

横ライン

リストマーカーを横のラインで描画します。色や太さ、長さなども調節することが出来ます。

横ライン

.line li {
position: relative;
}
.line li::after {
display: block;
content: ”;
position: absolute;
top: .6em;
left: -1em;
width: 10px;
height: 1px;
border: 1px solid;
background-color: #999;
}

ディスク

デイスクに関しても、list-style-typeプロパティで設定するディスクと違って、色や大きさ、線のみといったような様々なデザインに変化させることが出来ます。

ディスク

.disc li {
position: relative;
}
.disc li::after {
display: block;
content: ”;
position: absolute;
top: .3em;
left: -1em;
width: 7px;
height: 7px;
background-color: #eee;
border: 2px solid #3498db;
border-radius: 100%;
}

矢印ディスク

ディスクの中に矢印を入れるといった、複合的なデザイン。応用で、ボックスに矢印なども可能です。

矢印ディスク

.arrow_disc li {
position: relative;
}
.arrow_disc li::after,
.arrow_disc li::before {
display: block;
content: ”;
position: absolute;
}
.arrow_disc li::after {
top: .24em;
left: -1.3em;
width: 16px;
height: 16px;
background-color: #F33;
border-radius: 100%;
}
.arrow_disc li::before {
z-index: 2;
top: .625em;
left: -.975em;
width: 4px;
height: 4px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

チェック

ランディングページなどでよく使用されるチェックマーク。
サイズも上手く変化させることで、書かれている文章の印象を強く与えることができますね。

チェック

.check li {
position: relative;
}
.check li::after {
display: block;
content: ”;
position: absolute;
top: .5em;
left: -1.3em;
width: 12px;
height: 3px;
border-left: 3px solid #F00;
border-bottom: 3px solid #F00;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

要素を使用してCSSでリストを擬似的にデザインする

ホームページを作成するときに、メニューの様な形でデザインされたリストも作成可能です。
カーソルを合わせた時に、リストの背景が変わるなどちょっとしたギミックを取り入れることで面白いインターフェースをデザインすることが可能です。

リストマーカーに関しては、CSSの描画で別途デザインが可能です。

以下共通部分
==========
p {
margin: 3em 0 0 1em;
font-size: 20px;
font-weight: bold;
}
ul, ol {
list-style: none;
font-family: Arial, sans-serif;
font-size: 15px;
line-height: 1.4;
}
li {
margin-top: .5em;
}
li:first-child {
margin-top: 0;
}

.rist-menu {
list-style: none;
overflow: hidden;
width: 300px;
padding: 0;
margin: 50px auto 100px;
}
.rist-menu li {
list-style: none;
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
border-bottom: 1px solid #87cefa;
}
.rist-menu li:last-child {
border-bottom: 0px;
}
.rist-menu li a {
display: block;
position: relative;
z-index: 10;
height: 40px;
margin: 0;
padding: 0px 10px 0px 50px;
background: #1e90ff;
color: #fff;
font-size: 14px;
line-height: 40px;
font-weight: bold;
text-decoration: none;
}
.rist-menu li a:hover {
background: #87cefa;
}
==========

まず一つ目のメニューのようなデザイン。矢印を活用したメニューリストです。

#menu1 li a:before {
display: block;
content: “”;
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
left: 20px;
width: 8px;
height: 8px;
margin-top: -4px;
background: #fff;
}
#menu1 li a:after {
display: block;
content: “”;
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
left: 15px;
width: 8px;
height: 8px;
margin-top: -4px;
background: #1e90ff;
}
#list1 li a:hover:after {
background: #87cefa;
}

矢印メニュー

次に、矢印ディスクを活用したメニューリストです

#menu2 li a:before {
display: block;
content: “”;
position: absolute;
top: 50%;
left: 19px;
width: 16px;
height: 16px;
margin-top: -8px;
border-radius: 50%;
background: #fff;
}
#menu2 li a:after {
display: block;
content: “”;
position: absolute;
top: 50%;
left: 25px;
width: 0;
height: 0;
margin-top: -5px;
border: 5px solid transparent;
border-left: 5px solid #1e90ff;
}

矢印ディスクメニュー

左にボーダーを入れておき、カーソルを合わせると影が伸びる様な形のデザインも可能です。
カーソルを合わせた時の描画を考えた時にアニメーションを付けるのであれば、transitionを指定すると可能です。
しかし、ブラウザによってはtranstionが動かない場合もありますので、注意が必要です。

#list6 li a {
padding: 0px 10px 0px 30px;
}
#menu3 li a:before {
display: block;
content: “”;
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 40px;
background: #87cefa;
transition: 0s;
z-index: -1;
}
#menu3 li a:hover {
background: #1e90ff;
}
#menu3 li a:hover:before {
width: 300px;
}

以上のコードで、こちらのメニューが完成します。

レフトバーメニュー

まとめ

CSSのみを利用したリストをデザインする方法ですが、画像を使用しなくてもしっかりしたものが作成できます。

もちろん、画像を使用することでできるものもありますが(場合によっては簡単なものも)、HTML5/CSS3になったことで、描画の幅が広がり融通も効くことでしょう。

ある程度、自分でリストを作成すると応用が可能ですので様々なデザインにチャレンジしてみてくださいね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articleコーディングが爆速に!手放せなくなるZen-Codingの魅力と使い方