【漫画】フリーランスは“103万円の壁”にどう向き合うか?
- お金
- フリーランス/個人事業主
- 漫画
HTMLでリストを作るための<ul>や<ol>といったタグは、Webデザインの世界では大昔から存在し、今でも使われ続けています。
こうしたリストは凡庸に思われがちですが、才能あるWebデザイナーの手にかかればユニークな作品に仕上げることも可能です。
今回はWebデザイナーが、工夫を凝らして作ったクリエイティブなリストを8つ、おまけつきでご紹介します。
目次
See the Pen Gradient Ordered List by Erin E. Sullivan (@erinesullivan) on CodePen.
長いリストにおける課題は、なんといっても各項目を目立たせることです。この例では、太字のフォントとグラデーションをつけた背景によって、リストが美しく彩られています。
またCSSのbox-shadowで、リストに深みをつけているところもポイントです。魅力的で読みやすいデザインですね。
See the Pen Responsive Comma List by John Graham (@RobotsPlay) on CodePen.
Webページを延々とスクロールするのが好きな人もいますが、一般的にはコンパクトにまとまった情報が好まれます。
この例では、PCなどの大きな画面では何列かに分かれたリストが表示されますが、モバイルデバイスではコンマで区切られたデザインに変化します。
See the Pen custom ordered list bullets by Dimitri Denis (@dimilo) on CodePen.
リストの種類ごとにデザインを変えるのが面倒なら、この例を参考にしてみましょう。
さまざまな種類のリストに、統一感のあるモノクロのデザインを採用しています。幅広く活用できそうな、スタイリッシュなデザインです。
See the Pen 3D List expansion by Andrew Canham (@candroo) on CodePen.
ここまでにご紹介した例はシンプルなものが多かったですが、こちらは豪華なアニメーションのついた、目をひくデザインです。
SVGとJavaScriptを組み合わせて、リストをスムーズに動かしています。プレゼンテーションや、ランディングページにも応用できそうですね。
See the Pen Simple timeline from an unordered list by Lazy Jones (@lazy) on CodePen.
Webデザインをしていると、ついついプロセスを複雑にしてしまいがちです。しかし、タイムラインには派手なスクリプトは必要ありません。
基本的なタイムラインに必要なのは、シンプルな番号なしリストだけ。さらにCSSの疑似要素を使って線を追加すれば、全体を結び付けられます。
See the Pen Resetting list counters by Mark (@xmark) on CodePen.
場合によってリストは、階層化が必要になることもあります。
この例ではCSSのcounter-resetを使って、リストを階層化しているようです。4階層まで対応しています。
See the Pen Styled List Counters by Chris Coyier (@chriscoyier) on CodePen.
こちらもさきほどの例とおなじく、階層化機能をそなえたリストです。
CSSを使って数字の背景色を変化させているため、ひと目で階層を見分けられます。
See the Pen Ridiculously responsive lists with CSS Grid by Raúl R Pearson (@raulrpearson) on CodePen.
レスポンシブなリストを作りたいなら、CSS Gridを使うのがおすすめ。
大きな画面ではリストが複数の列に分割され、小さな画面ではひとつの列に折りたたまれます。
See the Pen list style – Ol and ul style by WILDER TAYPE (@wilder_taype) on CodePen.
CSSには、じつはさまざまな種類のリストが標準で用意されています。こうしたリストを一覧で見てみたいなら、このスニペットが参考になるはず。
従来の箇条書きだけでなく、画像やFont Awesomeのアイコンも使用されています。
HTMLリストはWebデザインに不可欠な存在ですが、おしゃれさとは無縁だと思われがちです。
リストを使う際には、ほんの少しCSSやJavaScriptを使ってみましょう。工夫次第で、スタイリッシュなリストを実装できますよ。
(原文:Eric Karkovack 翻訳:Nakajima Asuka)
今風に作られたスライド式サイドバーのコードスニペット9選
Workship MAGAZINE
WordPressの無料プラグイン『uListing』で、一覧ページの作成&管理をカンタンに!
Workship MAGAZINE
あなたのWordPress、散らかってない?片付け4STEPとおすすめプラグイン
Workship MAGAZINE