Amazonパソコン・周辺機器の売れ筋ランキング >>

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

【PR】当サイトでは広告を含みますが、感じたままを正直にお伝えしています
  • URLをコピーしました!

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

基本、画像を使わずにHTML・CSSのみで装飾できる記事です。

さかぽん

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

その他の記事まとめは、こちらからどうぞ。

【HTML・CSS】コピペで簡単!記事まとめ

目次

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


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

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

製作会社ということもあり、Webデザインで使えそうなニュース表示やボタンなどのリストデザインも豊富!

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


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

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

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


リストのマークのみ色を順番に変える方法【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本

created by Rinker
¥2,750 (2024/10/11 22:30:56時点 Amazon調べ-詳細)

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

ノンデザイナーから楽しく学ぶ「デイトラ」

デイトラは私が2コース受けたぐらい、楽しく学べる業界最安級のWebスキル特化型オンラインスクール。

さかぽん

1年間質問し放題で好きなタイミングで学べて、ずっと閲覧可能で、過去受講した内容も最新に更新されていくのが良いんですよね〜

Web制作コースではコーディング力が身につくので、コピペしてもうまくいかない!という悩みからおさらばできるはず!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次