スキップしてメイン コンテンツに移動

リストの種類を用途に応じて使い分けよう

こんにちは、クリエイティブフレークです。

コーディングをしていると、リストをよく使用するのですが、リストの種類って気にしたことがありますか?



リストは大きく分けて3種類。

・<ul><li>を使用
・<ol><li>を使用
・<dl><dt><dd>を使用



↓↓何が違うのかというのがこちら↓↓





■<ul><li>のサンプル



HTML

<div>
<p>試験当日持参するもの</p>
<ul>
<li>受験票</li>
<li>筆記用具</li>
<li>写真付き身分証明書</li>
</ul>
<p>持ち込み禁止物</p>
<ul>
<li>携帯電話(持ち込みの場合は電源をOFF)</li>
<li>問題集、参考書</li>
<li>飲食物</li>
</ul>
</div>


CSS

div {
 color: #333333;
 font-size: 12px;
 width: 300px;
}
p {
 background: #f1f1f1;
 border-left: 5px solid #17aad8;
 padding: 5px 15px;
}
※リストの装飾については今回は省略します。



■<ol><li>のサンプル



HTML

<div>
<p>当店人気フレーバーランキング</p>
<ol>
<li>チョコチップ</li>
<li>ストロベリー</li>
<li>抹茶ミルク</li>
</ol>
</div>

※CSSは<ul><li>のサンプルと同じです。
※リストの装飾については今回は省略します。



■<dl><dt><dd>のサンプル



HTML

<div>
<p>店舗情報</p>
<dl>
<dt>住所</dt>
<dd>東京都◯◯区◯◯町1-1-1</li>
<dt>電話番号</dt>
<dd>03-1111-2222</li>
<dt>営業時間</dt>
<dd>10:00〜19:00</li>
</dl>
</div>



CSS

div {
 color: #333333;
 font-size: 12px;
 width: 300px;
}
p {
 background: #f1f1f1;
 border-left: 5px solid #17aad8;
 padding: 5px 15px;
}
dt {
 float: left;
 width: 80px;
}
※リストの装飾についてはフロート以外、今回は省略します。



見た目以外に、タグを正しく使い分けることで、ソースコードが綺麗に整然となり、さらにはSEOの効果も期待できます。

というのは、検索ロボットがタグの一覧を理解しているので、タグとその意味を関連付けて解釈しようとします。

コーディングにも優しさが大切、ってことですよ。




Written by Creative Flake

コメント

このブログの人気の投稿

ゲシュタルトの法則をWebデザインにも利用しよう

こんにちは、クリエイティブフレークです。 一度は聞いたことがあるかもしれない「ゲシュタルト」。 ゲシュタルト 人間の精神を、部分や要素の集合ではなく、全体性や構造に重点を置いて捉える。この全体性を持ったまとまりのある構造をドイツ語でゲシュタルト(Gestalt :形態)と呼ぶ。 人間の脳がものの形、要素をどのように認識するか、ということですね。 人間がゲシュタルトを感じるときに起こる、さまざまな種類を「プレグナンツの法則」と呼ぶそうですが、その具体例を簡単に紹介。 ゲシュタルトの法則1 : 近接の法則 近接の法則は、近くにあるもの同士が同じグループだと認識されやすい。 ゲシュタルトの法則2 : 類同の法則 類同の法則は、同じ色や、同じ形同士が同じグループだと認識されやすい。 ゲシュタルトの法則3 : 共通運命の法則 共通運命の法則は、同じ方向に動くもの、同じ周期で点滅するなどが同じグループだと認識されやすい。 共通運命の法則は、近接の法則や類同の法則よりも強く働く。 ゲシュタルトの法則4 : 良い連続の法則 良い連続の法則は、図形はつながった形になりやすいと認識されやすい。 近接、類同、共通運命の法則から、切れ目がなくや突然変化しない図形がよいものだと分かる。 ゲシュタルトの法則5 : 閉合の法則 【】や()のように、閉じた形は同じグループだと認識されやすい。 】【 は同じグループと認識しづらい。 ゲシュタルトの法則6 : 面積の法則 小さいものが図として、大きいものが背景として認識されやすい。 ゲシュタルトの法則7 : 対称の法則 対称な図形は閉じた図として認識されやすい。 このゲシュタルトの法則は心理学をはじめとした様々な分野に応用されていますが、人間の特性を活かすという点で、デザインの分野にも活用されています。 たとえばリモコンのボタン配列。 数多くのボタンを、誰が見ても直感的に分かりやすく、誤操作させないように配置しています。 こちらは私のMacのドック。 急いでいるとよく間違ったアイコンをクリックしてしまうので、試行錯誤の末、この配列が一番使いやすい結論に。 Webデザインにおいては、もしすべてのパーツが単調に置かれて

Google「ハングアウト」の絵文字が可愛すぎる。

こんにちは、クリエイティブフレークです。 チャットやインスタントメッセージ機能と言えば、LINEやFacebook、Skypeなど今やたくさんありますが、みなさんはどれを使ってますか? 私はこういうのを使い始めたのが、かれこれ10年近く前になりますねー。 MSNメッセンジャーと、Yahooメッセンジャーを使っていました。 今回はGoogle「ハングアウト」の絵文字がゆるかわな件をご紹介。 ハングアウトの前身が「Googleトーク」というものなのですが、まさに最近「ハングアウト」へ移行したばかり。 ▼他のチャットシステムと同じような使い勝手 ▼絵文字(顔文字) ゆるい! ▼絵文字(乗り物) かわいい! ▼絵文字(いろいろ) 今年流行のカラーとフラットデザインを用いたアイコンは、なんと日本初! 絵文字は一覧から選べるだけでなく、キーボードからの入力も可能! ▼Google IMEで「くだもの」と入力すると いろいろ出てきます。 ここでのプレビューとハングアウトで送信される絵文字はちょっと違いますが、断然ハングアウトの絵文字がかわいい! ぜひぜひ試してみてください。 Googleハングアウト Written by Creative Flake

Photoshopで文字にアンチエイリアスをかける

こんにちは、クリエイティブフレークです。 Photoshopで文字を書いていると、「太字を選択するほどでもないけど、あと気持ちちょっと太かったらいいのに!」、「あとちょっとクリアに見せたいのに!」と思ったことはありませんか? そんなときに活用したいのが「アンチエイリアス」です。 「エイリアス」とは曲線がギザギザ、ガタガタに表現されてしまうことで、ドット絵みたいに見えます。 なので「アンチ」って言うんですね。 実際に見比べてみると ▲ヒラギノ角ゴシックPro 24pt 明らかに「なし」を選択したものはギザギザです。 「太く」と「シャープ」はちょっと太い感がありますが、「鮮明」と「なめらか」の差が難しいですね。 今度はフォントサイズを変えてみました。 ▲ヒラギノ角ゴシックPro 14pt 個人的には、文字が太くなる「シャープ」と「太く」がややジャギー感(ギザギザ感)が残っていますが、「鮮明」と「滑らかに」はフォントサイズを小さくしたときに潰れてしまいやすいイメージです。 では実際どうやって変更するの?なのですが、Photoshop CS6を例に説明します。 ▲テキストツール(Tの形)を選びます ▲文字を書いたら上のアンチエイリアスを選びます(うちのマシンが英語ですみません) Web用や印刷用など、用途によって強弱を使い分けたいですねヽ(・∀・)ノ Written by Creative Flake