この記事はレコチョク Advent Calendar 2022の6日目の記事となります。

はじめに

はじめまして！ 音楽とお笑いとラーメンが主食の新卒1年目エンジニアの石田と申します。 好きなアーティストはたくさんいますが1つに絞るのなら、UNISON SQUARE GARDENが好きです。 ファン歴は8年目に突入しました。

現在は弊社の採用サイト画面を作るお仕事をしています。 学生の頃はプログラミングという文化に触れてこなかったので、日々勉強の毎日です。

さて、今回は12/5の記事から始まった企画について書かせていただきました！ 企画内容については 前回記事をご参照ください！

伝えられた内容

下記は、1人目からページのデザインについて口頭で伝えられたもののメモになります。 情報を聞き逃さないよう必死にタイピングしました。

レコチョクカラーのカラーコード
- #d2006e 

ページは5つの要素で構成されている
- ヘッダー・フッター・バナー・ランキング・ジャンル

ヘッダー・フッターの共通事項
- 背景色#cff2fa
- 使っているロゴの画像は、logo.png

ランキング・ジャンルの共通事項
- 各タイトルの横にレコチョクカラーで横線
- それぞれタイトル、文字サイズ18pxで太字

ヘッダー
- 余白込みで縦幅80px
- 真ん中にロゴ画像
- 縁は16px

フッター
- 縁は16px
- 上下2段に分かれている
  - 上段にはロゴ画像と"「レコチョク」で検索"の文字列がある
    - レコチョクは太字
    - 各要素横並び
  - 下段にｃに丸が付いたものと、recochoku co.,lpd.の文字
    - 文字の大きさ12px

中央にbanner.png
- 横幅800px

ランキング
- 1~5位を横並びで表示
- 各商品ボーダーで囲む
- 順位と画像と曲名(01とかで表示)アーティスト名(01)
- 1-3位は金銀銅色
- 1位と4位だけ左の角っこにnewの文字書いたピンクのリボンっぽいものを付ける

ジャンル
- 横並び
- 200px×200pxの枠内に下記を書く
- J-POP
  - レコチョクカラーと紫
- K-POP
  - レコチョクカラーと赤
- 洋楽ポップス
  - レコチョクカラーと青
- ジャズ
  - レコチョクカラーと黒
- クラシック
  - レコチョクカラーと黄色
- 背景色は全部グラーデーション
  - 上がレコチョクカラーでグラデーション
  - グラデーションの向きは縦

ページ作成

では、上記のメモを元にページを作っていきましょう！ まずはざっくりとHTMLの構成を決めます。

・・・

    <header>
        <img src="img/logo.png" alt="株式会社レコチョク">
    </header>
    <div>
        <img src="img/banner.png" alt="話題の新曲やヒット曲ドラマ主題歌など続々配信中！">
    </div>
    <section>
        <h1>ランキング</h1>
        <ul>
            <li>
                <p>1</p>
                <img src="img/thumbnail01.png" alt="サムネイル1">
                <p>曲名01</p>
                <p>アーティスト名01</p>
            </li>
            <li>
                <p>2</p>
                <img src="img/thumbnail02.png" alt="サムネイル2">
                <p>曲名02</p>
                <p>アーティスト名02</p>
            </li>
            <li>
                <p>3</p>
                <img src="img/thumbnail03.png" alt="サムネイル3">
                <p>曲名03</p>
                <p>アーティスト名03</p>
            </li>
            <li>
                <p>4</p>
                <img src="img/thumbnail04.png" alt="サムネイル4">
                <p>曲名04</p>
                <p>アーティスト名04</p>
            </li>
            <li>
                <p>5</p>
                <img src="img/thumbnail05.png" alt="サムネイル5">
                <p>曲名05</p>
                <p>アーティスト名05</p>
            </li>
        </ul>
    </section>
    <section>
        <h1>ジャンル</h1>
        <ul>
            <li>J-POP</li>
            <li>K-POP</li>
            <li>洋楽ポップス</li>
            <li>ジャズ</li>
            <li>クラシック</li>
        </ul>
    </section>
    <footer>
        <div>
            <img src="img/logo.png" alt="株式会社レコチョク">
            <p>「レコチョク」で検索</p>
        </div>
        <div>
            <small>&copy;recohoku co.,ltd.</small>
        </div>
    </footer>

・・・

バナーやランキング、ジャンルなど項目ごとに sectionタグで区切り、CSSでレイアウトを整える必要がありそうな箇所はdivタグで囲みました。

ここからはひたすらCSSで装飾していきます。

全工程を説明すると日が暮れてしまいそうなので、特に自分が迷った所や躓いた箇所を抜粋してお話ししていきます！

ヘッダーのロゴ画像

• ヘッダー
  • 背景色#cff2fa

  • 使っているロゴの画像は、logo.png

  • 余白込みで縦幅80px

  • 真ん中にロゴ画像

  • 縁は16px

ヘッダーを作る上で困ったことは、ロゴ画像のサイズです。 伝言を聞いている時は、”ヘッダーの縦幅が80pxでロゴ画像が真ん中にあるのか。ふむふむ…”と頭の中でデザインのイメージが出来ていたので、特に疑問を感じませんでした。 しかし、いざコーディングに入ると”あれ、そういえば画像のサイズ聞いてないな…どうしよう”となりました。 ここは感覚になってしまい申し訳ないですが、ヘッダーに収まるサイズで横幅100pxと設定させていただきました。