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

【パネルデザインのコーディング①】 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;
  }
}

まとめ

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

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

 

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

コメントを残す

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