Client Brief
小
小林 美穂編集長
Recipe Box編集部
件名: 新規制作のご依頼
料理研究家が監修するレシピメディアを新規立ち上げ。Bon AppétitやNYT Cookingのような、見た目も美しく使いやすいレシピサイトを目指す。
ご要望
- 1レシピカード一覧（写真・タイトル・時間・評価・お気に入り）
- 2カテゴリ＋調理時間のフィルタ
- 3お気に入り保存（localStorageで永続化）
- 4レシピ詳細（材料リスト＋手順）
- 5メルマガ登録
予算
¥380,000
納期
2ヶ月
種別
新規制作
クライアントの人柄
料理と食文化への深い愛情、ビジュアルへのこだわり、ユーザー体験重視
避けてほしいこと
安っぽいレシピサイト感広告だらけの印象文字情報だけの味気なさ
成功指標
月間PV10万、お気に入り登録率15%、メルマガ登録月500件
追加メモ
"NYT Cookingのような温かみと使いやすさの両立が理想。写真が美しく、レシピを見るだけで作りたくなるサイトに。"
Preview
/demo/M04-recipe-box/index.html
Learning Points
1
レシピカード
2
検索フィルタ
3
お気に入り（localStorage）
4
分量・手順構造
How to Build
01
Step 1: レシピカード設計
60分カード情報（写真・タイトル・時間・評価・難易度・お気に入り）の構造とフィルタUIを設計。
成果物: カード・フィルタ設計書
02
Step 2: HTML構造
120分ヒーロー→フィルタ→レシピGrid→詳細レシピ→メルマガ→フッター。
成果物: 完全なHTML
03
Step 3: キッチン配色CSS
120分Lora見出し、DM Sans本文。オフホワイト×トマトレッド×バターイエロー。カードとフィルタ。
成果物: ビジュアル完成
04
Step 4: フィルタ＋お気に入りJS
90分カテゴリ/時間フィルタ切替。お気に入りハートのlocalStorage永続化。検索UI。
成果物: インタラクション完成
05
Step 5: レスポンシブ＋仕上げ
90分カードGrid列数調整、フィルタの横スクロール、レシピ詳細のモバイル対応。
成果物: 完成版
Source Code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipe Box | おいしいレシピが見つかる</title>
<meta name="description" content="毎日の食卓を豊かにする、厳選レシピコレクション。和食から洋食、デザートまで。">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Lora:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ========== Header ========== -->
<header class="header">
<div class="header__container">
<a href="#" class="header__logo">
<span class="header__logo-icon">🍳</span>
<span class="header__logo-text">Recipe Box</span>
</a>
<nav class="header__nav">
<ul class="header__nav-list">
<li class="header__nav-item">
<a href="#recipes" class="header__nav-link header__nav-link--active">レシピ</a>
</li>
<li class="header__nav-item">
<a href="#" class="header__nav-link">特集</a>
</li>
<li class="header__nav-item">
<a href="#" class="header__nav-link">コラム</a>
</li>
</ul>
</nav>
<div class="header__actions">
<button class="header__search-btn" type="button" aria-label="検索を開く">
<svg class="header__search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</button>
<button class="header__menu-btn" type="button" aria-label="メニューを開く">
<span class="header__menu-bar"></span>
<span class="header__menu-bar"></span>
<span class="header__menu-bar"></span>
</button>
</div>
</div>
<!-- Search overlay -->
<div class="header__search-overlay" id="searchOverlay">
<div class="header__search-overlay-inner">
<input
type="search"
class="header__search-input"
placeholder="レシピを検索..."
id="searchInput"
aria-label="レシピを検索"
>
<button class="header__search-close" type="button" id="searchClose" aria-label="検索を閉じる">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
</div>
</header>
<main class="main">
<!-- ========== Hero ========== -->
<section class="hero">
<div class="hero__container">
<div class="hero__content">
<span class="hero__badge">今週のおすすめ</span>
<h1 class="hero__title">自家製ミートソースパスタ</h1>
<p class="hero__description">
じっくり煮込んだ濃厚なミートソースと、もちもちのパスタが絶妙にマッチ。
週末のランチにぴったりの一皿です。
</p>
<div class="hero__meta">
<span class="hero__meta-item">
<span class="hero__meta-icon">⏰</span> 45分
</span>
<span class="hero__meta-item">
<span class="hero__meta-icon">👥</span> 2人前
</span>
<span class="hero__meta-item">
<span class="hero__meta-icon">📊</span> 普通
</span>
</div>
<a href="#recipe-detail" class="hero__cta">レシピを見る</a>
</div>
<div class="hero__image-wrapper">
<img
src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=1200&q=80"
alt="今週のおすすめレシピ：自家製ミートソースパスタ"
class="hero__image"
loading="eager"
>
</div>
</div>
</section>
<!-- ========== Search & Filter ========== -->
<section class="filter" id="recipes">
<div class="filter__container">
<h2 class="filter__heading">レシピを探す</h2>
<div class="filter__categories">
<button class="filter__btn filter__btn--active" data-category="all" type="button">すべて</button>
<button class="filter__btn" data-category="washoku" type="button">和食</button>
<button class="filter__btn" data-category="yoshoku" type="button">洋食</button>
<button class="filter__btn" data-category="chuuka" type="button">中華</button>
<button class="filter__btn" data-category="dessert" type="button">デザート</button>
<button class="filter__btn" data-category="bread" type="button">パン</button>
</div>
<div class="filter__time">
<span class="filter__time-label">調理時間：</span>
<button class="filter__time-btn filter__time-btn--active" data-time="all" type="button">すべて</button>
<button class="filter__time-btn" data-time="15" type="button">〜15分</button>
<button class="filter__time-btn" data-time="30" type="button">〜30分</button>
<button class="filter__time-btn" data-time="60" type="button">〜60分</button>
</div>
</div>
</section>
<!-- ========== Recipe Grid ========== -->
<section class="recipes">
<div class="recipes__container">
<div class="recipes__grid">
<!-- Recipe Card 1 -->
<article class="recipe-card" data-id="recipe-1" data-category="yoshoku" data-time="20">
<div class="recipe-card__image-wrapper">
<img
src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=400&q=80"
alt="マルゲリータピザ"
class="recipe-card__image"
loading="lazy"
>
<button class="recipe-card__favorite" data-recipe-id="recipe-1" type="button" aria-label="お気に入りに追加">
<svg class="recipe-card__heart" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</button>
<span class="recipe-card__difficulty recipe-card__difficulty--easy">簡単</span>
</div>
<div class="recipe-card__body">
<h3 class="recipe-card__title">マルゲリータピザ</h3>
<div class="recipe-card__meta">
<span class="recipe-card__time">⏰ 20分</span>
<span class="recipe-card__rating">
<span class="recipe-card__stars" data-rating="4.5">★★★★☆</span>
<span class="recipe-card__rating-value">4.5</span>
</span>
</div>
</div>
</article>
<!-- Recipe Card 2 -->
<article class="recipe-card" data-id="recipe-2" data-category="yoshoku" data-time="15">
<div class="recipe-card__image-wrapper">
<img
src="https://images.unsplash.com/photo-1482049016688-2d3e1b311543?w=400&q=80"
alt="アボカドトースト"
class="recipe-card__image"
loading="lazy"
>
<button class="recipe-card__favorite" data-recipe-id="recipe-2" type="button" aria-label="お気に入りに追加">
<svg class="recipe-card__heart" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</button>
<span class="recipe-card__difficulty recipe-card__difficulty--easy">簡単</span>
</div>
<div class="recipe-card__body">
<h3 class="recipe-card__title">アボカドトースト</h3>
<div class="recipe-card__meta">
<span class="recipe-card__time">⏰ 15分</span>
<span class="recipe-card__rating">
<span class="recipe-card__stars" data-rating="4.2">★★★★☆</span>
<span class="recipe-card__rating-value">4.2</span>
</span>
</div>
</div>
</article>
<!-- Recipe Card 3 -->
<article class="recipe-card" data-id="recipe-3" data-category="yoshoku" data-time="40">
<div class="recipe-card__image-wrapper">
<img
src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=400&q=80"
alt="ローストビーフ"
class="recipe-card__image"
loading="lazy"
>
<button class="recipe-card__favorite" data-recipe-id="recipe-3" type="button" aria-label="お気に入りに追加">
<svg class="recipe-card__heart" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</button>
<span class="recipe-card__difficulty recipe-card__difficulty--advanced">本格</span>
</div>
<div class="recipe-card__body">
<h3 class="recipe-card__title">ローストビーフ</h3>
<div class="recipe-card__meta">
<span class="recipe-card__time">⏰ 40分</span>
<span class="recipe-card__rating">
<span class="recipe-card__stars" data-rating="4.8">★★★★★</span>
<span class="recipe-card__rating-value">4.8</span>
</span>
</div>
</div>
</article>
<!-- Recipe Card 4 -->
<article class="recipe-card" data-id="recipe-4" data-category="washoku" data-time="10">
<div class="recipe-card__image-wrapper">
<img
src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=400&q=80"
alt="グリーンサラダ"
class="recipe-card__image"
loading="lazy"
>
<button class="recipe-card__favorite" data-recipe-id="recipe-4" type="button" aria-label="お気に入りに追加">
<svg class="recipe-card__heart" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</button>
<span class="recipe-card__difficulty recipe-card__difficulty--easy">簡単</span>
</div>
<div class="recipe-card__body">
<h3 class="recipe-card__title">季節のグリーンサラダ</h3>
<div class="recipe-card__meta">
<span class="recipe-card__time">⏰ 10分</span>
<span class="recipe-card__rating">
<span class="recipe-card__stars" data-rating="4.0">★★★★☆</span>
<span class="recipe-card__rating-value">4.0</span>
</span>
</div>
</div>
</article>
<!-- Recipe Card 5 -->
<article class="recipe-card" data-id="recipe-5" data-category="washoku" data-time="25">
<div class="recipe-card__image-wrapper">
<img
src="https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=400&q=80"
alt="味噌汁と白ごはん"
class="recipe-card__image"
loading="lazy"
>
<button class="recipe-card__favorite" data-recipe-id="recipe-5" type="button" aria-label="お気に入りに追加">
<svg class="recipe-card__heart" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</button>
<span class="recipe-card__difficulty recipe-card__difficulty--normal">普通</span>
</div>
<div class="recipe-card__body">
<h3 class="recipe-card__title">味噌汁と白ごはん定食</h3>
<div class="recipe-card__meta">
<span class="recipe-card__time">⏰ 25分</span>
<span class="recipe-card__rating">
<span class="recipe-card__stars" data-rating="4.6">★★★★☆</span>
<span class="recipe-card__rating-value">4.6</span>
</span>
</div>
</div>
</article>
<!-- Recipe Card 6 -->
<article class="recipe-card" data-id="recipe-6" data-category="yoshoku" data-time="45">
<div class="recipe-card__image-wrapper">
<img
src="https://images.unsplash.com/photo-1476224203421-9ac39bcb3327?w=400&q=80"
alt="クリームパスタ"
class="recipe-card__image"
loading="lazy"
>
<button class="recipe-card__favorite" data-recipe-id="recipe-6" type="button" aria-label="お気に入りに追加">
<svg class="recipe-card__heart" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</button>
<span class="recipe-card__difficulty recipe-card__difficulty--normal">普通</span>
</div>
<div class="recipe-card__body">
<h3 class="recipe-card__title">きのこのクリームパスタ</h3>
<div class="recipe-card__meta">
<span class="recipe-card__time">⏰ 45分</span>
<span class="recipe-card__rating">
<span class="recipe-card__stars" data-rating="4.3">★★★★☆</span>
<span class="recipe-card__rating-value">4.3</span>
</span>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- ========== Recipe Detail ========== -->
<section class="detail" id="recipe-detail">
<div class="detail__container">
<div class="detail__header">
<div class="detail__image-wrapper">
<img
src="https://images.unsplash.com/photo-1476224203421-9ac39bcb3327?w=1200&q=80"
alt="きのこのクリームパスタ 完成写真"
class="detail__image"
loading="lazy"
>
</div>
<div class="detail__info">
<span class="detail__category-badge">洋食</span>
<h2 class="detail__title">きのこのクリームパスタ</h2>
<p class="detail__description">
しめじ、エリンギ、マッシュルームの3種のきのこを使った、風味豊かなクリームパスタ。
生クリームとパルメザンチーズのコクが絶品です。
</p>
<div class="detail__meta">
<div class="detail__meta-item">
<span class="detail__meta-icon">⏰</span>
<span class="detail__meta-label">調理時間</span>
<span class="detail__meta-value">45分</span>
</div>
<div class="detail__meta-item">
<span class="detail__meta-icon">👥</span>
<span class="detail__meta-label">分量</span>
<span class="detail__meta-value">2人前</span>
</div>
<div class="detail__meta-item">
<span class="detail__meta-icon">📊</span>
<span class="detail__meta-label">難易度</span>
<span class="detail__meta-value">普通</span>
</div>
<div class="detail__meta-item">
<span class="detail__meta-icon">🔥</span>
<span class="detail__meta-label">カロリー</span>
<span class="detail__meta-value">580 kcal</span>
</div>
</div>
</div>
</div>
<div class="detail__body">
<!-- Ingredients -->
<div class="detail__ingredients">
<h3 class="detail__section-title">材料（2人前）</h3>
<ul class="detail__ingredient-list">
<li class="detail__ingredient">
<span class="detail__ingredient-name">パスタ（スパゲッティ）</span>
<span class="detail__ingredient-amount">200g</span>
</li>
<li class="detail__ingredient">
<span class="detail__ingredient-name">しめじ</span>
<span class="detail__ingredient-amount">1パック</span>
</li>
<li class="detail__ingredient">
<span class="detail__ingredient-name">エリンギ</span>
<span class="detail__ingredient-amount">2本</span>
</li>
<li class="detail__ingredient">
<span class="detail__ingredient-name">マッシュルーム</span>
<span class="detail__ingredient-amount">6個</span>
</li>
<li class="detail__ingredient">
<span class="detail__ingredient-name">にんにく</span>
<span class="detail__ingredient-amount">2片</span>
</li>
<li class="detail__ingredient">
<span class="detail__ingredient-name">オリーブオイル</span>
<span class="detail__ingredient-amount">大さじ2</span>
</li>
<li class="detail__ingredient">
<span class="detail__ingredient-name">生クリーム</span>
<span class="detail__ingredient-amount">200ml</span>
</li>
<li class="detail__ingredient">
<span class="detail__ingredient-name">パルメザンチーズ</span>
<span class="detail__ingredient-amount">大さじ3</span>
</li>
<li class="detail__ingredient">
<span class="detail__ingredient-name">バター</span>
<span class="detail__ingredient-amount">15g</span>
</li>
<li class="detail__ingredient">
<span class="detail__ingredient-name">塩・こしょう</span>
<span class="detail__ingredient-amount">適量</span>
</li>
<li class="detail__ingredient">
<span class="detail__ingredient-name">パセリ（飾り用）</span>
<span class="detail__ingredient-amount">適量</span>
</li>
</ul>
</div>
<!-- Steps -->
<div class="detail__steps">
<h3 class="detail__section-title">作り方</h3>
<ol class="detail__step-list">
<li class="detail__step">
<div class="detail__step-number">1</div>
<div class="detail__step-content">
<p class="detail__step-text">
大きな鍋にたっぷりのお湯を沸かし、塩（湯の量の1%）を加えてパスタを茹で始めます。
表示時間より1分短く茹でてください。
</p>
</div>
</li>
<li class="detail__step">
<div class="detail__step-number">2</div>
<div class="detail__step-content">
<p class="detail__step-text">
きのこ類を準備します。しめじは石づきを落としてほぐし、エリンギは薄切り、
マッシュルームは4等分にします。にんにくはみじん切りにします。
</p>
</div>
</li>
<li class="detail__step">
<div class="detail__step-number">3</div>
<div class="detail__step-content">
<p class="detail__step-text">
フライパンにオリーブオイルとバターを入れ中火にかけ、にんにくを炒めて香りを出します。
きのこ類を加え、しんなりするまで3〜4分炒めます。
</p>
</div>
</li>
<li class="detail__step">
<div class="detail__step-number">4</div>
<div class="detail__step-content">
<p class="detail__step-text">
生クリームを加えて弱火にし、2分ほど煮詰めます。塩・こしょうで味を調えます。
</p>
</div>
</li>
<li class="detail__step">
<div class="detail__step-number">5</div>
<div class="detail__step-content">
<p class="detail__step-text">
茹で上がったパスタをソースに加え、パルメザンチーズを振りかけて手早く和えます。
茹で汁を少量加えて、なめらかに仕上げます。器に盛り、パセリを散らして完成。
</p>
</div>
</li>
</ol>
</div>
<!-- Nutrition -->
<div class="detail__nutrition">
<h3 class="detail__section-title">栄養情報（1人分）</h3>
<div class="detail__nutrition-grid">
<div class="detail__nutrition-item">
<span class="detail__nutrition-value">580</span>
<span class="detail__nutrition-label">kcal</span>
</div>
<div class="detail__nutrition-item">
<span class="detail__nutrition-value">18g</span>
<span class="detail__nutrition-label">たんぱく質</span>
</div>
<div class="detail__nutrition-item">
<span class="detail__nutrition-value">72g</span>
<span class="detail__nutrition-label">炭水化物</span>
</div>
<div class="detail__nutrition-item">
<span class="detail__nutrition-value">24g</span>
<span class="detail__nutrition-label">脂質</span>
</div>
<div class="detail__nutrition-item">
<span class="detail__nutrition-value">3.2g</span>
<span class="detail__nutrition-label">食物繊維</span>
</div>
<div class="detail__nutrition-item">
<span class="detail__nutrition-value">2.1g</span>
<span class="detail__nutrition-label">塩分</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ========== Newsletter ========== -->
<section class="newsletter">
<div class="newsletter__container">
<div class="newsletter__content">
<span class="newsletter__icon">📮</span>
<h2 class="newsletter__title">毎週レシピが届く</h2>
<p class="newsletter__description">
季節のおすすめレシピや、料理のコツを毎週お届けします。<br>
無料で購読できます。
</p>
<form class="newsletter__form" id="newsletterForm">
<div class="newsletter__input-wrapper">
<input
type="email"
class="newsletter__input"
placeholder="メールアドレスを入力"
required
aria-label="メールアドレス"
>
<button type="submit" class="newsletter__submit">購読する</button>
</div>
<p class="newsletter__note">いつでも解除できます。スパムは送りません。</p>
</form>
</div>
</div>
</section>
</main>
<!-- ========== Footer ========== -->
<footer class="footer">
<div class="footer__container">
<div class="footer__top">
<div class="footer__brand">
<a href="#" class="footer__logo">
<span class="footer__logo-icon">🍳</span>
<span class="footer__logo-text">Recipe Box</span>
</a>
<p class="footer__tagline">毎日の食卓を、もっと豊かに。</p>
</div>
<nav class="footer__nav">
<div class="footer__nav-group">
<h4 class="footer__nav-heading">コンテンツ</h4>
<ul class="footer__nav-list">
<li><a href="#" class="footer__nav-link">レシピ一覧</a></li>
<li><a href="#" class="footer__nav-link">特集記事</a></li>
<li><a href="#" class="footer__nav-link">コラム</a></li>
<li><a href="#" class="footer__nav-link">動画</a></li>
</ul>
</div>
<div class="footer__nav-group">
<h4 class="footer__nav-heading">カテゴリ</h4>
<ul class="footer__nav-list">
<li><a href="#" class="footer__nav-link">和食</a></li>
<li><a href="#" class="footer__nav-link">洋食</a></li>
<li><a href="#" class="footer__nav-link">中華</a></li>
<li><a href="#" class="footer__nav-link">デザート</a></li>
</ul>
</div>
<div class="footer__nav-group">
<h4 class="footer__nav-heading">サイトについて</h4>
<ul class="footer__nav-list">
<li><a href="#" class="footer__nav-link">運営者情報</a></li>
<li><a href="#" class="footer__nav-link">プライバシーポリシー</a></li>
<li><a href="#" class="footer__nav-link">お問い合わせ</a></li>
<li><a href="#" class="footer__nav-link">利用規約</a></li>
</ul>
</div>
</nav>
</div>
<div class="footer__bottom">
<p class="footer__copyright">© 2026 Recipe Box. All rights reserved.</p>
<div class="footer__social">
<a href="#" class="footer__social-link" aria-label="Instagram">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
</svg>
</a>
<a href="#" class="footer__social-link" aria-label="Twitter">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
</svg>
</a>
<a href="#" class="footer__social-link" aria-label="YouTube">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19.1c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path>
<polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon>
</svg>
</a>
</div>
</div>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>Self Check
0 / 10
Submit
Discord #提出-media チャンネルに投稿
- 1デプロイURL
- 2GitHubリポジトリURL
- 3工夫した点3つ
- 4クライアントへの提案メッセージ案