WebデザインにおけるHTMLリストの見事な使用

あなたはインターネットの至る所によくデザインされたリストを見つけることができます。デザイナーは何十年もの間それらを使用しています ページ情報とレイアウトの調整, 今日のWebでは、Webデザイナーがリストをどのように使用しているかについて、優れた創造性を見ることができます。これらには、ナビゲーションメニュー、プロフィールリンク、アーカイブ、タスク/チェックリスト、その他多数の用途があります。!

この記事では、さまざまな種類のHTMLリスト、それらを設計するためのヒント、特にその方法について紹介します。 あなたのリストにユニークなエッジを追加する. また、素晴らしいリストデザインのWebサイトの例をいくつか紹介します。最終的には、うまく設計されたHTMLリストのWebサイトのリストが表示されます。見た目のシンプルなリストをユニークに見せる方法についてはもう疑いはありません。今日からそれらを最大限に活用しましょう。!

リスト要素

Webデザイナーは絶え間なく変化し続けているため、時間の経過とともにWebサイトのスタイルが変化していますが、リストは時の試練に耐え、World Wide Webの将来の技術革新にはまさに役立つ可能性があります。.

例をチェックアウトする前に、HTMLリストをいくつか取り上げたいと思います。あなたがあなた自身の設計作業で利用できるリストのいくつかの異なる種類があります。 Webデザイナーの大多数はに焦点を当てています 番号なしリスト で開かれている

tag、しかしそれほど人気のない他の2つのバリエーションもあります。 順序付きリスト そして データ定義. 私は以下にさらに詳細に入りました.

番号なしリスト（

）

おそらくHTML4 / HTML5標準で最も使用されている要素の一つです。番号なしリストは、番号付きリストと同じ方法でデータを出力しますが、 横に数字のマーカーが見えない. 代わりに各アイテムには 小さな円またはディスク そして新しい行に分割した。このアイコン list-style-typeプロパティでも変更できます CSSで見つかりました.

以下は、番号なしリストのコード例です。

 
 
項目1
 
項目2
 
項目3
 
 

番号なしリストは構築のための完璧な救済策です ナビゲーションリンク. 簡単にできるので リスト項目内にリスト全体をネストする それは サブナビゲーションリンクを作成するのは簡単なこと 同様に。リストスタイルを削除すると、空白のitem要素が残ります。ここから、アンカーリンクをページのブロック要素として表示するようにスタイル設定することができます。これにより、ナビゲーションメニューのデザインに必要な情報を入力できます。また、jQueryコードを使用してサイトの美しいヘッダーをまとめることができます。.

最も一般的には、Web記事またはインストール手順の途中に番号なしのリストがあります。それに注意してください グーグルと他の検索ボットはあなたのページコンテンツを全く別の方法で処理しない, だからあなたの どのリスティングタイプを選択してもSEOは影響を受けません.

順序付きリスト（

）

一連のデータを注文する必要がある場合は、最初から独自のレ​​イアウトフレームワークを設定することが可能ですが、この方法では、増分する各番号を手動で追加する必要があるため、面倒です。順序付きリストはに最適です。 番号付きタスクを整列させる ねじ込みなしで。内部リストアイテムの順序（

• ）データの表示方法を決定します.

  以下は、順序付きリストのコード例です。

   
   
  項目1
   
  項目2
   
  項目3
   
   

  それはまた可能です カウンターを通常の数から他の少数のオプションに変更します。. これらは含まれています アルファベット文字 そして ローマ数字, いくつか挙げると。 Webデザイナーは、コンテンツ固有のリストに順序付きリストを使用します。. レシピデータ, 毎日の仕事, お気に入り, または トップ/最近ログインしたユーザー ほんの数例です。よく見かけるでしょう ブログのコメント 番号付きの順序で各コメントを保持するために番号付きリストを使用して構築された.

  データ定義リスト（

  ）

  定義リストは、あまり頻繁には見られません（これまでに人気があったわけではありません）。 Webデザイナーが複雑な形式のリンクやボックスコンテンツを作成するときに見られました。の データリストタグ（

  ） 今日のコーダーはよく誤解しています。 HTML4.01仕様ではデータリストは 項目とその説明を組み合わせる. これらは定義リストと呼ばれていました.

  データ定義リストのコード例を以下に示します。

   
   
  項目1
   
  説明
   
  項目2
   
  説明
   
  項目3
   
  説明
   
   

  ただし、新しいHTML 5仕様では、データリストに転記があります。要素の使い方に構文上の違いはありませんが、その目的は次のように更新されました。 1つ以上のデータ用語からなる記述リスト（

  ）1つ以上のデータ定義（

  ）.

  HTML5 Doctorの記事からの強力な例は、 メタデータフォーマットリスト. シングルシングル DL リスト要素 用語を定義する, あなたの名前のような 定義タグはデータを記述できます あなたについて、おそらくあなたの年齢、職業、現在の町/市など。 キーと値のペアを持つデータの任意のセットは、説明リストにうまく収まります。. リストには複数のデータ用語を使用できますが、W3Cでは次のように述べられています。 各用語は一意であるべきです リスト内.

  3つの一般的なリストスタイルを特定したので、いくつかの例に進みましょう。近年、Webデザイナーは自分のリストを使って非常にクリエイティブになりました。私は、リストの創造的な使い方に特に焦点を当てて、以下の私のお気に入りのWebサイトを7つカタログ化しました。.

  単純な番号なしリストのナビゲーション

  ナビゲーションメニューは、最新のCSS技術を使って構築するのがはるかに簡単です。これが、番号なしリスト、さらには番号付きリストが一般的な選択肢になった理由です。私のお気に入りの例の1つが、ソーシャルメディアブログMashableに掲載されています。.

  

  ヘッダーの上部に向かって、主に2つのリンクセットがあります。そのロゴのすぐ上には、Top Stories、Trending Topics、Peopleなどのコミュニティリンクを含む、番号なしの小さなリストがあります。デザイナーはしっかりした背景と配色を特徴とするなめらかなホバースタイルを作成しました.

  その直下にはサブナビゲーションリンクがあります。このナビゲーションメニューは、ソーシャルメディアやTechなどのブログカテゴリにつながります。順不同リストは両方とも、 HTML5