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

チャッピー

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

こばゆた

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

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

きなこ

でもどうやってやるの？

こばゆた

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

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

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

1.今回作るサイト
2.HTMLファイルと画像フォルダを作る
3.headタグ内に情報を書く
4.CSSファイルを作る
5.リセットCSSを書く
6.グループ分けをする
7.共通設定を探す
8.ヘッダー
9.メインビジュアル
10.コースセクション
11.シェフセクション
12.予約セクション
13.フッター

1.今回作るサイト

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

こばゆた

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

データはこちらから

K’s Meat ダウンロード

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

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

windows .verを見る

フォルダーの読み込み方

STEP1
VS Codeを起動する
起動するとこのような画面が出てきます。
STEP2
左のサイドバーの一番上のマークをクリック
STEP3
ウインドウが出てきたら「フォルダーを開く」をクリック
STEP4
フォルダーを選択して開く

Mac .verを見る

フォルダーの読み込み方

STEP1
VS Codeを起動する
起動するとこのような画面が出てきます。
STEP2
左のサイドバーの一番上のマークをクリック
STEP3
ウインドウが出てきたら「フォルダーを開く」をクリック
STEP4
フォルダーを選択して開く
↑ちなみに左下の「新規フォルダ」からでもフォルダは作成できます

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

HTMLファイルの作り方

STEP1
エディターを開いてフォルダーを読み込んだら「新しいファイル」を選択
STEP2
ファイル名を入力する
目次となるページには”index.html”と付けます
STEP3
enterを押せば完成

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

こばゆた

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

詳しくはコチラ↓

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

こんな感じになります。

こばゆた

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

詳しくはコチラ↓

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”…はレスポンシブの時に使うものなのでとりあえず今回は無視で大丈夫です。

詳しくはコチラ↓

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">

詳しくはコチラ↓

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;
}

詳しくはコチラ↓

6.グループ分けをする

こばゆた

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

詳しくはコチラ↓

こばゆた

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

ちなみに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>

CSSは色分けなどなので隠しておきます〜

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制

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を何回も書いてるの？

こばゆた

基本的にブラウザのデフォルトのfont-sizeが16pxなのでhtmlのfont-sizeを62.5%に設定することで16×0.65の10pxになります
bodyのfont-sizeを1.6emと設定する事で結果的に全体のfont-sizeが16pxになります
その後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.ヘッダー

こばゆた

こちらが完成形です

HTML & CSSを表示する

<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; 
}

ヘッダーの作り方

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を使って横並びにします。

【CSS】flexboxの基本と主軸の方向を決めるflex-direction【flexbox】
こばゆた今回から数回に分けてflexboxについて学習していくよー！きなこflexboxってなぁに？何ができるの？チャッピーまた新しい用語が…💦こばゆた説明するより例を見てもらう方がわかりやすいんだけど、flexboxを使うと下の図のように...
kbyt-programming.com
2021年05月20日

【CSS】主軸方向の位置を決めるjustify-contentと交差軸方向の位置を決めるalign-items【flexbox】
こばゆた今回はflexboxにおいての主軸方向の並びと交差軸方向の並びについて解説しますチャッピー主軸と交差軸が大事って言ってたよねこばゆたそうだね前回横並びにすることを学んだけど今回はその並んだ子要素を「どう動かすか」を見ていこうと思いま...
kbyt-programming.com
2021年05月20日

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

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で横並びにし、リンクのスタイルを付けて完成です。

9.メインビジュアル

こばゆた

こちらが完成形です

HTML & CSSを表示する

<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; 
}

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

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
2021年12月04日

どちらでやっても結果は同じです。
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
2021年12月05日

本当にうすく幕を貼る事で文字がくっきりと浮き上がって見やすくなったと思います。
またこれ以外に擬似要素を使ってもできますがここでは割愛します。
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
2021年12月12日

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

10.コースセクション

こばゆた

こちらが完成形です

HTML & CSSを表示する

<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;
}

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

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; /*幅を設定*/
}

きれいに収まりました！

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

HTML & CSSを見る

<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.シェフセクション

こばゆた

こちらが完成形です

HTML & CSSを表示する

<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; 
}

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

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; /*文字色*/
}

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

12.予約セクション

こばゆた

こちらが完成形です

HTML & CSSを表示する

<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; 
}

予約セクションの作り方

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>
</section>
```
```
.reservation-wrapper .tell{
  width: 346px; /*電話番号のロゴの幅を指定*/
}
```
「お名前」をクリックすると入力欄にカーソルが移動できると親切なので他のと合わせて紐付けしておきましょう！

【初心者向け】Webサイトにおけるフォーム部品タグの使い方と種類【HTML】
今やWebサイトには欠かせないフォーム部品について解説していきます.
kbyt-programming.com
2021年10月24日

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

正しいイメージタグの扱い方をレクチャー｜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; /*横幅を設定*/
}

これで完成です。

13.フッター

こばゆた

こちらが完成形です

HTML & CSSを表示する

<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;
}

フッターの作り方

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; /*字間*/
}

完成です！

完成したもののコードはコチラ

<!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; 
}

こばゆた

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

1.今回作るサイト

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

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

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

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

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

4.CSSファイルを作る

5.リセットCSSを書く

6.グループ分けをする

7.共通設定を探す

7-1.インナー

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

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

8.ヘッダー

9.メインビジュアル

10.コースセクション

11.シェフセクション

12.予約セクション

13.フッター

広告

コメント