HTMLリストは、ウェブデザインにとって重要なものです。流行は無くなりますが、リストはいつでも必要です。それは整理されているかどうかは関係ありません。
ずっとウェブデザインをしている人たちは、基本的なHTMLを見飽きています。（ナビゲーションではなく、スタイルに使われます）簡単なCSSでは、処理速度を早める事はできません。しかし、HTMLには多くの可能性があります。
私たちはチームを作って、クリエイティブなHTMLリストを探しました。何人かの有名なデザイナーは、簡単なものしか使っていません。見てみてください。
フォントと背景でアイテムを目立たせる
長いリストの問題点は、各々のアイテムを目立たせるのが難しいことです。これのサンプルはきれいに作れています。太字のフォントとグラデーションをつけた背景で目立たせています。さらに、CSSの影をつけてさらに目立つようにしています。これで、魅力的で読みやすくなっています。
See the Pen
Gradient Ordered List by Erin E. Sullivan (@erinesullivan)
on CodePen.
モバイル対応させる
最近、携帯電話をずっと見ている人が増えてきました。なので、モバイル対応のページを作る必要があります。しかし、画面をスクロールするのは時間がかかります。ここが検討する課題です。大きな画面では番号なしリストになっているものが、モバイルでは、コンマで区切られただけになります。これは、見ている人の時間短縮に役立ちます。（たとえばFacebookを見る時などです）
簡単な形と色で読みやすく
あなたは、リストのデフォルトをこまめにチェックする必要はありません。このコレクションを取り入れてください。これは、簡単な形と色で作られていて、読みやすくなります。これは、関連会社のページや非営利団体のサイトに効果的です。
SVGとJavaScriptで目立たせる
この３Dリストは、上のものとは逆だと思ってください。これはいい意味で目立ちます。SVGとJavaScriptを組み合わせる事で他とは違うものができます。これは、オンラインのプレゼンテーションやランディングページになります。
CSSでタイムラインを簡略化する
デザインを変更をしようとする時、プロセスを考えすぎる傾向があります。たとえば、タイムラインは余分なものを入れる必要はありません。単純な番号なしリストで十分です。CSSのようなものを使うと、他のものとタイムラインを 繋ぐ事ができます。
CSSで番号付けに法則性を
複数の番号を振らなければならない時、一定の法則性を持たせる必要があります。CSS counter-resetを使えば自動的に番号をつけれます。この例では、４段階の番号付けがしてあります。
リストを使いやすくした別の例
これは、ユーザーがリストを使いやすくした別の例です。 番号で背景が変わるだけでなく、各段階において色が変わります。 インデントにしたがって段階を区別しやすくなります。CSSを作るのも簡単になります。
CSS Gridの効果的な使い方
CSS Gridは、レイアウトやリストの作り方を変えてくれます。 この例は、効果的なリストの例です。大きな画面で見るときはコラムごとに分類され、小さい画面で見るときは一つ一つツリー状になります。これを見ると、どんな画面でも見やすくするためにどうすればいいか学べます。
CSSの活用でより効果的なリストを
CSSの特徴は、あなたが思っている以上に多くのリストを組み立てる事ができるという事です。 これは異なる形のものをまとめています。この例は、イメージやアイコンを効果的に使っています。
HTMLリストは使うほどに優れた機能が
HTML リストは、自由にリスト作成ができます。使えば使うほど驚くような機能に気がつきます。既存のコンテンツにリストを追加する時、うまくいかない時があるかと思います。上の例では、デフォルトを作る必要がない事を証明しています。 CSSやJavaScriptを少し使うだけで、面白く読みやすいリストが出来ます。
おすすめ新着記事
おすすめタグ