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

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

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

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

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

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

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

パネルデザインのコーディングまとめ
- タイトルと矢印アイコンのパターン
- タイトル、画像、矢印アイコンのパターン
まとめ

パネルデザインのコーディングまとめ

タイトルと矢印アイコンのパターン

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

HTML

<p class="Headline">タイトル<img src="アイコンのURL" class="Headline-Icon" alt=""></p>

CSS

.Headline {
  border: 2px solid #5bc8ac;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 260px;
  height: 48px;
  background: #fff;
  font-weight: bold;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Headline {
    width: 100%;
  }
}
.Headline-Icon {
  margin-left: 8px;
  width: 14px;
}

タイトル、画像、矢印アイコンのパターン

See the Pen
タイトル、画像、矢印アイコンのパターン by 石森裕也 (@yuyaphotograph)
on CodePen.

HTML

<div class="Panel">
  <a href="" class="Panel-Item">
    <img src="画像のURL" class="Panel-Item-Bg">
    <p class="Panel-Item-Title">サブ<span class="Panel-Item-Title-Span">タイトル</span></p>
    <img src="矢印アイコンのURL" class="Panel-Item-Icon">
  </a>
</div>

CSS

.Panel{
  width: 100%;
  max-width: 320px;
}
.Panel-Item {
  position: relative;
  border: 2px solid #5bc8ac;
  padding-right: 88px;
  width: 100%;
  height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
@media screen and (max-width: 480px) {
  .Panel-Item {
    padding-right: 64px;
    height: 80px;
  }
}
.Panel-Item-Bg {
  position: absolute;
  left: -64px;
  top: -54px;
  width: 236px;
}
@media screen and (max-width: 480px) {
  .Panel-Item-Bg {
    top: -38px;
    left: -48px;
    width: 158px;
  }
}
.Panel-Item-Title {
  font-weight: bold;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Panel-Item-Title {
    font-size: 16px;
  }
}
.Panel-Item-Title-Span {
  margin-left: 6px;
  font-size: 22px;
}
@media screen and (max-width: 480px) {
  .Panel-Item-Title-Span {
    font-size: 20px;
  }
}
.Panel-Item-Icon {
  position: absolute;
  top: 50%;
  right: 30px;
  width: 24px;
  transform: translateY(-50%);
}
@media screen and (max-width: 480px) {
  .Panel-Item-Icon {
    right: 20px;
  }
}

まとめ

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

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

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