2024.01.03CSSを使って、おしゃれなリストを作成しているWebサイトがありますよね。ul要素の基本的なデザインでは、物足りないと感じる方も多いのではないでしょうか?今回は、普段とは違うリストを作成したいという方のために、コピペで簡単に作れるサンプルを用意しました。気に入ったものを利用して、オリジナルのリストを作成してみてください。オシャレなリストを作る上で必須知識となる、CSSのlist-styleプロパティについても説明しています。最後まで読んでくださいね。公式HP公式HP公式HPul要素を使ったリストの作り方そもそも、リストとはどのように作成するのでしょうか?リストにはul要素を使ったものと、ol要素を使ったものがあります。今回は、ul要素のリストについて紹介していきますね。<li>リスト3</li></ul>リストは、上記のように、ul要素と子要素のli要素によって構成されます。ul要素は順序のないリスト作成に使われ、各項目の頭に黒いポチがつきます。対して、ol要素は順序ありのリスト作成に使用され、各項目の頭には番号が振られます。ul要素のリストは順番を変えても問題ないものに、ol要素のリストは順番を変えると間違いになるものに、という考えで使い分けましょう。CSSのlist-styleプロパティについてCSSのサンプルを紹介する前に、リスト作成で重要となる、CSSのlist-styleプロパティについて紹介します。list-styleプロパティは、リストの先頭にあるマークについて一括指定することができます。指定するものは、list-style-typelist-style-imagelist-style-positionの3つですね。list-style-typeプロパティでは、丸や四角など、リストマークの種類を指定できます。list-style-imageプロパティでは、指定した画像をマークとして使用できるようになります。list-style-positionプロパティでマークの位置を指定します。値は「inside」と「outside」の2つで、insideの場合は要素の中に配置され、outsideの場合は要素の外に配置されます。これら3つをlist-styleプロパティで、下記のようにまとめて記述できます。outside;}list-style-imageとlist-style-typeの両方の指定があった場合、画像が優先され、画像が使用できない場合に、list-style-typeが適用されます。以前には、ul要素にtype属性というものがあり、そこでリストマークの種類が指定できました。HTML5では、ul要素のtype属性は廃止されていますので、CSSでリストマークの指定を行いましょう。HTMLとCSSで作るリストのサンプルデザインそれでは、コピペで使えるリストデザインを紹介していきます。HTMLは以下の共通コードを使用します。各項目では、CSSを使って説明していきますね。<li>リスト4</li></ul>HTMLとCSSのみで簡単に作れるので、Webサイトのデザインに合わせて、カスタマイズも試してみてください。シンプルなリスト最初はシンプルで簡単に作れるリストを紹介します。600;}リストマークを四角(square)に指定しました。背景を灰色にして、borderで枠を作っています。他のデザインを崩さないような落ち着いたリストを作成したいときにおすすめです。背景色や文字の大きさなどを色々変えて試してみてください。枠線をドットにしたり、上下のみの線にしたりしても良いですね。600;}先ほどのリストの背景色を変え、角を丸くしてみました。影を付けることで、浮き出て見えますね。こちらも落ち着いたデザインですが、目を引くようになったのではないでしょうか。dashed」で破線を入れることで、内側に縫ったような柄を入れました。可愛らしい雰囲気のリストを作成したいときに使ってみてください。項目が分かれているリスト続いて、ページの目次やメニューに使えそうなリストを紹介します。リスト項目が1つ1つ分かれているところが特徴です。#ffbb99;}リストマークを削除し、色違いの丸を重ねて配置しました。シンプルですが、少しおしゃれにできます。好きな色で試してみてください。3px;}こちらもリストマークを削除しています。各項目の左端に緑色の線を入れて付箋のようなデザインにしました。項目の下には灰色の線を入れて立体的にしています。#66ccff;}リストマークを削除し、白丸を作成して先頭につけました。35px;」で挿入しています。最後にマウスをホバーさせたときに背景色が変わるように設定しました。リストの中身がリンクになっているときなどに利用できるかと思います。Awesome」アイコンを使ったリストリストマークの代わりにアイコンを使ってリストを作成する方法を紹介します。Awesome」というWebサービスを利用することで、簡単にページ内にアイコンを入れることができます。Awesome」の導入の仕方は、以下の記事が分かりやすいです。7px;}リストの先頭のマークを削除し、三角のアイコンを加えました。それ以外はシンプルな作りのリストです。落ち着いたデザインのサイトに使用してみてください。#fff;}アイコンの背景を濃い色で塗りつぶして、分かりやすくしています。目的にあったアイコンを探してみてくださいね。7px;}ボックスのリストの上に、「LIST」の見出しを付けました。箇条書きのリストにタイトルを付けたいときなどに使えますね。項目ごとの区切りを分かりやすくするために、間には破線を付けています。7px;}周囲の枠に「POINT」という見出しが被さるようなデザインにしました。リストの先頭だけでなく、見出しの横にもアイコンがついています。アイコンや枠線の色を変えて、色々と試してみてください。まとめ:普段と違うリストに挑戦してみよう今回の記事では、コピペで簡単に作れるリストのサンプルコードを紹介してきました。サンプルをそのまま使うだけでなく、配置や色を変えて、自分だけのリスト作成に挑戦してみても良いかもしれませんね。実際に手を動かしてみることで、CSSをより深く理解できるようになるはずです。いつもと違うリストを作成したいときなどに、今回の記事が参考になれば幸いです。WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。資料をダウンロードするIT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。資料をダウンロードする働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。ペースでエンジニア転職を目指す。