CSS note

listのデフォルトスタイル

ul ol 要素に代表されるlist要素は、WEBページよく利用される要素で、様々なビュレットを使用することが出来ますが、よく見かけるのは　ベーシックな番号あり、なしリストや、リストスタイルを消したりしたものです。

ナビゲーション用のネストされたULは、WordPressの水平方向に配置されるプライマリーナビゲーションでよく見かけます。

まずは、html4,html5で使われるデフォルトスタイルをみてみましょう。

基本：リストマーカーの色の変更

.widget li{
 color:#27ae60;
}

<ul>
 <li>
 <p>....</p>
 </li>
</ul> 

<ul>
 <li><a href="http://example.com">test</a></li>
 <li><span>test</span></li>
 <li><span>test</span></li>
</ul>

article ul li{
 color:#27ae60;
}
article ul li *:not(a){
 color:#686868;
}

<ol class="custom-number-list">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</li>
<li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</li>
<li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</li>
</ol>

.custom-number-list{
 list-style: none;
 counter-reset: li 7;/* start="8" と同じ*/
}
.custom-number-list li{
 counter-increment: li;
}
.custom-number-list li:before {
 content: counter(li);
 color: red;
 display: inline-block;
 width: 40px;
 text-align: right;
 padding-right:8px;
 box-sizing:border-box;
}

data 属性を使って、リンクの手前に文字などを表示

• list before
• list before
• list before

HTML

<ul class="icon">
 <li><a href="#" data-status="N">list before</a></li>
 <li><a href="#" data-status="?">list before</a></li>
 <li><a href="#" data-status="!">list before</a></li>
</ul>

CSS

.entry-content .icon li{
 position:relative;
}
.entry-content .icon li{
 list-style:none;
 line-height:1.5;
}
.entry-content .icon li a:before{
 position:absolute;
 content:attr(data-status);
 background:#333;
 color:#fff;
 left:-2em;
 width:1.5em;
 height:1.5em;
 border-radius: 50%;
 display:inline-block;
 text-align:center;
 transform: scale(0.7,0.7);
}
.entry-content .icon li a[data-status="N"]:before{
 background:red;
}
.entry-content .icon li a[data-status^="&#"]:before{
 background:transparent;
}

before セレクタを使ったビュレットの置き換え

• Lorem ipsum dolor sit amet, consectetur adipisicing elit,
• sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
• Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
• Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

HTML

<ul class="use-before">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</li>
<li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</li>
<li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>
</ul>

CSS

.use-before li{
 list-style:none;
}
.use-before li:before {
 color: #55acee;
 content: '\2022';
 display: block;
 font-size: 20px;
 left: -20px;
 max-height: 0px;
 max-width: 0px;
 position: relative;
 top: -5px;
}

スクリプトからデータ属性を挿入した　番号付きリスト風の表示

• list before
• list before
• list before
• list before
• list before
• list before

jQueryで、data-status属性値を設定

jQuery(function($){
 $('.entry-content .number li a').each(function(i){
 $(this).attr('data-status', (i+1));
 });
});

子要素の数に応じた動的なスタイル指定

WordPressのプライマリーナビゲーション等では、配布テーマ等の場合、メニューの数をあらかじめ想定できないため、メニューが一段になるか2段になるのか検出しようとすると、javascript等が必要になりますが、工夫をすると、CSSだけでもメニューの数に応じたスタイル指定は可能です。

li要素をインラインブロックで表示し、子要素数が10個を超えたら個数に応じて、サイズをコントロールして、2列で表示する例

コントロールなし

• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name

以下　コントロールあり

• 11,12
• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name

• 13,14
• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name

• 15,16
• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name
• list name

.entry-content ul{
 max-width:100%;
}
.float-dinamic li:nth-child(1):nth-last-child(12), 
.float-dinamic li:nth-child(1):nth-last-child(11), 
.float-dinamic li:nth-child(1):nth-last-child(12) ~li, 
.float-dinamic li:nth-child(1):nth-last-child(11) ~li{
 width:16.6666666667%;
}
.float-dinamic li:nth-child(1):nth-last-child(14), 
.float-dinamic li:nth-child(1):nth-last-child(13), 
.float-dinamic li:nth-child(1):nth-last-child(14) ~li, 
.float-dinamic li:nth-child(1):nth-last-child(13) ~li{
 width:14.2857%;
}
.float-dinamic li:nth-child(1):nth-last-child(16), 
.float-dinamic li:nth-child(1):nth-last-child(15), 
.float-dinamic li:nth-child(1):nth-last-child(16) ~li, 
.float-dinamic li:nth-child(1):nth-last-child(15) ~li{
 width:12.5%;
}

カウンターのカスタマイズ

• Lorem ipsum dolor sit amet, consectetur adipisicing elit,
• sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
• Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
• Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

関連

• レイアウトの切り替えCSS
• CSSソート
• CSSによるディレクトリ階層表現
• 章・節・項スタイル
• Border

リスト要素　ul, ol のリストマーカーの位置の調整

新着記事