独学からコーダーとしてお仕事をいただいけるようになった学習法
WordPress化のアイキャッチ
0からHTMLをWordPress化する
Java Scriptの構文をサッと復習できるやつ(でもホントは長い)
Web制作初心者のための学習ロードマップ

【初心者向け】模写を一緒にやってみよう

2020年12月21日
記事内に広告を含むことがあります。
チャッピー
チャッピー

ひと通りHTMLとCSSを学習したらどうするの？

こばゆた
こばゆた

模写と呼ばれるWebサイトを真似るという勉強法が良いのかな

今まで学習したコードが実際にどう使われているかわかるしね

きなこ
きなこ

でもどうやってやるの？

こばゆた
こばゆた

では今回は模写を実際にやってみましょう！

それほど難しくないのですが、とても長いので頑張りましょう(笑)

最後に今回はレスポンシブやリンクボタンは設定しておりませんのでご了承ください

スポンサーリンク

1.今回作るサイト

模写用に架空のWebページを作りました。

こばゆた
こばゆた

よくあるパターンのものだと思います

データはこちらから

K’s Meatダウンロード
スポンサーリンク

2.HTMLファイルと画像フォルダを作る

2-1.フォルダの作成と読み込み

フォルダーの読み込み方

[ptimeline color=”yellow”]

  • STEP1
    VS Codeを起動する
    起動するとこのような画面が出てきます。

  • STEP2
    左のサイドバーの一番上のマークをクリック

  • STEP3
    ウインドウが出てきたら「フォルダーを開く」をクリック

  • STEP4
    フォルダーを選択して開く

    • [/ptimeline]

    フォルダーの読み込み方

    [ptimeline color=”yellow”]

  • STEP1
    VS Codeを起動する
    起動するとこのような画面が出てきます。

  • STEP2
    左のサイドバーの一番上のマークをクリック

  • STEP3
    ウインドウが出てきたら「フォルダーを開く」をクリック

  • STEP4
    フォルダーを選択して開く
    ↑ちなみに左下の「新規フォルダ」からでもフォルダは作成できます

    • [/ptimeline]

    2-2.HTMLファイルの作成

    HTMLファイルの作り方

    [ptimeline color=”yellow”]

  • STEP1
    エディターを開いてフォルダーを読み込んだら「新しいファイル」を選択

  • STEP2
    ファイル名を入力する
    目次となるページには”index.html”と付けます

  • STEP3
    enterを押せば完成

    • [/ptimeline]

    またVS Codeが日本語になってない場合は以下の順で日本語化できます。

    こばゆた
    こばゆた

    作業が終了したらリスタートするか聞かれるので「Restart Now」をクリックしてVS Codeを再起動すればおkです

    詳しくはコチラ↓

    【初心者向け】Webサイトを作成するためのフォルダとファイルの準備
    Webサイトを作るためのフォルダとHTMLファイルを作成し画面に表示するまでをやって行きます。
    kbyt-programming.com
    2021年10月03日

    2-3.画像フォルダを作る

    こんな感じになります。

    こばゆた
    こばゆた

    Windowsも同じ感じでできると思います

    詳しくはコチラ↓

    【初心者向け】画像フォルダの作り方とそれぞれの画像データの違い
    Webサイトで使う画像のフォルダ作成方法について解説。また様々な画像データの違いにも軽く触れております。
    kbyt-programming.com
    2020年09月12日

    3.headタグ内に情報を書く

    テキストエディターを開きheadタグ内に情報を書きます。

    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>K's Meat</title>
</head>
<body>
  
</body>
</html>

    VS Codeを使っている方は”!”を押してから”Tabキー”を押すとひな形が出ます。

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

    htmlタグのlang属性を”ja”に直すだけでおｋです。

    ちなみに<meta name=”viewport”…はレスポンシブの時に使うものなのでとりあえず今回は無視で大丈夫です。

    詳しくはコチラ↓

    【初心者向け】HTMLファイルの基本構造とheadタグに書く情報
    HTMLの基本構造と、<head>タグに書くべき情報（タイトル、文字コード、メタ情報など）を初心者向けに丁寧に解説。これからWeb制作を始める方に最適な入門ガイドです。
    kbyt-programming.com
    2025年07月24日

    4.CSSファイルを作る

    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>K's Meat</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  
</body>
</html>

    headタグ内に以下の一文を追加し、別にCSSファイルを作ります。

    <link rel="stylesheet" href="css/styles.css">

    詳しくはコチラ↓

    【初心者向け】CSSの記入場所と読み込み方法とCSSファイルの作成
    HTMLにCSSを適用するにはどうすればいい？この記事では、CSSの記述方法（インライン・内部・外部）、読み込み方法、CSSファイルの作り方までを初心者向けにやさしく解説します。
    kbyt-programming.com
    2025年06月13日

    5.リセットCSSを書く

    まずは余白を消すためにリセットCSSを読み込みましょう。

    お使いのものがあればお好みのものを使ってください。

    @charset "UTF-8";
/*リセットCSS
----------*/
* {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  list-style: none;
  outline:0;
  box-sizing: border-box;
}

a { 
  color: inherit;
  text-decoration: none;
}

img{
  width:100%;
  vertical-align: bottom;
}

    詳しくはコチラ↓

    リセットCSSとその使い方【CSS】
    リセットCSSを使うと「ブラウザ間での表示の違いをリセット」してくれたり、「デフォルトで設定されている余白などを消す」などしてくれます。簡単ですが説明しています。
    kbyt-programming.com
    2025年06月12日

    6.グループ分けをする

    こばゆた
    こばゆた

    まずいきなり書き始めるのも良いですがどんな構成しているかを分析してみると後々が楽です

    詳しくはコチラ↓

    【HTML】グループ分けをするタグを使いレイアウトをしやすくする
    HTMLで要素をグループ分けするタグ（div、section、fieldsetなど）の役割と使い分け方を初心者向けにわかりやすく解説。見出し付きで意味を整理しながら実例コードも紹介します。
    kbyt-programming.com
    2025年06月12日
    こばゆた
    こばゆた

    今回のサイトだとこんな感じで構成されています

    ちなみにmvはメインビジュアルの略です

    <body>
  <header>
 
  </header>
  <main>
    <section class="mv">

    </section>
    <section class="course">
     
    </section>
    <section class="chef">
     
    </section>
    <section class="reservation">
     
    </section>
  </main>
  <footer>

  </footer>
</body>
    header,section,footer{
  background-color: rgba(94, 1, 255, 0.1);
  border: 1px solid rgba(0,0,0,0.1);
  height: 100px;
}
/*見やすさのために設定していますが最後に消します*/

    7.共通設定を探す

    こばゆた
    こばゆた

    次は効率をよくするため共通部分を探してみましょう

    チャッピー
    チャッピー

    同じパーツを探すって事だね

    こばゆた
    こばゆた

    今回のサイトだとこんな感じかなぁ

    • インナーが使われているところ
    • 各セクションのタイトル
    • メインビジュアルを除くセクションの高さと下の余白

    …もしかしたらまだあるかもしれないけど(笑)

    きなこ
    きなこ

    結構あるね

    こばゆた
    こばゆた

    では順番にやっていこう

    7-1.インナー

    完成形を見ると内側に見えない枠があるところと、ないところがあるのがわかります。

    そこにインナーを作ります。

    <body>
  <header>
    <div class="inner">

    </div>
  </header>
  <main>
    <section class="mv">

    </section>
    <section class="course">
      <div class="inner">
        
      </div>
    </section>
    <section class="chef">
      <div class="inner">
       
      </div>
    </section>
    <section class="reservation">
      
    </section>
  </main>
  <footer>

  </footer>
</body>
    .inner{
  width: 1200px;
  margin: 0 auto;
  max-width: 100%;
  background-color: rgba(241,92,168,0.2); /*わかりやすさのために色を付けてあります。最後に消します*/
}

    詳しくは「はにわまん」さんのサイトをご覧ください。

    レイアウトの基本である.innerの中央寄せを覚えよう！ | HPcode（えいちぴーこーど）
    中央揃えってサイト制作し始めた初心者にとっては最初の難題かと思います。 この中央揃えですが、実はレイアウトの肝の部分で当たり前に使われる要素なので、最低でもレイアウトの左右中央揃えだけは覚えておかなければなりません！ この記事では、Web制
    haniwaman.com

    7-2.セクションタイトル

    こばゆた
    こばゆた

    セクションのタイトルの大きさ、位置、フォントなどが同じなので先に作ってしまいます

    <body>
  <header>
    <div class="inner">
      
    </div>
  </header>
  <main>
    <section class="mv">

    </section>
    <section class="course">
      <div class="inner">
        <h2 class="section-title">Course</h2>

      </div>
    </section>
    <section class="chef">
      <div class="inner">
        <h2 class="section-title">Chef</h2>

      </div>
    </section>
    <section class="reservation">
      <h2 class="section-title">Reservation</h2>

    </section>
  </main>
  <footer>

  </footer>
</body>
    html{
  font-size: 62.5%;
}

body {
  font-family:  YuMincho, 'Yu Mincho', sans-serif;
  font-size: 1.6em;
}

.section-title{
  font-size: 4rem;
  text-align: center;
  font-weight: normal;
  letter-spacing: 0.06em;
}
    こばゆた
    こばゆた

    また文章全体のフォントも同じなのでそれも合わせておきます。

    きなこ
    きなこ

    ところでなんでfont-sizeを何回も書いてるの？

    こばゆた
    こばゆた
    1. 基本的にブラウザのデフォルトのfont-sizeが16pxなのでhtmlのfont-sizeを62.5%に設定することで16×0.65の10pxになります
    2. bodyのfont-sizeを1.6emと設定する事で結果的に全体のfont-sizeが16pxになります
    3. その後font-sizeを変更したい要素が出てきたらremで指定する

    この過程を通す事でレスポンシブにも対応できるようになるんだよ

    7-3.セクションの高さと余白

    こばゆた
    こばゆた

    メインビジュアル以外のセクションの高さと余白が同じなので指定します

    .course,.chef,.reservation{
  height: 680px;
}

section{
  margin-bottom: 120px;
}
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <header>
    <div class="inner">

    </div>
  </header>

  <main>
    <section class="mv">

    </section>

    <section class="course">
      <div class="inner">
        <h2 class="section-title">Course</h2>
      </div>
    </section>

    <section class="chef">
      <div class="inner">
        <h2 class="section-title">Chef</h2>
    
      </div>
    </section>

    <section class="reservation">
      <h2 class="section-title">Reservation</h2>

    </section>
  </main>
  
  <footer>

  </footer>
</body>
</html>
    /*リセットCSS
----------*/
* {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  list-style: none;
  outline:0;
  box-sizing: border-box;
}

a { 
  color: inherit;
  text-decoration: none;
}

img{
  width:100%;
  vertical-align: bottom;
}

/*共通部分
----------*/
header,section,footer{
  background-color: rgba(94, 1, 255, 0.1);
  border: 1px solid rgba(0,0,0,0.1);
  height: 100px;
}
.inner{
  width: 1200px;
  margin: 0 auto;
  max-width: 100%;
  background-color: rgba(241,92,168,0.2); /*わかりやすさのために色を付けてあります。最後に消します*/
}
html{
  font-size: 62.5%;
}

body {
  font-family:  YuMincho, 'Yu Mincho', sans-serif;
  font-size: 1.6em;
}

.section-title{
  font-size: 4rem;
  text-align: center;
  font-weight: normal;
  letter-spacing: 0.06em;
}

.course,.chef,.reservation{
  height: 680px;
}

section{
  margin-bottom: 120px;
}
    こばゆた
    こばゆた

    これで準備おkです

    次から各セクションを作っていくよ

    チャッピー
    チャッピー

    もうサイトっぽいね

    8.ヘッダー

    こばゆた
    こばゆた

    こちらが完成形です

    <header>
  <div class="inner header-container">
    <h1><a href="#"><img src="image/header-logo.png" alt="ヘッダーロゴ画像"></a></h1>
    <ul class="header-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Course</a></li>
      <li><a href="#">Chef</a></li>
      <li><a href="#">Reservation</a></li>
    </ul>
  </div>
</header>
    header{
  background-color: rgb(145, 41, 41);
  height: 70px;
  width: 100%;
  color: #fff;
}

header h1{
  width: 300px;
}

.header-container{
  display: flex; 
  justify-content: space-between;
  align-items: center; 
}

.header-nav{
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}

.header-nav li a{
  margin-left: 40px; 
  font-size: 2rem; 
  letter-spacing: 0.06em; 
}
    ヘッダーの作り方

    [ptimeline color=”yellow”]

  • STEP1
    HTMLを書く

    <header>
  <div class="inner header-container">
    <h1><a href="#"><img src="image/header-logo.png" alt="ヘッダーロゴ画像"></a></h1>
    <ul class="header-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Course</a></li>
      <li><a href="#">Chef</a></li>
      <li><a href="#">Reservation</a></li>
    </ul>
  </div>
</header>

    headerのinnerに”header-container”というクラスを追加します。
    これは後程flex boxで横並びにするためのものです。


  • STEP2
    ヘッダーのベースを作る

    header{
  background-color: rgb(145, 41, 41); /*背景色を設定*/
  height: 70px; /*高さを指定*/
  width: 100%; /*横幅を親要素一杯に*/
  color: #fff; /*文字色*/
}

header h1{
  width: 300px; /*幅を指定*/
}

    ロゴがデカかったので幅を設定しています。またナビメニューの文字色が白なので見にくいですが一応あります…


  • STEP3
    横並びにして両サイドに配置する

    .header-container{
  display: flex; /*横並びにする*/
  justify-content: space-between; /*両端に配置する*/
  align-items: center; /*中央揃いにする*/
}

    ここでflex boxを使って横並びにします。

    Flexboxの基本と主軸の方向を決めるflex-direction
    CSSのFlexboxを使いこなすには、主軸と交差軸の概念が重要です。この記事では、flex-directionの基本的な使い方や向きの違い、よくあるレイアウトパターンを初心者の方向けに解説します。
    kbyt-programming.com
    2025年06月13日
    主軸方向の位置を決めるjustify-contentと交差軸方向の位置を決めるalign-items【Flexbox】
    CSSのFlexboxでレイアウトを整えるために必要な「justify-content」と「align-items」の基本を解説。主軸と交差軸それぞれの整列方法や、よく使うパターンを初心者の方向けにわかりやすく紹介します。
    kbyt-programming.com
    2025年06月13日

    ロゴとナビが横並びになり両端に配置されました。


  • STEP4
    ナビ部分を作る

    .header-nav{
  display: flex; /*横並びにする*/
  justify-content: space-between; /*両端に配置する*/
  align-items: center; /*中央揃いにする*/
}

.header-nav li a{
  margin-left: 40px; /*余白*/
  font-size: 2rem; /*文字サイズ*/
  letter-spacing: 0.06em; /*字間*/
}

    同じ様にflex-boxで横並びにし、リンクのスタイルを付けて完成です。


    • [/ptimeline]

    9.メインビジュアル

    こばゆた
    こばゆた

    こちらが完成形です

    模写-mv-6
    <section class="mv">
  <div class="mv-container">
    <h2>MEET TO MEAT</h2>
    <p>本当に美味い肉に会う</p>
  </div>
</section>
    .mv{
  color: #fff;
  height: 870px;
  background: linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.1)), url(../image/肉.jpg) no-repeat center/cover;
}

.mv-container h2{
  font-size: 10rem;
  font-weight: normal; 
  letter-spacing: 0.1em; 
}

.mv-container p{
  font-size: 8.3rem; 
  letter-spacing: 0.01em; 
  line-height: 1.2; 
}

.mv-container{
  text-align: center; 
  width: 980px; 
  margin: 0 auto; 
  padding-top: 360px; 
}

    メインビジュアルの作り方

    [ptimeline color=”yellow”]

  • STEP1
    HTMLを書く

    <section class="mv">
  <div class="mv-container">
    <h2>MEET TO MEAT</h2>
    <p>本当に美味い肉に会う</p>
  </div>
</section>


  • STEP2
    メインビジュアルの高さを設定する

    .mv{
  color: #fff; /*文字色*/
  height: 870px; /*メインビジュアルの高さを870px*/
}

    またまた文字色が白なのでテキストが見づらいですが一応あります。
    ここではメインビジュアルの高さを設定します。


  • STEP3
    見出しとテキストを作成する

    .mv-container h2{
  font-size: 10rem; /*文字サイズ*/
  font-weight: normal; /*フォントの太さ*/
  letter-spacing: 0.1em; /*字間*/
}

.mv-container p{
  font-size: 8.3rem; /*文字サイズ*/
  letter-spacing: 0.01em; /*字間*/
  line-height: 1.2; /*行の高さ*/
}

    サイズがデカくなったので少し見やすくなりました。


  • STEP4
    文やコンテナを中央配置にする

    .mv-container{
  text-align: center; /*文を中央配置*/
  width: 980px; /*コンテナの幅*/
  margin: 0 auto; /*コンテナを中央配置*/
  padding-top: 360px; /*余白*/
}


  • STEP5
    背景画像を入れる

    .mv{
　color: #fff;
  height: 870px;
  background: url(../image/肉.jpg) no-repeat center/cover;
}

    背景画像を設定しています。書く時は短い方が良いのでショートハンドで書いています。
    ちなみに省略せずに書いた場合はさらにこれだけ書き加えないといけません。面倒ですね(笑)

    .mv{
  background-image: url(../image/肉.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;  
}
    【background】背景に関するプロパティ【CSS】
    画面いっぱいに背景画像を貼り付けるのに必要なプロパティを解説しています。基本から解説していますのできっと理解できると思います。
    kbyt-programming.com
    2025年06月13日

    どちらでやっても結果は同じです。


  • STEP6
    文字が見やすい様にフィルターを入れる
    文字が少し見づらいので背景に幕を貼ります。

    linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.1))/*グラデーションを入れる*/

    この一文をbackgroundプロパティの画像URLの前に入れてカンマで区切ります。

    .mv{
  color: #fff;
  height: 870px;
  background: linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.1)), url(../image/肉.jpg) no-repeat center/cover;
}

    詳しくはコチラ↓

    【linear-gradient】線形のグラデーションを作る【CSS】
    線形のグラデーションを作成するlinear-gradientの基本的な使い方を解説しております。
    kbyt-programming.com
    2025年06月13日


    本当にうすく幕を貼る事で文字がくっきりと浮き上がって見やすくなったと思います。
    またこれ以外に擬似要素を使ってもできますがここでは割愛します。


  • STEP7
    メインビジュアルの上にヘッダーを配置する
    完成形ではメインビジュアルの上にヘッダーが乗っているのでそのように指定します。

    header{
  background-color: rgba(145, 41, 41, 0.5); /*背景のみ薄くするためrgbaで指定する*/
  height: 70px;
  width: 100%;
  color: #fff;
  z-index: 1; /*z-indexを1に*/
  position: absolute; /*絶対配置にする*/
}

    ヘッダーの背景を透過にし、z-indexとposition: absoluteも加えて完成です。

    【z-index】要素の重なり順を指定する【CSS】
    positionプロパティで絶対配置で指定した要素の重なり順を任意に指定できるのがz-indexプロパティです。今回は初心者向けに簡単な説明をしています。
    kbyt-programming.com
    2025年06月12日


    • [/ptimeline]

    opacityを使うと全体に適用されて文字色まで薄くなってしまうので注意です。

    【opacity】要素の透明度を変えるプロパティ【CSS】
    ボタンやバナーによく使われる要素の透明度を変えるプロパティであるopacityの使い方を解説しています。またopacityとrgbaの使い分けも合わせて解説しています。
    kbyt-programming.com
    2025年06月12日

    10.コースセクション

    こばゆた
    こばゆた

    こちらが完成形です

    <section class="course">
  <div class="inner">
    <h2 class="section-title">Course</h2>
    <div class="course-container">
      <ul class="course-item">
        <li><a href="#"><img src="image/300x350.png" alt="ダミー画像"></a></li>
        <li class="course-name"><a href="#">和牛お試しコース</a></li>
        <li class="course-text"><a href="#">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</a></li>
      </ul>
      <ul class="course-item">
        <li><a href="#"><img src="image/300x350.png" alt="ダミー画像"></a></li>
        <li class="course-name"><a href="#">女子会コース</a></li>
        <li class="course-text"><a href="#">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</a></li>
      </ul>
      <ul class="course-item">
        <li><a href="#"><img src="image/300x350.png" alt="ダミー画像"></a></li>
        <li class="course-name"><a href="#">記念日コース</a></li>
        <li class="course-text"><a href="#">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</a></li>
      </ul>
    </div>
  </div>
</section>
    .course-container{
  display: flex;
  justify-content: space-between;
  font-size: 2rem;
  letter-spacing: 0.06em;
}

.course .section-title{
  margin-bottom: 48px;
}

.course-item img{
  margin-bottom: 24px;
  border-radius: 8px;
}

.course-name{
  text-align: center;
  margin-bottom: 40px;
}

.course-text{
  width: 300px;
}

    コースセクションの作り方

    [ptimeline color=”yellow”]

  • STEP1
    HTMLを書く

    <section class="course">
  <div class="inner">
    <h2 class="section-title">Course</h2>
    <div class="course-container">
      <ul class="course-item">
        <li><a href="#"><img src="image/300x350.png" alt="ダミー画像"></a></li>
        <li class="course-name"><a href="#">和牛お試しコース</a></li>
        <li class="course-text"><a href="#">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</a></li>
      </ul>
    </div>
　　...略
  </div>
</section>
    .course-item img{
  width: 300px; /*画像の幅を300pxに指定*/
}

    長いので省略しましたがあと二つ作成します。
    また画像がデカイので幅を指定しておきます。
    設定した高さを超えてしまったので、はみ出していますがあまり気にしなくておkです。


  • STEP2
    横並びにする

    .course-container{
  display: flex; /*横並びにする*/
  justify-content: space-between; /*両端に配置する*/
  font-size: 2rem; /*文字サイズ*/
  letter-spacing: 0.06em; /*字間*/
}

    端に配置しましたが今一つ中地半端ですね。枠線を引いてやるとわかりやすくなりましてこんな感じになっています。
    これを直すにはテキストの箱のサイズを変えてやれば良さそうです。


  • STEP3
    タイトル、テキスト関連の余白を整える

    .course .section-title{
  margin-bottom: 48px; /*余白*/
}

.course-item img{
  margin-bottom: 24px; /*余白*/
  border-radius: 8px; /*角丸を設定*/
}

.course-name{
  text-align: center; /*文を中央配置*/
  margin-bottom: 40px; /*余白*/
}

.course-text{
  width: 300px; /*幅を設定*/
}

    きれいに収まりました！


    • [/ptimeline]

    参考までにこちらの方法でもできます。

    <section class="course">
  <div class="inner">
    <h2 class="section-title">Course</h2>
    <div class="items">
      <div class="item">
        <a href="#"><img src="image/300x350.png" alt="ダミー画像"></a>
        <p class="course-name"><a href="#">和牛お試しコース</a></p>
        <p class="course-text"><a href="#">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</a></p>
      </div>
      <div class="item">
        <a href="#"><img src="image/300x350.png" alt="ダミー画像"></a>
        <p class="course-name"><a href="#">女子会コース</a></p>
        <p class="course-text"><a href="">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</a></p>
      </div>
      <div class="item">
        <a href="#"><img src="image/300x350.png" alt="ダミー画像"></a>
        <p class="course-name"><a href="#">記念日コース</a></p>
        <p class="course-text"><a href="#">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</a></p>
      </div>
    </div>
  </div>
</section>
    .items{
  display: flex;
  justify-content: space-between;
  font-size: 2rem;
  letter-spacing: 0.06em;
}

.item img{
  width: 300px;
  margin-bottom: 24px;
  border-radius: 8px;
}

.course-name{
  text-align: center;
  margin-bottom: 40px;
}

.course-text{
  width: 300px;
}

    こばゆた
    こばゆた

    このタイプのパターンは数種類あるのでパターンを持っておくと良いと思います

    11.シェフセクション

    こばゆた
    こばゆた

    こちらが完成形です

    <section class="chef">
  <div class="inner">
    <h2 class="section-title">Chef</h2>
    <div class="chef-container">
      <div><img src="image/shef.jpg" alt="シェフの画像"></div>
      <div class="chef-introduction">
        <h3>肉山肉男</h3>
        <p>「ダイエットなんてクソ食らえ！間違えた。肉を食らえ！」が口癖のシェフ。<br>
            見た目とは裏腹に繊細で筋切りの技術には定評がある。<br>
            休みの日は非常しょ…、ペットの子豚を公園で散歩させている。</p>
      </div>
    </div>
  </div>
</section>
    .chef{
  background-color: #912929;
}

.chef .section-title{
  margin-bottom: 110px;
  padding-top: 24px;
  color: #fff;
}

.chef-container img{
  width: 584px;
  height: 340px;
  object-fit: cover;
  margin-right: 32px;
}

.chef-introduction{
  background-color: #fff;
  height: 340px;
  width: 584px;
}

.chef-container{
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}

.chef-introduction h3{
  text-align: center; 
  font-size: 4rem;
  padding: 24px 0 32px; 
  font-weight: normal;
}

.chef-introduction p{
  font-size: 2rem; 
  width: 460px; 
  margin: 0 auto; 
  letter-spacing: 0.06em; 
}

    シェフセクションの作り方

    [ptimeline color=”yellow”]

  • STEP1
    HTMLを書く

    <section class="chef">
  <div class="inner">
    <h2 class="section-title">Chef</h2>
    <div class="chef-container">
      <div><img src="image/shef.jpg" alt="シェフの画像"></div>
      <div class="chef-introduction">
        <h3>肉山肉男</h3>
        <p>「ダイエットなんてクソ食らえ！間違えた。肉を食らえ！」が口癖のシェフ。<br>
            見た目とは裏腹に繊細で筋切りの技術には定評がある。<br>
            休みの日は非常しょ…、ペットの子豚を公園で散歩させている。</p>
      </div>
    </div>
  </div>
</section>

    ちょっと画像がでかいですね(笑)
    それはさておき、こちらも画像とシェフの紹介を横並びにするのでそれぞれ分けて枠組みを作っておきます。


  • STEP2
    画像と紹介部分を作る

    .chef-container img{
  width: 584px; /*幅を設定*/
  height: 340px; /*高さを設定*/
  object-fit: cover; /*画像の比率を設定*/
  margin-right: 32px; /*余白*/
}

.chef-introduction{
  background-color: #fff; /*背景色*/
  height: 340px; /*高さを設定*/
  width: 584px; /*幅を設定*/
}

    CSSに関してはさほど問題はないかと思いますが

    object-fit: cover;

    この一文が気になるところですがこれがあると画像の縦横比を維持したまま画像を表示できます。
    ちなみにobject-fitを使わないと…。わがままbodyになってしまいます。
    またobject-fitについては「Mana」さんの記事がとっても参考になるので一度ご覧ください！

    1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
    画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう...
    www.webcreatorbox.com


  • STEP3
    横並びにする

    .chef-container{
  display: flex; /*横並びにする*/
  justify-content: space-between; /*両端に配置する*/
  align-items: center; /*中央揃えにする*/
}

    毎度お馴染みflex boxです。


  • STEP4
    紹介を完成させる

    .chef-introduction h3{
  text-align: center; /*文章を中央揃えにする*/
  font-size: 4rem; /*文字サイズ*/
  padding: 24px 0 32px; /*余白*/
  font-weight: normal; /*フォントの太さ*/
}

.chef-introduction p{
  font-size: 2rem; /*文字サイズ*/
  width: 460px; /*文章の横幅*/
  margin: 0 auto; /*中央揃えに配置*/
  letter-spacing: 0.06em; /*字間*/
}

    ほとんど完成です


  • STEP5
    タイトルと背景を設定する

    .chef{
  background-color: #912929; /*背景色*/
}

.chef .section-title{
  margin-bottom: 110px; /*余白*/
  padding-top: 24px; /*余白*/
  color: #fff; /*文字色*/
}

    背景色とタイトルの余白を設定して完成です。


    • [/ptimeline]

    12.予約セクション

    こばゆた
    こばゆた

    こちらが完成形です

    <section class="reservation">
  <h2 class="section-title">Reservation</h2>
  <div class="reservation-wrapper">
    <p class="reservation-info">メールの方はこちら</p>
    <label for="name">お名前</label>
    <input type="text" id="name">
    <label for="tell">ご連絡先</label>
    <input type="text" id="tell">
    <label for="content">お問い合わせ内容(人数、コース名、日にちなどをご記入ください)</label>
    <textarea id="content"></textarea>
    <p class="reservation-info">お電話の方はこちら</p>
    <p class="tell"><img src="image/K's Meat Phone-number.png" alt="電話番号のロゴ"></p>
  </div><!--reservation-wrapper-->
</section>
    .reservation-wrapper .tell{
  width: 346px; 
  margin: 0 auto;
}

.reservation-info{
  margin-bottom: 24px;
}

.reservation-wrapper input,.reservation-wrapper textarea{
  width: 100%; 
  margin-bottom: 16px; 
}

.reservation-wrapper input{
  height: 30px; 
}

.reservation-wrapper textarea{
  height: 200px; 
}

.reservation-wrapper{
  width: 892px; 
  margin: 0 auto; 
  margin-top: 34px; 
}

    予約セクションの作り方

    [ptimeline color=”yellow”]

  • STEP1
    HTMLを書く

    <section class="reservation">
  <h2 class="section-title">Reservation</h2>
  <div class="reservation-wrapper">
    <p class="reservation-info">メールの方はこちら</p>
    <label for="name">お名前</label>
    <input type="text" id="name">
    <label for="tell">ご連絡先</label>
    <input type="text" id="tell">
    <label for="content">お問い合わせ内容(人数、コース名、日にちなどをご記入ください)</label>
    <textarea id="content"></textarea>
    <p class="reservation-info">お電話の方はこちら</p>
    <p class="tell"><img src="image/K's Meat Phone-number.png" alt="電話番号のロゴ"></p>
  </div><!--reservation-wrapper-->
</section>
    .reservation-wrapper .tell{
  width: 346px; /*電話番号のロゴの幅を指定*/
}


    「お名前」をクリックすると入力欄にカーソルが移動できると親切なので他のと合わせて紐付けしておきましょう！

    【HTML】フォームの基本タグと使い方
    HTMLのフォームとは何か？入力欄・送信ボタンなどの基本タグの使い方と注意点を、初心者向けにサンプル付きで解説します。
    kbyt-programming.com
    2025年07月23日

    画像をタグで囲む際の注意点などが書かれていますので参考にしてください！

    正しいイメージタグの扱い方をレクチャー｜HI-ROKI
    <img>タグは頻繁に使用されるタグということもあり、その分間違った使い方をよく見ます。 本記事では、<img>タグの取り扱いについて、以下の2点について解説したいと思います。 1. <img>タグをどんなタグで囲うか 2.alt属性には何...
    note.com


  • STEP2
    フォーム部品の成形をする

    .reservation-info{
  margin-bottom: 24px; /*余白*/
}

.reservation-wrapper input,.reservation-wrapper textarea{
  width: 100%; /*横幅を親要素いっぱいにする*/
  margin-bottom: 16px; /*余白*/
}

.reservation-wrapper input{
  height: 30px; /*高さ*/
}

.reservation-wrapper textarea{
  height: 200px; /*高さ*/
}


    親要素(ここではreservation-wrapper)の幅をまだ設定していないため横いっぱいに広がっています。


  • STEP3
    フォームを中央に配置する

    .reservation-wrapper{
  width: 892px; /*横幅を設定*/
  margin: 0 auto; /*中央揃えにする*/
  margin-top: 34px; /*余白*/
}

    だいぶ形になりました。


  • STEP4
    電話番号の画像を中央に配置する

    .reservation-wrapper .tell{
  margin: 0 auto; /*中央揃えにする*/
  width: 346px; /*横幅を設定*/
}

    これで完成です。


    • [/ptimeline]

    13.フッター

    こばゆた
    こばゆた

    こちらが完成形です

    <footer>
  <p>©2020 K's MEAT</p>
</footer>
    footer{
  height: 70px;
  background-color: #912929;
  color: #fff;
}

footer p{
  line-height: 70px;
  text-align: center;
  font-size: 2rem;
  letter-spacing: 0.06em;
}
    フッターの作り方

    [ptimeline color=”yellow”]

  • STEP1
    HTMLを書く

    <footer>
  <p>©2020 K's MEAT</p>
</footer>


  • STEP2
    フッターのスタイリングをする

    footer{
  height: 70px; /*高さ*/
  background-color: #912929; /*背景色*/
  color: #fff; /*文字色*/
}


  • STEP3
    文章を成形して中央配置にする

    footer p{
  line-height: 70px; /*フッターの垂直方向の中心に配置*/
  text-align: center; /*中央揃いに配置*/
  font-size: 2rem; /*文字サイズ*/
  letter-spacing: 0.06em; /*字間*/
}

    完成です！


    • [/ptimeline]

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>K's Meat</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <header>
    <div class="inner header-container">
      <h1><a href="#"><img src="image/header-logo.png" alt="ヘッダーロゴ画像"></a></h1>
      <ul class="header-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Course</a></li>
        <li><a href="#">Chef</a></li>
        <li><a href="#">Reservation</a></li>
      </ul>
    </div>
  </header>

  <main>
    <section class="mv">
      <div class="mv-container">
        <h2>MEET TO MEAT</h2>
        <p>本当に美味い肉に会う</p>
      </div>
    </section>

    <section class="course">
      <div class="inner">
        <h2 class="section-title">Course</h2>
        <div class="course-container">
          <ul class="course-item">
            <li><a href="#"><img src="image/300x350.png" alt="ダミー画像"></a></li>
            <li class="course-name"><a href="#">和牛お試しコース</a></li>
            <li class="course-text"><a href="#">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</a></li>
          </ul>
          <ul class="course-item">
            <li><a href="#"><img src="image/300x350.png" alt="ダミー画像"></a></li>
            <li class="course-name"><a href="#">女子会コース</a></li>
            <li class="course-text"><a href="#">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</a></li>
          </ul>
          <ul class="course-item">
            <li><a href="#"><img src="image/300x350.png" alt="ダミー画像"></a></li>
            <li class="course-name"><a href="#">記念日コース</a></li>
            <li class="course-text"><a href="#">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</a></li>
          </ul>
        </div><!--course-container-->
      </div><!--inner-->
    </section>

    <section class="chef">
      <div class="inner">
        <h2 class="section-title">Chef</h2>
        <div class="chef-container">
          <div><img src="image/shef.jpg" alt="シェフの画像"></div>
          <div class="chef-introduction">
            <h3>肉山肉男</h3>
            <p>「ダイエットなんてクソ食らえ！間違えた。肉を食らえ！」が口癖のシェフ。<br>
                見た目とは裏腹に繊細で筋切りの技術には定評がある。<br>
                休みの日は非常しょ…、ペットの子豚を公園で散歩させている。</p>
          </div><!--chef-introduction-->
        </div><!--chef-container-->
      </div><!--inner-->
    </section>

    <section class="reservation">
      <h2 class="section-title">Reservation</h2>
      <div class="reservation-wrapper">
        <p class="reservation-info">メールの方はこちら</p>
        <label for="name">お名前</label>
        <input type="text" id="name">
        <label for="tell">ご連絡先</label>
        <input type="text" id="tell">
        <label for="content">お問い合わせ内容(人数、コース名、日にちなどをご記入ください)</label>
        <textarea id="content"></textarea>
        <p class="reservation-info">お電話の方はこちら</p>
        <p class="tell"><img src="image/K's Meat Phone-number.png" alt="電話番号のロゴ"></p>
      </div><!--reservation-wrapper-->
    </section>
  </main>

  <footer>
    <p>©2020 K's MEAT</p>
  </footer>
</body>
</html>
    @charset "UTF-8";
/*リセットCSS
----------*/
* {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  list-style: none;
  outline:0;
  box-sizing: border-box;
}

a { 
  color: inherit;
  text-decoration: none;
}

img{
  width:100%;
  vertical-align: bottom;
}

/*共通部分
----------*/
header,section,footer{
  /* background-color: rgba(94, 1, 255, 0.1); */
  /* border: 1px solid rgba(0,0,0,0.1); */
  height: 100px;
}
.inner{
  width: 1200px;
  margin: 0 auto;
  max-width: 100%;
  /* background-color: rgba(241,92,168,0.2); わかりやすさのために色を付けてあります。最後に消します */
}
html{
  font-size: 62.5%;
}

body {
  font-family:  YuMincho, 'Yu Mincho', sans-serif;
  font-size: 1.6em;
}

.section-title{
  font-size: 4rem;
  text-align: center;
  font-weight: normal;
  letter-spacing: 0.06em;
}
.course,.chef,.reservation{
  height: 680px;
}

section{
  margin-bottom: 120px;
}

/*ヘッダー
----------*/
header{
  background-color: rgba(145, 41, 41, 0.5);
  height: 70px;
  width: 100%;
  color: #fff;
  z-index: 1; 
  position: absolute; 
}

header h1{
  width: 300px;
}

.header-container{
  display: flex; 
  justify-content: space-between;
  align-items: center; 
}

.header-nav{
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}

.header-nav li a{
  margin-left: 40px; 
  font-size: 2rem; 
  letter-spacing: 0.06em; 
}


/*メインビジュアル
----------*/
.mv{
  color: #fff;
  height: 870px;
  background: linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.1)), url(../image/肉.jpg) no-repeat center/cover;
}

.mv-container h2{
  font-size: 10rem;
  font-weight: normal; 
  letter-spacing: 0.1em; 
}

.mv-container p{
  font-size: 8.3rem; 
  letter-spacing: 0.01em; 
  line-height: 1.2; 
}

.mv-container{
  text-align: center; 
  width: 980px; 
  margin: 0 auto; 
  padding-top: 360px; 
}

/*コース
----------*/
.course-container{
  display: flex; 
  justify-content: space-between; 
  font-size: 2rem; 
  letter-spacing: 0.06em; 
}

.course .section-title{
  margin-bottom: 48px;
}

.course-item img{
  margin-bottom: 24px;
  border-radius: 8px;
  width: 300px;
}

.course-name{
  text-align: center;
  margin-bottom: 40px;
}

.course-text{
  width: 300px;
} 

/*シェフ
----------*/
.chef{
  background-color: #912929;
}

.chef .section-title{
  margin-bottom: 110px;
  padding-top: 24px;
  color: #fff;
}

.chef-container img{
  width: 584px;
  height: 340px;
  object-fit: cover;
  margin-right: 32px;
}

.chef-introduction{
  background-color: #fff;
  height: 340px;
  width: 584px;
}

.chef-container{
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}

.chef-introduction h3{
  text-align: center; 
  font-size: 4rem;
  padding: 24px 0 32px; 
  font-weight: normal;
}

.chef-introduction p{
  font-size: 2rem; 
  width: 460px; 
  margin: 0 auto; 
  letter-spacing: 0.06em; 
}

/*予約
----------*/
.reservation-wrapper .tell{
  width: 346px; 
  margin: 0 auto;
}

.reservation-info{
  margin-bottom: 24px;
}

.reservation-wrapper input,.reservation-wrapper textarea{
  width: 100%; 
  margin-bottom: 16px; 
}

.reservation-wrapper input{
  height: 30px; 
}

.reservation-wrapper textarea{
  height: 200px; 
}

.reservation-wrapper{
  width: 892px; 
  margin: 0 auto; 
  margin-top: 34px; 
}

/*フッター
----------*/
footer{
  height: 70px; 
  background-color: #912929; 
  color: #fff;
}

footer p{
  line-height: 70px; 
  text-align: center; 
  font-size: 2rem; 
  letter-spacing: 0.06em; 
}
    こばゆた
    こばゆた

    長々とやってきましたがここまで見てくれてありがとうございました

    スポンサーリンク

    広告

    コメント