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

【リストデザインのコーディング①】 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;
}

まとめ

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

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

 

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です