htmlとcssでドーナツショップのメニューを作ろう

htmlとcssでドーナツショップのメニューを作成してみよう。今人気のカードタイプのデザイン作り方を紹介する。

配色を考える

ウェブサイト作成をするときは２パターンある、デザイナーさんからデザインを渡されてそれを忠実に再現するパターンと、デザインからお願いされる場合だ。
後者の場合に役立つ配色ツールを紹介しよう。

Random Material Palette Generator - THREEB

Your material palette just with a click! #RandomMaterialPalette

クリックを繰り返すだけで次々と配色を提案してもらえる。今回は右側にあるカードタイプを選択したのちお気に入りの配色を探した。今回制作にあたり、お手本どおりの配色でもよいが、ここで見つけたお気に入りの配色にするのも面白いだろう。

準備

素材ダウンロード

では配色も決まったので実際に準備をしていこう。まずは今回使うドーナツの写真を以下からダウンロードする。

images.zip

1 ファイル 290.75 KB

ダウンロード

プロジェクトフォルダ作成

プロジェクトフォルダを作成しよう。デスクトップにdonutshopを作成し、その中にcssフォルダ、imagesフォルダを作成する。最終的にフォルダは以下のような状態になる。

作成

では実際に作っていこう。まずはindex.htmlを以下のように作成する

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Donut Menu</title>
  <link rel="stylesheet" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
  <link rel="stylesheet" href="css/main.css"/>
</head>
<body>
  <div id="wrapper">
    <h1>Donut Menu</h1>
    <div id="menu">
      <div>
        <img src="images/dn1.jpg">
        <p>ポン・デ・リング</p>
        <p>110円</p>
      </div>
      <div>
        <img src="images/dn2.jpg">
        <p>ポン・デ・黒糖</p>
        <p>110円</p>
      </div>
      <div>
        <img src="images/dn3.jpg">
        <p>ポン・デ・ストロベリー</p>
        <p>130円</p>
      </div>
      <div>
        <img src="images/dn4.jpg">
        <p>オールドファッション</p>
        <p>110円</p>
      </div>
      <div>
        <img src="images/dn5.jpg">
        <p>オールドファッションハニー</p>
        <p>130円</p>
      </div>
      <div>
        <img src="images/dn6.jpg">
        <p>フレンチクルーラー</p>
        <p>110円</p>
      </div>
      <div>
        <img src="images/dn7.jpg">
        <p>ストロベリー<br>カスタードフレンチ</p>
        <p>140円</p>
      </div>
    </div>
  </div>
</body>
</html>

続いてmain.cssを以下のように作成し、cssフォルダに入れる。

body{
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
  color:#444;

}
#wrapper{
  background:#78909C;
  padding:5vh 0;
  min-height:100vh;
}
h1{
  text-align: center;
  color:#B9F6CA;
  font-size:2rem;
  margin-bottom:2vh;
}
#menu{
  width:80%;
  margin:auto;
  display:grid;
  gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
#menu>div{
  background:#FFF8E1;
  box-shadow: 2px 2px 2px 2px #efefef;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}
#menu>div>p{
  padding:1vh 2vh;
  text-align: center;
}
#menu>div>p:last-child{
  border-top:3px dotted #efefef;
  text-align: right;
}
#menu>div>img{
  width:100%;
}

css gridを利用し、今回は画面が小さい端末で見た時に列が３列から２列、１列と自動的に調整させる設定をしている。(css gridの詳しい解説はこの記事)