デザイン初学者のためのWeb制作(コーディング編 -FEATURES/MENUセクション編-)
はじめまして。株式会社cajonのフロントエンドエンジニアの吉成です。
WEB制作初学者の方に少しでも力になれればと思い、コーディング教材noteを作成しました。
デザイン編も無料公開中なので興味がある方は是非読んでみてください！
デザイン初学者のためのWeb制作(デザイン編)
無料でコーディングの基礎的なことを学習できるのでprogateを終えたレベルの方にオススメです。
このnoteをオススメする人、オススメしない人
【オススメする人】
● オススメする人
● progateを終えて何をしようか迷っている方
● HTMLの知識はあるけどwebデザインの作り方がわからない方
● webサイトのページ1枚を自力で作り上げたい方
● 有料教材を購入して学習しようとしている方
【オススメしない人】
✖︎ 1からサイトを制作できる方
✖︎ サイト制作について基礎的なことを知っている方
PC（デスクトップ）サイズのコーディングは無料で公開中です。
コーディングの基本的なことについては無料公開している範囲で学習ができます！
まだ準備・header編を読んでいない方はこちらからどうぞ！
デザイン初学者のためのWeb制作(コーディング編 -準備・header-)
※こちらの記事をUPした際にgit hubに上げているimageフォルダを更新しました。最新版をDLしてからコーディングしてください🙇♂️
--------------------------------------
FEATURES セクション
ヘッダーパーツが完成したら次はfeaturesセクションをコーディングしていきましょう！😊
デザインカンプは下記になります。
前回のheaderと同様にまず手を動かす前にデザインを確認します。
今回のレイアウトを分解すると下の図のようになります！
コンテンツの中はテキストとイメージが横並びで1つの塊というイメージです。
塊が3個縦並びにすればこのセクションは完成です👍
このようにレイアウトを分解してみて、自分の中でイメージする癖をつけるようにすることで慣れればデザインカンプを見るだけでコーディングができるようになります😊
コーディングは前回の続きから記述します。
最初にfeaturesセクションのコーディングについてフローを説明するので自分なりにコードを書いてみましょう。わからなければ答えのコードを見てください！
- STEP1
・sectionタグを記述(class名は"features")
・sectionの中に幅を統一する<div class="inner">を記述
・sectionの見出しタイトルを記述
・見出しタイトルの下にサブタイトルを記述
- STEP2
・コンテンツを囲むdivを記述
・divの中にdivを作り、テキスト・イメージの要素を入れる
・コンテンツは3つ作成（1つ目のコンテンツをコピペで使い回す）
- STEP3
・テキストの中にはh2タグ/spanタグ/pタグを使って文章を入力
・イメージの中にはpictureタグを使って優先表示はwebp、表示できない場合にはjpgを表示するように記述
- STEP4
・CSSで見た目を調整
・innerの幅を設定(今回はmax-width:980pxにしてください)
・innerの上下余白を設定（余白は147pxを指定してください）
・sectionタイトルのデザインは下記【見出しの参考】引用サイトを参考
- STEP5
・コンテンツ内の要素（テキストとイメージ）を横並び
・コンテンツ左右にmarginを90px入れる
・テキストとイメージの幅は50%に指定
・テキストの中のスタイルを調整する
・テキストは余白が入っているのでpadding-rightを使って余白を設定
- STEP6
・2番目のコンテンツが左右反対のため:nth-child(even)を使い、display:flexの並びを変更
・padding-rightもpadding-leftに変更
・コンテンツ間は54pxの余白を開ける
・1番目のコンテンツの上余白は100px
・3番目のコンテンツの下余白は0px
【見出しの参考】
引用：https://jajaaan.co.jp/css/css-headline/
両サイドに二重線を参考にsectionタイトルを作ってください。
↓↓↓↓ 答えのコードと重要なポイントを解説 ↓↓↓↓
headerの下に以下のコードを記述していきましょう。
- HTML -
<!-- FEATURES section -->
<section class="features">
<div class="inner">
<h1 class="section-title features-center">FEATURES</h1>
<span class="section-subtitle">コーヒーへのこだわり</span>
<div class="contents">
<div class="content">
<div class="contents-text">
<h2 class="contents-title">COFFEE BRANS</h2>
<span class="contents-subtitle">良質な豆を厳選</span>
<p>「最高のコーヒーを淹れるためには、最高品質の生豆を厳選することが大切」です。</p>
<p>農園から豆を直接買い付け、さらに素材の豆本来の味を生かすためのブレンドに尽力しています。</p>
<p>当店ではブラジル、コロンビア、グアテマラ、スマトラ産の豆を使用しておりバランスの良い深みと、口の中に広がる後味が特徴です。</p>
</div>
<div class="contents-img">
<picture>
<source srcset="./image/contents-image01.webp" type="image/webp">
<img src="./image/contents-image01.jpg" class="features-img" alt="良質な豆" loading="lazy">
</picture>
</div>
</div>
</div>
</div>
</section>
<!-- FEATURES section -->タイトルとコンテンツ1番目までの記述となります。
＊-----補足説明------＊
sectionタグの下にある<div class="inner">は幅を統一するための記述となります。
コンテンツの幅を統一しないとレイアウトがバラバラとなり綺麗に整頓されていないレイアウトになってしまうのでinnerの幅をあらかじめ決めておきましょう！💻
一度ここまでHTMLを記述し、CSSで見た目を整えていきましょう。
各セクションで共通する部分は共通パーツとしてまとめておきましょう。
- CSS -
/* --- section 共通CSS --- */
.inner {
height: 100%;
margin: 0 auto;
max-width: 980px;
padding: 147px 0;
width: 100%;
}
.section-title {
color: #1d1d1d;
display: inline-block;
font-family: "CopperplateGothic", serif;
font-size: 48px;
margin: 0;
position: relative;
text-align: center;
}
.section-title:before, .section-title:after {
border-bottom: solid 1px #1d1d1d;
border-top: solid 3px #1d1d1d;
content: "";
height: 12px;
position: absolute;
top: calc(50% - 3px);
width: 25%;
}
.section-title:before {
left: 0;
}
.section-title:after {
right: 0;
}
.section-subtitle {
color: #404040;
display: block;
font-size: 14px;
margin: 14px auto 0;
text-align: center;
}上記CSSを記述するとタイトル部分はひとまず完成です。
＊-----補足説明------＊
今回使用したcalc関数について説明します。
calc関数というのは簡単に言うと、値を計算するものと覚えてください。
例えば、横幅が1000pxに対してmax-width: calc(100% - 50px);を入力したとしたらmax-width: 950pxという値が計算されて当てはまるという感じです！
最初のうちはbootstrapなどを使用してコーディングする方が多いですが、慣れてくるとbootstrapは使用せずにコーディングすることが多くなります。
bootstrapなどのフレームワークを使わず自分でコーディングする場合、calc関数を使う機会が多くなるので今のうちに慣れておきましょう😊
引用：https://techacademy.jp/magazine/12774
タイトル部分が完成したらコンテンツを作り込んでいきましょう。
下記CSSを記述してください。
- CSS -
/* --- FEATURES section --- */
.features-center {
padding: 0 345px;
}
.content {
display: flex;
margin: 0 90px 54px;
}
.content:first-child {
margin-top: 100px;
}
.content:last-child {
margin-bottom: 0;
}
.contents-text {
width: 50%;
}
.contents-img {
width: 50%;
}
.features-img {
height: 100%;
object-fit: cover;
width: 100%;
}
.contents-title {
color: #5e342e;
font-family: "CopperplateGothic", serif;
font-size: 32px;
margin-bottom: 5px;
}
.contents-subtitle {
color: #43403b;
display: block;
font-size: 18px;
font-weight: bold;
margin-bottom: 14px;
}
.contents-text p {
color: #302c32;
line-height: 1.6;
}ここまで記述してください。
注意点としてはテキストコンテンツ余白部分が1・3番目は右側、2番目は左側に余白が存在してます。※下記解説画像参照
2番目・3番目コンテンツを作り込んでいくことを想定して先に余白CSSを記述しておきます。
2番目のコンテンツのみ左右反対になっていますが、このような場合はCSSで偶数・奇数を指定する:nth-child(even)、:nth-child(odd)を使います。
下記のCSSを追加してください。
- CSS -
.content:nth-child(odd) .contents-text {
padding-right: 48px;
}
.content:nth-child(even) {
flex-direction: row-reverse;
}
.content:nth-child(even) .contents-text {
padding-left: 48px;
}display: flex;で横並びにしているものを逆の並び順にする場合はflex-directionを使用します。
＊-----補足説明------＊
flexboxを使った要素を好きに並び変える方法も存在します。
詳しく知りたい方は下記参考サイトをご覧ください。
引用：Qiita -flexboxで要素の順番を入れ替える。-
https://qiita.com/YJ2222/items/cd6eebba95350a3b64a5
1番目のコンテンツをコピペして2番目・3番目のコンテンツ大枠を作ってしまいます。テキストの内容と画像のパスを書き換えます。
1番目のcontentの下にコピーして貼り付けます。
注意点としてはcontentを囲んでる<div class="contents">の中に入れるようにしてください。
＊-----補足説明------＊
コンテンツ1つずつCSSをつけて余白を設定しても良いですが、コンテンツが増えたり並びを変更したときにCSSを変更する手間が増えるので可能な限りnth-childを使うようにしましょう！
↓↓↓↓ 完成形のコードは以下になります！ ↓↓↓↓
- HTML - ※FEATURESセクション完成形のコード
<!-- FEATURES section -->
<section class="features">
<div class="inner">
<h1 class="section-title">FEATURES</h1>
<span class="section-subtitle">コーヒーへのこだわり</span>
<div class="contents"><!-- contents START -->
<!-- content 1番目 -->
<div class="content">
<div class="contents-text">
<h2 class="contents-title">COFFEE BRANS</h2>
<span class="contents-subtitle">良質な豆を厳選</span>
<p>「最高のコーヒーを淹れるためには、最高品質の生豆を厳選することが大切」です。</p>
<p>農園から豆を直接買い付け、さらに素材の豆本来の味を生かすためのブレンドに尽力しています。</p>
<p>当店ではブラジル、コロンビア、グアテマラ、スマトラ産の豆を使用しておりバランスの良い深みと、口の中に広がる後味が特徴です。</p>
</div>
<div class="contents-img">
<picture>
<source srcset="./image/contents-image01.webp" type="image/webp">
<img src="./image/contents-image01.jpg" class="features-img" alt="良質な豆" loading="lazy">
</picture>
</div>
</div>
<!-- content 1番目 -->
<!-- content 2番目 -->
<div class="content">
<div class="contents-text">
<h2 class="contents-title">COFFEE BRANS</h2>
<span class="contents-subtitle">良質な豆を厳選</span>
<p>「最高のコーヒーを淹れるためには、最高品質の生豆を厳選することが大切」です。</p>
<p>農園から豆を直接買い付け、さらに素材の豆本来の味を生かすためのブレンドに尽力しています。</p>
<p>当店ではブラジル、コロンビア、グアテマラ、スマトラ産の豆を使用しておりバランスの良い深みと、口の中に広がる後味が特徴です。</p>
</div>
<div class="contents-img">
<picture>
<source srcset="./image/contents-image01.webp" type="image/webp">
<img src="./image/contents-image01.jpg" class="features-img" alt="良質な豆" loading="lazy">
</picture>
</div>
</div>
<!-- content 2番目 -->
<!-- content 3番目 -->
<div class="content">
<div class="contents-text">
<h2 class="contents-title">COFFEE BRANS</h2>
<span class="contents-subtitle">良質な豆を厳選</span>
<p>「最高のコーヒーを淹れるためには、最高品質の生豆を厳選することが大切」です。</p>
<p>農園から豆を直接買い付け、さらに素材の豆本来の味を生かすためのブレンドに尽力しています。</p>
<p>当店ではブラジル、コロンビア、グアテマラ、スマトラ産の豆を使用しておりバランスの良い深みと、口の中に広がる後味が特徴です。</p>
</div>
<div class="contents-img">
<picture>
<source srcset="./image/contents-image01.webp" type="image/webp">
<img src="./image/contents-image01.jpg" class="features-img" alt="良質な豆" loading="lazy">
</picture>
</div>
</div>
<!-- content 3番目 -->
</div><!-- contents END -->
</div>
</section>
<!-- FEATURES section -->
MENU セクション
FEATURESセクションで使いまわせるところを再利用して、メニューパーツを作っていきます！
MENUセクションのデザインカンプをチェックすると以下のような構成です。
まず初めに先ほど作ったタイトル部分をコピーします。（colorを白色にする）
その後、商品画像・商品名・金額がセットになっている部分を作ります。
最後に商品一覧のテキストを作ります。
商品画像・商品名・金額を出してるコンテンツはざっくり説明すると以下の通りです。
- STEP1
・sectionタグを記述(class名は"menu")
・sectionの中に幅を統一する<div class="inner">を記述
・sectionのバックカラーは#43403Bに変更
・sectionを囲う白枠線をoutlineを用いて表示
・sectionの見出しタイトルを記述 ※FEATURESの部分をコピー（colorを白いするためのCSSを記述）
・見出しタイトルの下にサブタイトルを記述 ※FEATURESの部分をコピー（colorを白にするためのCSSを記述）
- STEP2
・商品画像・商品名・金額を囲うdivを作る
・divの中にdivを2つ作り、テキスト・イメージの要素を入れる※pictureタグを使ってwebpを優先表示、webpが表示されないときはjpgを表示させるようにする
- STEP3
・コーヒーカップの画像をdiv(高さ244px・横幅244px)いっぱいに表示、コーヒー豆の画像を右下に配置
・コーヒー豆の画像は高さと幅を114pxにし、角を丸くして正円にする
- STEP4
・コーヒーの種類、カタカナ表記、値段を囲うdivを作る
・divの中にh2タグ（font-sizeは24px、英文フォント、colorは#fff）、pタグ1つ目（font-sizeは14px、colorは#fff）、pタグ2つ目（font-sizeは20px、margin-topは25px、colorは#fff、英文フォント）をそれぞれ配置
- STEP5
・商品画像〜pタグ2つ目を囲ったdivをコピーして合計3つ作る
・画像パスと文字を変更
【position指定の仕方】
引用：https://www.sejuku.net/blog/53016
STEP4の画像を重ねる内容ですが、position指定をする方法はこちらを参考にしてください！
↓↓↓↓ 答えのコードと重要なポイントを解説 ↓↓↓↓
- HTML -
<!-- MENU section -->
<section class="menu">
<div class="inner">
<h1 class="section-menu-title menu-center">FEATURES</h1>
<span class="section-menu-subtitle">コーヒーへのこだわり</span>
<div class="menu-contents"><!-- menu-contents START -->
<!-- content 1番目 -->
<div class="menu-content">
<div class="menu-content-image">
<picture>
<source srcset="./image/menu-contents-image01.webp" type="image/webp">
<img src="./image/menu-contents-image01.jpg" class="menu-img" alt="エスプレッソ" loading="lazy">
</picture>
<picture>
<source srcset="./image/menu-coffee01.webp" type="image/webp">
<img src="./image/menu-coffee01.jpg" class="coffee-img" alt="エスプレッソビーンズ" loading="lazy">
</picture>
</div>
<div class="menu-content-text">
<h2 class="coffee-title">ESPRESSO</h2>
<p class="coffee-subtitle">エスプレッソ</p>
<p class="coffee-price">¥ 490</p>
</div>
</div>
<!-- content 1番目 -->
<!-- content 2番目 -->
<div class="menu-content">
<div class="menu-content-image">
<picture>
<source srcset="./image/menu-contents-image02.webp" type="image/webp">
<img src="./image/menu-contents-image02.jpg" class="menu-img" alt="エスプレッソ" loading="lazy">
</picture>
<picture>
<source srcset="./image/menu-coffee02.webp" type="image/webp">
<img src="./image/menu-coffee02.jpg" class="coffee-img" alt="エスプレッソビーンズ" loading="lazy">
</picture>
</div>
<div class="menu-content-text">
<h2 class="coffee-title">AMERICANO</h2>
<p class="coffee-subtitle">アメリカーノ</p>
<p class="coffee-price">¥ 490</p>
</div>
</div>
<!-- content 2番目 -->
<!-- content 3番目 -->
<div class="menu-content">
<div class="menu-content-image">
<picture>
<source srcset="./image/menu-contents-image03.webp" type="image/webp">
<img src="./image/menu-contents-image03.jpg" class="menu-img" alt="エスプレッソ" loading="lazy">
</picture>
<picture>
<source srcset="./image/menu-coffee03.webp" type="image/webp">
<img src="./image/menu-coffee03.jpg" class="coffee-img" alt="エスプレッソビーンズ" loading="lazy">
</picture>
</div>
<div class="menu-content-text">
<h2 class="coffee-title">MACCHIATO</h2>
<p class="coffee-subtitle">マキアート</p>
<p class="coffee-price">¥ 500</p>
</div>
</div>
<!-- content 3番目 -->
</div><!-- menu-contents END -->
</div>
</section>
<!-- MENU section -->＊-----補足説明------＊
今回実践してる内容くらいのボリュームであればクラス名がそこまで増えないですが、ボリュームが多くなった場合はクラス名が被ってしまうことがあるかと思います。
引用：https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470
クラス名を見るだけで何を意味するのか理解できるクラス名がベストです。
クラス名付与に困った場合はこちらの記事を見てクラスをつけてみてください。
- CSS -
/* --- section 共通CSS --- */
.section-menu-title {
color: #ffffff;
display: inline-block;
font-family: "CopperplateGothic", serif;
font-size: 48px;
margin: 0;
position: relative;
text-align: center;
}
.section-menu-title:before, .section-menu-title:after {
border-bottom: solid 1px #ffffff;
border-top: solid 3px #ffffff;
content: "";
height: 12px;
position: absolute;
top: calc(50% - 3px);
width: 25%;
}
.section-menu-title:before {
left: 0;
}
.section-menu-title:after {
right: 0;
}
/* --- MENU section --- */
section.menu {
background: #43403b;
outline: 5px solid rgb(255, 255, 255);
outline-offset: -11px;
}
.menu-center {
padding: 0 408px;
}
.menu-contents {
display: flex;
margin-top: 100px;
}
.menu-content {
display: flex;
flex-direction: column;
margin-right: 120px;
width: calc(33.33333% - 120px * 2 / 3);
}
.menu-content:nth-child(3n) {
margin-right: 0;
}
.menu-content-image {
height: 244px;
position: relative;
width: 244px;
}
.menu-img {
height: 100%;
object-fit: cover;
width: 100%;
}
.coffee-img {
border-radius: 100px;
bottom: -58px;
height: 115px;
position: absolute;
right: 0;
width: 115px;
}
.menu-content-text {
margin-top: 68px;
}
.coffee-title {
color: #fff;
font-family: "CopperplateGothic", serif;
font-size: 24px;
}
.coffee-subtitle {
color: #fff;
font-size: 14px;
}
.coffee-price {
color: #fff;
font-family: "CopperplateGothic", serif;
font-size: 20px;
margin-top: 25px;
}＊-----補足説明------＊
【outline】
セクションに白い枠をつけるためにoutlineというCSSを使ってます。
outline-offsetプロパティでアウトラインとボーダーの間隔の距離を指定することができるので内側に寄せるために-11pxを指定してます。
【position:relative / position:absolute】
要素を浮かして自由に配置ができるposition: absolute は初めは中々理解できないかと思います。relativeを起点にしてabsoluteに指定した要素の位置を決めてます。
引用：https://saruwakakun.com/html-css/basic/relative-absolute-fixed
こちらに詳しく解説されてます。positionについてよくわからない方はこちらの記事を参考にしてみてください！
次は縦並びのメニューの一覧を作っていきます。
以下の流れでコーディングしてみてください。
- STEP1
・メニューリストを囲うdivを<div class="menu-contents">〜〜〜</div>の下に記述
・divにmargin-top:72pxを設定
・divの中にtableタグを記述
- STEP2
・tableタグの中に<tr>を記述し、その中に<td>を3つ記述
・<td>の幅をcalc関数を用いて3分割にして横並びにする
・<tr>の上下にpaddingを40px作る
- STEP3
・1番目の<td>に<span>を入れてカタカナ表記の商品名を入れる※spanの部分をdisplay:block、font-size:14pxにしてください
・2番目と3番目の<td>にはline-height:46pxにする
・3番目の<td>のみ文字を右寄せ
- STEP4
・<tr>の下側にborderを入れる
・tableタグの上側のみ太めのborderを入れる
＊-----補足説明------＊
tableタグを使うときには<table>・<tr>・<th>・<td>をセットで使います。
<th>は見出しに使うタグですが、使わなくても問題ないので今回は使用してません。
以下を参考にしてコーディングしてみてください！
引用：https://www.sejuku.net/blog/49377
↓↓↓↓ 答えのコードと重要なポイントを解説 ↓↓↓↓
- HTML - ※ <div class="menu-contents">の下に追加してください
<!-- menu-list -->
<div class="menu-list">
<table class="menu-table">
<tr>
<td>CAPPUCCINO<span>カプチーノ</span></td>
<td>HOT</td>
<td>¥ 550</td>
</tr>
<tr>
<td>LATTE<span>ラテ</span></td>
<td>HOT / ICED</td>
<td>¥ 560</td>
</tr>
<tr>
<td>MOCHA<span>モカ</span></td>
<td>HOT / ICED</td>
<td>¥ 650</td>
</tr>
<tr>
<td>DRIP COFFEE<span>ドリップコーヒー</span></td>
<td>HOT / ICED</td>
<td>¥ 500</td>
</tr>
<tr>
<td>SOY CAFE<span>ソイカフェ</span></td>
<td>HOT / ICED</td>
<td>¥ 500</td>
</tr>
</table>
</div>
<!-- menu-list -->- CSS -
.menu-list {
margin-top: 72px;
}
.menu-table {
border-top: solid 3px #ffffff;
color: #ffffff;
width: 100%;
}
.menu-table tr {
border-bottom: solid 1px #ffffff;
display: flex;
padding: 40px 0;
}
.menu-table tr td {
display: block;
font-family: "CopperplateGothic", serif;
width: calc(100% / 3);
}
.menu-table tr td:first-child {
font-size: 24px;
}
.menu-table tr td:first-child span {
display: block;
font-family: "Noto Sans JP", sans-serif;
font-size: 14px;
}
.menu-table tr td:nth-child(2) {
line-height: 46px;
}
.menu-table tr td:last-child {
line-height: 46px;
text-align: right;
}
上記の図のようにイメージしてコーディングしましょう。
1つ目の枠を作ってしまえば最初のセクションと同じくコピーで内容を書き換えると完成します😊
文字の位置はそれぞれのdivをnth-childで指定し、text-alignで文字の位置を決めます。
メニュー表をコーディングは実務でよく出てくるので是非今回で学んだことを活かしてみてください😊
表のようなレイアウトはtableタグだけではなく、<dl>・<dt>・<dd>タグでも同じようなレイアウトで作れるのでググってチャレンジしてみてください！
- HTML - (menu-section答え)
<!-- MENU section -->
<section class="menu">
<div class="inner">
<h1 class="section-menu-title menu-center">MENU</h1>
<span class="section-menu-subtitle">メニュー</span>
<div class="menu-contents"><!-- menu-contents START -->
<!-- content 1番目 -->
<div class="menu-content">
<div class="menu-content-image">
<picture>
<source srcset="./image/menu-contents-image01.webp" type="image/webp">
<img src="./image/menu-contents-image01.jpg" class="menu-img" alt="エスプレッソ" loading="lazy">
</picture>
<picture>
<source srcset="./image/menu-coffee01.webp" type="image/webp">
<img src="./image/menu-coffee01.jpg" class="coffee-img" alt="エスプレッソビーンズ" loading="lazy">
</picture>
</div>
<div class="menu-content-text">
<h2 class="coffee-title">ESPRESSO</h2>
<p class="coffee-subtitle">エスプレッソ</p>
<p class="coffee-price">¥ 490</p>
</div>
</div>
<!-- content 1番目 -->
<!-- content 2番目 -->
<div class="menu-content">
<div class="menu-content-image">
<picture>
<source srcset="./image/menu-contents-image02.webp" type="image/webp">
<img src="./image/menu-contents-image02.jpg" class="menu-img" alt="エスプレッソ" loading="lazy">
</picture>
<picture>
<source srcset="./image/menu-coffee02.webp" type="image/webp">
<img src="./image/menu-coffee02.jpg" class="coffee-img" alt="エスプレッソビーンズ" loading="lazy">
</picture>
</div>
<div class="menu-content-text">
<h2 class="coffee-title">AMERICANO</h2>
<p class="coffee-subtitle">アメリカーノ</p>
<p class="coffee-price">¥ 490</p>
</div>
</div>
<!-- content 2番目 -->
<!-- content 3番目 -->
<div class="menu-content">
<div class="menu-content-image">
<picture>
<source srcset="./image/menu-contents-image03.webp" type="image/webp">
<img src="./image/menu-contents-image03.jpg" class="menu-img" alt="エスプレッソ" loading="lazy">
</picture>
<picture>
<source srcset="./image/menu-coffee03.webp" type="image/webp">
<img src="./image/menu-coffee03.jpg" class="coffee-img" alt="エスプレッソビーンズ" loading="lazy">
</picture>
</div>
<div class="menu-content-text">
<h2 class="coffee-title">MACCHIATO</h2>
<p class="coffee-subtitle">マキアート</p>
<p class="coffee-price">¥ 500</p>
</div>
</div>
<!-- content 3番目 -->
</div><!-- menu-contents END -->
<!-- menu-list -->
<div class="menu-list">
<table class="menu-table">
<tr>
<td>CAPPUCCINO<span>カプチーノ</span></td>
<td>HOT</td>
<td>¥ 550</td>
</tr>
<tr>
<td>LATTE<span>ラテ</span></td>
<td>HOT / ICED</td>
<td>¥ 560</td>
</tr>
<tr>
<td>MOCHA<span>モカ</span></td>
<td>HOT / ICED</td>
<td>¥ 650</td>
</tr>
<tr>
<td>DRIP COFFEE<span>ドリップコーヒー</span></td>
<td>HOT / ICED</td>
<td>¥ 500</td>
</tr>
<tr>
<td>SOY CAFE<span>ソイカフェ</span></td>
<td>HOT / ICED</td>
<td>¥ 500</td>
</tr>
</table>
</div>
<!-- menu-list -->
</div>
</section>
<!-- MENU section -->以上がFEATURES/MENUセクションの解説となります。
お疲れ様でした🙇♂️
次回の投稿で残りのSTAFF/SHOP INFOを解説していきます👍
▼読んでくれた方へ感謝のメッセージ
ここまで読んでくださり誠にありがとうございました！🙌
本章があなたのこれからのステップアップの役に立てたら嬉しいです！
▼会社のPR
最後に、、、
株式会社cajonでは一緒に仕事ができるメンバーを募集しています！
デザインが好き！Web制作をしてみたい！
そんな向上心とやる気がある方からのご応募をお待ちしています🤗
-------- Cajon採用サイトは下記URLから飛べます --------
https://recruit.cajon.co.jp/