当サイトでは広告を含みますが、感じたままを正直にお伝えしていますOL、UL、DLといったリストタグを装飾したいときに参考にしているサイト・記事を、”あのデザインどこにあったっけ？”という備忘録代わりに、精査しながらまとめています。基本、画像を使わずにHTML・CSSのみで装飾できる記事です。
ノンデザイナーがWebデザインをすることになった際に、大変助かるありがたいサイトばかりです。
その他の記事まとめは、こちらからどうぞ。
Web制作会社のリストデザイン
リスト | Maromaroスタイルレシピ | Maromaro Blog
Web制作会社ならではの、プロスタイルのリストデザイン。どんなサイトにも合いそうな洗練されたリストデザインが揃っています。
製作会社ということもあり、Webデザインで使えそうなニュース表示やボタンなどのリストデザインも豊富！
応用しやすいリストデザイン
Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える | Webクリエイターボックス
色を変えたり、フォントを変えたり。ちょっとした工夫でリストデザインもおしゃれに。
シンプルで使いやすいリストデザイン
画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10／NxWorld
文章内で使いやすいシンプルなデザイン。ランキングのリストデザインもあります。
シンプルでおしゃれなリストデザイン
チェックマークや矢印といった、文章内で使いやすいシンプルなリストデザインが揃ってます。
アクセントをつけるリストデザイン
リストのマークのみ色を順番に変える方法【CSSデザインサンプル】／第0版
リストマークのカラーを、2つごとや3つごに変更することのできる、リストデザインです。カラフルで可愛い！
枠付きのリストデザイン
コピペで使えるリストデザイン例34選：CSSでおしゃれな箇条書きを作ろう／サルワカ
ボックスで囲まれているタイプのリストデザインなので、メニューリストや、ポイントとして情報をまとめる際につかいやすいリストデザインです。タブつき、吹き出しつきなどリストデザインにこだわりたいときに。ULだけでなくOLタグのデザインも充実しています。
おしゃれなリストデザイン
CSSで作るリストデザイン38選！オシャレな箇条書きを実現／なんでも情報館LOW SALARY
おしゃれなだけでなく、マウスホバーで動きがあったり、さまざまなリストデザインが満載です！
dl dt ddを使ったCSSデザイン
dl要素を美しくデザイン
[CSS]dl要素を美しくデザインするスタイルシートのまとめ | コリス
dl要素でこんなに美しくデザインできるのね・・・と、とても参考になります！
説明つきのリストデザイン
定義リストDLを装飾するレスポンシブOKなCSSデザイン5種／おち研
用語集や注意書きなど、何かを説明するときに便利な、定義リストのデザイン。これからのデザインは「レスポンシブで崩れない」というのがポイントですね。
日付入りの新着情報に使えるリストデザイン
dl要素の横並びは新着情報のデザインによく使います。
レスポンシブなdl表
レスポンシブにはtableではなく、dlを使おう／ogu-tec
表をdlで作るときに、レスポンシブにする方法です。tableをdlに置き換える方法で説明があります。
ノンデザイナーにおすすめ情報
ネットでググる情報だけでは物足りなくなった人におすすめです。
ノンデザイナーにおすすめのCSS本
「あのデザインはどう作るんだろう?」が目的別に整理されていて、ネットで何度も調べる手間が省ける1冊。レスポンシブWebデザインの説明もあり、便利なので重宝してます。
コメント