宮崎暮らしの視点から、徒然なるままに。

Miyazaki Life

デザイン

【HTML・CSS】コピペで簡単!リストデザイン記事まとめ

更新日:

OL、UL、DLといったリストタグを装飾したいときに参考にしているサイト・記事を、”あのデザインどこにあったっけ?”という備忘録代わりに、精査しながらまとめています。基本、画像を使わずにHTML・CSSのみで装飾できる記事です。

ノンデザイナーがWebデザインをすることになった際に、大変助かるありがたいサイトばかりです。

その他の記事まとめは、こちらからどうぞ。
【HTML・CSS】コピペで簡単!記事まとめ

スポンサーリンク

Web制作会社のリストデザイン


リスト | Maromaroスタイルレシピ | Maromaro Blog

Web制作会社ならではの、プロスタイルのリストデザイン。どんなサイトにも合いそうな洗練されたリストデザインが揃っています。随時、追加されていくみたいなので、見るたびに新しい発見がありそう。

応用しやすいリストデザイン


Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える | Webクリエイターボックス

色を変えたり、フォントを変えたり。ちょっとした工夫でリストデザインもおしゃれに。

シンプルで使いやすいリストデザイン


画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10/NxWorld

文章内で使いやすいシンプルなデザイン。ランキングのリストデザインもあります。

シンプルでおしゃれなリストデザイン


CSSで作るリストデザイン/Web’Notes

チェックマークや矢印といった、文章内で使いやすいシンプルなリストデザインが揃ってます。

アクセントをつけるリストデザイン


リストのマークのみ色を順番に変える方法【CSSデザインサンプル】/第0版

リストマークのカラーを、2つごとや3つごに変更することのできる、リストデザインです。カラフルで可愛い!

枠付きのリストデザイン


コピペで使えるリストデザイン例34選:CSSでおしゃれな箇条書きを作ろう/サルワカ

ボックスで囲まれているタイプのリストデザインなので、メニューリストや、ポイントとして情報をまとめる際につかいやすいリストデザインです。タブつき、吹き出しつきなどリストデザインにこだわりたいときに。ULだけでなくOLタグのデザインも充実しています。

おしゃれなリストデザイン


CSSで作るリストデザイン38選!オシャレな箇条書きを実現/なんでも情報館LOW SALARY

おしゃれなだけでなく、マウスホバーで動きがあったり、さまざまなリストデザインが満載です!

dl dt ddを使ったCSSデザイン

dl要素を美しくデザイン


[CSS]dl要素を美しくデザインするスタイルシートのまとめ | コリス

dl要素でこんなに美しくデザインできるのね・・・と、とても参考になります!

説明つきのリストデザイン


定義リストDLを装飾するレスポンシブOKなCSSデザイン5種/おち研

用語集や注意書きなど、何かを説明するときに便利な、定義リストのデザイン。これからのデザインは「レスポンシブで崩れない」というのがポイントですね。

日付入りの新着情報に使えるリストデザイン


dt要素やdd要素を横並びにする|クロノドライブ

dl要素の横並びは新着情報のデザインによく使います。

レスポンシブなdl表


レスポンシブにはtableではなく、dlを使おう/ogu-tec

表をdlで作るときに、レスポンシブにする方法です。tableをdlに置き換える方法で説明があります。

さかぽん
”どのサイトにどんなリストデザインがあったっけ?”というのを、自分用にわかりやすくまとめたメモ記事です。実際にコピペで実装しながら、紹介するサイトは変わっていくと思います!

ノンデザイナーにおすすめのCSS本
「あのデザインはどう作るんだろう?」が目的別に整理されていて、ネットで何度も調べる手間が省ける1冊。レスポンシブWebデザインの説明もあり、便利なので重宝してます。

-デザイン

Copyright© Miyazaki Life , 2018 All Rights Reserved.