目を引くリストを作成するためのCSS

• 四月 29, 2024

リストは、エンドユーザーが簡単に読むことができるため、優れたWebデザイン要素です。ほとんどのユーザーはすぐに回答を求めており、最初にWebサイトをざっと読んで質問に回答するかどうかを確認します。これは、検索エンジンを介してWebサイトにアクセスする場合に特に当てはまります。

見出しタグとリストを使用すると、Webサイトの主要なコンテンツを簡単に見ることができます。リストや小見出しが興味深いと感じた場合、あなたのサイトに残る可能性が高くなります。もちろん、これは「バウンス」率の低下につながり、エンジンでのWebサイトの信頼性とランキングの向上に役立ちます。読みやすさを改善し、目がスキミングしやすくなるものは、常にWebサイトに役立ちます。優れたデザインは常に読みやすさを念頭に置いています。

CSSは、カスタムの箇条書き（マーカー）を使用してスタイリッシュなリストを作成するための簡単で非常に効果的な方法です。 Webサイトのロゴ、色、またはテーマに結び付けるさまざまな形状またはシンプルなカスタムグラフィックを含めることができます。たとえば、ゴーストツアーのWebサイトで、サイドナビゲーションバーとメインページの順序付けられていないリストアイテムで使用される小さなゴーストアイコンを作成しました。シンプルでしたが、非常にキュートで、サイトのテーマに結び付けられていて、これらのページ要素が際立っていました。

また、箇条書きは、リスト内の重要なコンテンツから注意をそらす可能性があります。その場合、「なし」のリストスタイルプロパティを使用して、自動生成されたマーカーを削除できます。

リストスタイルのプロパティ

list-style-typeプロパティを使用して、各リスト項目に表示されるマーカーのタイプを選択します。使用可能な値は、ディスク、円、四角、小数、ローマンローマ、アッパーローマ、ローワーギリシャ語、ロワーラテン、アッパーラテン、ロワーアルファ、アッパーアルファ、およびなしです。

独自の画像をマーカーとして指定するには、次のようにlist-style-imageプロパティを使用します。

ul {list-style-image：url（imagename.jpg）;
list-style-position：外;
}

URLはスタイルシートに関連しており、画像があるフォルダーを指す必要があります。この場合、画像はcssおよびhtmlファイルと同じフォルダーにあります。画像を別のフォルダーに配置する場合は、それも含めます：url（images / imagename.jpg）

マーカーの位置

マーカーの位置をカスタマイズすることもできます。上記の例では、outsideプロパティにより、箇条書きがコンテンツ領域の外側に表示されます。
list-style-position：insideは、コンテンツ領域内の箇条書きを許可し、リストコンテンツに実行します。

速記法

CSSを使用してリストをフォーマットするもう1つの簡単な方法は、速記法です。このメソッドでは、すべてのリストプロパティが1つのプロパティで指定されます。

ul
{
リストスタイル：サークルurl（ "image.gif"）;
}

略記法では、すべての値は次のように指定された順序で出現する必要があります。

リストスタイルタイプ
list-style-position（内側、外側）
リストスタイル画像

他の値の順序が正しい限り、値をスキップしてもかまいません。

カスタムリストは非常に便利で、CSSを使用すると簡単に作成できます。シンプルな詳細により、平均的なWebサイトが最高のパフォーマンスを発揮するWebサイトに変わります。

動画の説明: Data Driven Templates for Display & Video 360 Ad Canvas - Google Web Designer (四月 2024).