今日は二日目。昨日の記事の続きになります。
今日は昨日作ったヘッダーの下にメインビジュアルを挿入していきます。
引き続き試行錯誤しながら完成形を目指しましょう！
目次
フルスクリーンページの作成 （本日のゴール）
今日到達する目標はこちらです。
いかがでしょう？一気にデザインになりわくわくしませんか？
一緒に頑張っていきましょう。
HTMLの準備
昨日作成したものの<body>に<article>を加えていきます。
表示させる文字は、の以下3項目。
- 見出しの「Cake me Away」
- 挿入文で「おいしいケーキで日常を忘れて楽しいひとときをすごしましょう」
- 最後にメニューリンクの「メニューを見る」
コード・表示は以下の通りです。
<article>
<h2>Cake Me Away</h2>
<p>おいしいケーキで日常を忘れて、楽しいひとときを過ごしましょう</p>
<a class=”button” href=”menu.html”>メニューを見る</a>
</article>
ここまでは簡単ですね。
次からはCSSでデザインを整えていきます。
CSSコーディング
文字の中央寄せとリンク色変更
次は文字を中央に配置し、リンク色を変更しましょう。
①article{text-align: center;}
②.button{padding: 10px 10px;margin-top: 500px;color: rgb(44, 43, 43);}
①がテキストの中央配置、②がボタンの追加です。
上記になります。
背景色がついておらずわかりませんでしたが、ヘッダーのずれがわかりましたのでそちらも修正します。
ヘッダーの位置調整（コンテナ要素の文字を両端に配置）
現状どういう配置になっているか理解するためにヘッダーに色を付けてみます。
/*header*/
.logo{width: 5%;}
.listnone{list-style: none; display: flex;gap: 20px;}
.headers{display: flex;align-items: flex-end;margin: 0 auto;background-color: aqua;}
※赤字追加
flexで配置したコンテナ要素２つ（ロゴ＋ABC Cake、menu+contact)が連続して並んでおり、それぞれが左端ぞろいに配置されていることがわかります。
menu+contactの位置が右端に来れば目標に近づくので、追加しましょう。
.headers{display: flex;align-items: flex-end;margin: 0 auto;background-color: aqua;justify-content: space-between}
両サイドに空欄があると見栄えがよくなるので、設定していきましょう。
.headers{display: flex;align-items: flex-end;margin: 0 auto;background-color: aqua;justify-content: space-between;padding: 3%;}
これで配置はOKなので、わかりやすさで塗っていた背景色を消します。
.headers{display: flex;align-items: flex-end;margin: 0 auto;justify-content: space-between;padding: 3%;｝
これで文字レイアウトはOKです。
メインビジュアルの挿入（背景画像の挿入）
次に背景画像を挿入します。
headerとarticle両方の背景に１つの画像を設置したいので、<header><article>をひとくくりにするIDをHTMLで定義します。
<body>
<div id=”top”>
<header class=”headers“>
<h1><img class=”logo” src=”logo.jpg”>ABC Cake</h1>
<nav>
<ul class=”listnone”>
<li>menu</li>
<li>contact</li>
</ul>
</nav>
</header>
<article>
<h2>Cake Me Away</h2>
<p>おいしいケーキで日常を忘れて、楽しいひとときを過ごしましょう</p>
<a class=”button” href=”menu.html”>メニューを見る</a>
</article>
</div>
</body>
これで準備は完了です。
次に背景を設定し、大きさの設定をしていきます。
#top{①background-image: url(top.jpg);
②background-size: cover;
③width: 100%;height: 100vh;} ※vh:viewport height 高さがブラウザサイズの100%
①背景画像の挿入
画像左上の部分だけが拡大して表示されており、見切れてしまっていますので、画面サイズに表示されるように調整します。
②画面全体への表示に拡大
これでも文字が入っている部分までしか表示がされていません。
画像全体が表示されるように定義します。
③画像全体が表示されるように調整
これで大枠は完成、次はディテールを修正していきます。
フォント調整、文字色調整など
最後は全体をよりスタイリッシュに見えるように文字のフォントと文字色設定を行います。
全体に対しての設定になるので、bodyの部分に対してCSSコードを記載します。
今回は一気に行きますが、フォントをTimes New Roman、色をグレーよりのものに変更します。
/*共通*/
body{
font-family: ‘Times New Roman’, Times, serif;
color:rgb(44, 43, 43);}
これで完成です。
まとめ
いかがだったでしょうか？
このサイトなら訪れてメニューボタンを押したくなりますね。
もっとこだわれるポイントがあるので、ぜひいろいろ試してみてください。
順番にとらわれず１つ１つ埋めていくイメージを持って頂けたら嬉しいです。
