デザイン

デザイン

効果的で魅力的なHTMLリストを簡単に作る方法

speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web.

本記事は、Beyond Bland: HTML Lists with Style
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

856 views

読了時間 : 約2分39秒

HTMLリストは、ウェブデザインにとって重要なものです。流行は無くなりますが、リストはいつでも必要です。それは整理されているかどうかは関係ありません。

 

ずっとウェブデザインをしている人たちは、基本的なHTMLを見飽きています。(ナビゲーションではなく、スタイルに使われます)簡単なCSSでは、処理速度を早める事はできません。しかし、HTMLには多くの可能性があります。

 

私たちはチームを作って、クリエイティブなHTMLリストを探しました。何人かの有名なデザイナーは、簡単なものしか使っていません。見てみてください。

 

 

色と大きさ

長いリストの問題点は、各々のアイテムを目立たせるのが難しいことです。これのサンプルはきれいに作れています。太字のフォントとグラデーションをつけた背景で目立たせています。さらに、CSSの影をつけてさらに目立つようにしています。これで、魅力的で読みやすくなっています。

 

 

 

 

See the Pen
Gradient Ordered List
by Erin E. Sullivan (@erinesullivan)
on CodePen.


 

 

モバイル対策

最近、携帯電話をずっと見ている人が増えてきました。なので、モバイル対応のページを作る必要があります。しかし、画面をスクロールするのは時間がかかります。ここが検討する課題です。大きな画面では番号なしリストになっているものが、モバイルでは、コンマで区切られただけになります。これは、見ている人の時間短縮に役立ちます。(たとえばFacebookを見る時などです)

 

 

 

 

 

簡略化する

あなたは、リストのデフォルトをこまめにチェックする必要はありません。このコレクションを取り入れてください。これは、簡単な形と色で作られていて、読みやすくなります。これは、関連会社のページや非営利団体のサイトに効果的です。

 

 

 

 

その一方で

この3Dリストは、上のものとは逆だと思ってください。これはいい意味で目立ちます。SVGとJavaScriptを組み合わせる事で他とは違うものができます。これは、オンラインのプレゼンテーションやランディングページになります。

 

 

 

 

タイムラインを簡略化する

デザインを変更をしようとする時、プロセスを考えすぎる傾向があります。たとえば、タイムラインは余分なものを入れる必要はありません。単純な番号なしリストで十分です。CSSのようなものを使うと、他のものとタイムラインを 繋ぐ事ができます。

 

番号付け

複数の番号を振らなければならない時、一定の法則性を持たせる必要があります。CSS counter-resetを使えば自動的に番号をつけれます。この例では、4段階の番号付けがしてあります。

 

 

 

 

 

リストを区別しやすくする

これは、ユーザーがリストを使いやすくした別の例です。 番号で背景が変わるだけでなく、各段階において色が変わります。  インデントにしたがって段階を区別しやすくなります。CSSを作るのも簡単になります。

 

 

 

 

グリッドの効果的な使い方

CSS Gridは、レイアウトやリストの作り方を変えてくれます。 この例は、効果的なリストの例です。大きな画面で見るときはコラムごとに分類され、小さい画面で見るときは一つ一つツリー状になります。これを見ると、どんな画面でも見やすくするためにどうすればいいか学べます。

 

 

 

 

追記

CSSの特徴は、あなたが思っている以上に多くのリストを組み立てる事ができるという事です。 これは異なる形のものをまとめています。この例は、イメージやアイコンを効果的に使っています。

 

 

 

 

簡単にリストを作る

HTML リストは、自由にリスト作成ができます。使えば使うほど驚くような機能に気がつきます。既存のコンテンツにリストを追加する時、うまくいかない時があるかと思います。上の例では、デフォルトを作る必要がない事を証明しています。  CSSやJavaScriptを少し使うだけで、面白く読みやすいリストが出来ます。

おすすめ新着記事

おすすめタグ

このページのTOPへ