【リストデザインのコーディング①】 Webサイト制作案件でよく使うサンプルコード

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

HTML、CSSでリストデザインを実装する方法が知りたい
実際のWebサイト制作案件でよく使うリストのコーディング方法が気になる
頻繁に使うリストデザインのコーディングしたデモが見たい

という方のお悩みを解決します！

今回、紹介するリストデザインのサンプルコードは全て僕が実際のWebサイト制作案件で使用してきたものです。

同じようなデザインのコーディングをする時にコピペでサクッと実装できるように自分のスニペット用としても作成しました。

リストデザインのコーディングで躓いている方のお役に立てれば幸いです！

リストデザインのコーディングまとめ
- 左端に矢印アイコンのパターン
- 右端に矢印アイコンのパターン
まとめ

リストデザインのコーディングまとめ

左端に矢印アイコンのパターン

See the Pen
左端に矢印アイコンのパターン by 石森裕也 (@yuyaphotograph)
on CodePen.

HTML

<div class="List">
  <a href="" class="List-Item"><img src="矢印アイコンのURL" class="List-Item-Icon">タイトル</a>
  <a href="" class="List-Item"><img src="矢印アイコンのURL" class="List-Item-Icon">タイトル</a>
  <a href="" class="List-Item"><img src="矢印アイコンのURL" class="List-Item-Icon">タイトル</a>
</div>

CSS

.List {
  margin-top: 16px;
  padding-left: 7px;
}
.List-Item {
  position: relative;
  padding-left: 16px;
  display: block;
  text-decoration: none;
  color: #000;
  font-size: 16px;
  transition: 0.4s;
}
.List-Item:hover {
  color: #5bc8ac;
  transition: 0.4s;
}
.List-Item:nth-child(n+2) {
  margin-top: 25px;
}
.List-Item-Icon {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 8px;
}

右端に矢印アイコンのパターン

See the Pen
右端に矢印アイコンのパターン by 石森裕也 (@yuyaphotograph)
on CodePen.

HTML

<div class="List">
  <a href="" class="List-Item"><img src="https://yuyauver98.me/develop-html/blog-demo/img/arrow-right.svg" class="List-Item-Icon">タイトル</a>
  <a href="" class="List-Item"><img src="https://yuyauver98.me/develop-html/blog-demo/img/arrow-right.svg" class="List-Item-Icon">タイトル</a>
  <a href="" class="List-Item"><img src="https://yuyauver98.me/develop-html/blog-demo/img/arrow-right.svg" class="List-Item-Icon">タイトル</a>
</div>

CSS

.List {
  margin-top: 16px;
  max-width: 160px;/*よしなに*/
}
.List-Item {
  position: relative;
  display: block;
  text-decoration: none;
  color: #000;
  font-size: 16px;
  transition: 0.4s;
}
.List-Item:hover {
  color: #5bc8ac;
  transition: 0.4s;
}
.List-Item:nth-child(n+2) {
  margin-top: 25px;
}
.List-Item-Icon {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 8px;
}

まとめ

以上、実務でよく使われるリストデザインコーディングのサンプルコードを紹介しました。

コーポレートサイトの制作案件をする際にきっと役立つスキルとなりますので徐々に覚えていきましょう〜！

コーディングスキルアップシリーズはこちら！