Team-SKY30 サイトのPVを増やそう計画

レスポンシブでも使える、リストタグ(li)のCSSコーディング

公開日:

おはようございます、児島です。

突然ですが、皆さんHTMLでサイトを作成する時、一番よく使うタグは何ですか?
通常なら「div、p、a、img、h」等でしょうか。
私の場合、リストタグ「li」です。

HTMLでサイトを作成していると、様々なコンテンツをリストにして表示する機会が多くなります。
パンくずリストや、リンクリスト、コンテンツメニュー、コメントリスト等様々ですが、その全てで
リストタグ「li」が活躍します。

コーディング初心者の方は、「div、p、a、img、h」等に加えて、リストタグ「li」のコーディングを覚えておくと良いかもしれません。

そんなわけで今日は、マルチスクリーンで役に立つリストタグのCSSコーディング方法を紹介したいと思います。

このページの目次

css3

デフォルトであるインデントとマークを取り除く

まず、ul & li タグにはデフォルトで「インデント」と「マーク」が存在します。
この仕様は汎用性に欠けるので、一旦取り除いてやります。
次のように記述します。

HTML

<ul>
<li>リストA</li>
<li>リストB</li>
<li>リストC</li>
</ul>

css

ul{
	padding: 0;
	margin: 0;
}
li{
	padding: 0;
	margin: 0;
	list-style-type:none;
}

表示を見る

横並びにする

続いて、最も使う機会が多い(?)通常は縦に並ぶリストを横並びにする方法です。
横並びと言えば「float: left;」!
「li」タグに「float: left;」を追加します。さらに、パンくずリストのように表示するために、隣の要素のとの間隔を調整します。
今回は、「margin-left: 10px;」として左に間隔をあけます。

HTML

<ul>
<li>>リストA</li>
<li>>リストB</li>
<li>>リストC</li>
</ul>

css

ul{
	padding: 0;
	margin: 0;
}
li{
	padding: 0;
	margin: 0;
	list-style-type:none;
	float: left;
	margin-left: 10px;
}

表示を見る

「float: left;」を追加した時に下部の要素が回り込んで表示が乱れる事があります。その様な時は「ul」を閉じたすぐ後に、次のように記述して回り込みを解除できます。

<br style="clear:both;">

表示を見る

2列に表示する

続いて、表を2列に表示する方法です。列を作るには「ul」と「li」にそれぞれ幅を指定します。
「ul」100%に対して、「li」50%とすると、2列にすることが出来ます。
HTML

<ul>
<li>リストA</li>
<li>リストB</li>
<li>リストC</li>
<li>リストD</li>
<li>リストE</li>
<li>リストF</li>
</ul>

css

ul{
	padding: 0;
	margin: 0;
	width: 100%;
}
li{
	padding: 0;
	margin: 0;
	list-style-type:none;
	float: left;
	width: 50%;
}

表示を見る

3列にするには「li」のマージンを33.3%、4列なら25%ですね。
また、「ul」の幅が広すぎて、1列目と2列目の間隔が離れすぎてしまう場合は、「ul」のマックスサイズを指定することで解決できます。
css

	max-width: 640px;

表示を見る

メニューバーを作る

最後に、メニューバーのようなものを作ってみました。
横にリストを横に6列並べています。
HTML

<ul>
<li>リストA</li>
<li>リストB</li>
<li>リストC</li>
<li>リストD</li>
<li>リストE</li>
<li>リストF</li>
</ul>

css

ul{
	padding: 0;
	margin: 0;
	width: 100%;
}
li {
	padding:5px 0;
	margin: 0;
	float: left;
	width: 16.6%;
	box-sizing:border-box;
	display: block;
	text-align: center;
	border: 1px #dddddd solid;
	background:#eeeeee;	/* デフォルト */
	background:-moz-linear-gradient(top, #4169e1, #ffffff);	/* Safari,Chrome */
	background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee));/* Firefox */
	background: linear-gradient(to bottom, #ffffff, #eeeeee);	/* ie10 */
}

レスポンシブwebデザインっぽく、ブラウザサイズに合わせて列を縮小してみます!
css

@media screen and (max-width: 640px){
/* 640px以下は3列 */
li {
	width: 33.3%;
}
}
@media screen and (max-width: 320px){
/* 320px以下は2列 */
li {
	width: 50%;
}
}

表示を見る

こんなところでしょうか。
因みにデザイン面だけを考えると、パンくずリストやリンクリストにあえて「ul & li」を使用する必要はないかもしれません。

しかし、HTMLの理論的な構造を整える事は、SEO的に意味のある事です。
見出しは「h」、段落は「p」、リスト「li」とするのが、HTMLの構造上自然ではないでしょうか。
是非やってみてくださいね!


タグ


執筆者


新着記事

2018.05.31 Thu

「アドセンスの初心者応援ライブ」を実施しました!


2017.12.04 Mon

収益性が40%向上したアクティブビュー改善の施策!


2017.12.04 Mon

アクティブビュー率向上施策 ゲーム攻略サイトはアクティブビュー率との相性がめちゃ悪い!


2017.11.28 Tue

AdSense広告の視認率を高めると収益性が向上する?


2017.11.14 Tue

【Team-SKY30の取り組み】アクティブビュー(視認率)向上の施策


2017.02.20 Mon

【告知】宮崎智之氏をゲスト講師にお招きして「第15回ゲームライターコミュニティセミナー」を開催します


2016.09.20 Tue

グローバル(多言語)サイトのURLってサブドメイン?サブディレクトリ?


2016.07.09 Sat

wordpressでループの途中に簡単に広告を入れる方法


2016.07.09 Sat

【旬?】最近やっているモバイル対策


2016.05.05 Thu

1か月PVアップトライアル!結果報告




にほんブログ村 ブログブログ ブログアクセスアップへ