デザイン

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

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

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

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



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


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

Web制作会社ならではの、プロスタイルのリストデザイン。どんなサイトにも合いそうな洗練されたリストデザインが揃っています。

製作会社ということもあり、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デザインの説明もあり、便利なので重宝してます。

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

関連コンテンツ(広告含む)

  • この記事を書いた人
アバター

さかぽん

いろいろ聞かれることが多いので、「参考にどうぞ」と知人に情報を送る目的で書いていることが多いブログを運営。Web系なので(?)Webの情報に疑い深く、知識や検証を記録に残してたら10万PV突破。ひっそりしていたいタイプなので、”ナニコレコワイ”とビビっている日々。

-デザイン

Copyright© まちのWeb屋さかぽんの雑記ブログ-MIYAZAKI LIFE , 2019 All Rights Reserved.