チャッピー
ひと通りHTMLとCSSを学習したらどうするの？
こばゆた
模写と呼ばれるWebサイトを真似るという勉強法が良いのかな
今まで学習したコードが実際にどう使われているかわかるしね
きなこ
でもどうやってやるの？
こばゆた
では今回は模写を実際にやってみましょう！
それほど難しくないのですが、とても長いので頑張りましょう(笑)
最後に今回はレスポンシブやリンクボタンは設定しておりませんのでご了承ください
1.今回作るサイト
模写用に架空のWebページを作りました。
こばゆた
よくあるパターンのものだと思います
データはこちらから
2.HTMLファイルと画像フォルダを作る
2-1.フォルダの作成と読み込み
フォルダーの読み込み方
- STEP1VS Codeを起動する起動するとこのような画面が出てきます。
- STEP2左のサイドバーの一番上のマークをクリック
- STEP3ウインドウが出てきたら「フォルダーを開く」をクリック
- STEP4フォルダーを選択して開く
フォルダーの読み込み方
- STEP1VS Codeを起動する起動するとこのような画面が出てきます。
- STEP2左のサイドバーの一番上のマークをクリック
- STEP3ウインドウが出てきたら「フォルダーを開く」をクリック
- STEP4フォルダーを選択して開く
↑ちなみに左下の「新規フォルダ」からでもフォルダは作成できます
2-2.HTMLファイルの作成
HTMLファイルの作り方
- STEP1エディターを開いてフォルダーを読み込んだら「新しいファイル」を選択
- STEP2ファイル名を入力する
目次となるページには”index.html”と付けます - STEP3enterを押せば完成
また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>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を何回も書いてるの？
こばゆた
- 基本的にブラウザのデフォルトの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.ヘッダー
こばゆた
こちらが完成形です
<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;
}ヘッダーの作り方
- STEP1HTMLを書く
<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を使って横並びにします。
ロゴとナビが横並びになり両端に配置されました。 - 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.メインビジュアル
こばゆた
こちらが完成形です
<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;
}メインビジュアルの作り方
- STEP1HTMLを書く
<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; }
どちらでやっても結果は同じです。 - 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; }詳しくはコチラ↓
本当にうすく幕を貼る事で文字がくっきりと浮き上がって見やすくなったと思います。
またこれ以外に擬似要素を使ってもできますがここでは割愛します。 - 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も加えて完成です。
opacityを使うと全体に適用されて文字色まで薄くなってしまうので注意です。
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;
}コースセクションの作り方
- STEP1HTMLを書く
<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; /*幅を設定*/ }
きれいに収まりました！
参考までにこちらの方法でもできます。
<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;
}シェフセクションの作り方
- STEP1HTMLを書く
<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.予約セクション
こばゆた
こちらが完成形です
<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;
}予約セクションの作り方
- STEP1HTMLを書く
<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; /*電話番号のロゴの幅を指定*/ }
「お名前」をクリックすると入力欄にカーソルが移動できると親切なので他のと合わせて紐付けしておきましょう！画像をタグで囲む際の注意点などが書かれていますので参考にしてください！
- 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.フッター
こばゆた
こちらが完成形です
<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;
}フッターの作り方
- STEP1HTMLを書く
<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;
}
こばゆた
長々とやってきましたがここまで見てくれてありがとうございました
コメント