Webデザイン・マーケティング課 授業17日目
1〜3時間目 HTML5・CSS3
オリジナル教材
今日は、オリジナル教材のヘッダー、キービジュアル、スクロールのエリアを作ります。
■ページ全体に渡る共通のcss設定
css
/*=========================
共通設定・汎用クラス
=========================*/
body {
font-size: 16px;
color: #333;
line-height: 2;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
a {
text-decoration: none;
color: #f77237;
}
a:hover {
opacity: 0.6;
}
.inner {
width: 1000px;
margin-left: auto;
margin-right: auto;
}bodyに対して、文字の設定をしています。とりあえずまだまだ序盤なので、font-sizeはpxで指定しちゃいます。
.innerには、横幅を1000pxで抑えて中央揃えにする処理を書いています。
■ヘッダーの作成
html
<header>
<div class="inner">
<h1>
<a href="#">
<img src="img/logo.png" alt="洋菓子店CHALON">
</a>
</h1>
<nav>
<ul>
<li><a href="#">当店について</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">お菓子教室について</a></li>
</ul>
</nav>
</div>
</header>css
/*=========================
ヘッダー
=========================*/
header {
padding-top: 20px;
padding-bottom: 20px;
}
header .inner {
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 a {
display: block;
}
header nav ul {
list-style: none;
padding: 0;
display: flex;
}
header nav ul li {
margin-left: 20px;
}
要素を横並びにする時の基本的な考え方は、「横並びにしたいものをくくっているタグ」を見つけること。
今回のHTMLは、ロゴが入っているh1タグと、ナビタグを横並びにしたいから（上図の赤線のところ）、青の線のところにdisplay:flexを入れる。（上図の青い線のところ）。
今回は、青の線の場所が、headerの中の.innerなので、街灯の箇所にdisplay:flexを入れる。
また、水平方向左右に振りたい（ロゴは左、ナビは右）ので、justify-contentにはspace-betweenを、縦方向は真ん中に揃えたいのでalign-items:centerに設定する。
header .inner {
display: flex;
justify-content: space-between;
align-items: center;
}
要素を横並びにする方法は色々あるが、ひとまずこの方法を何度も何度も書いて覚えてもらう。
次に、ナビの一つ一つの項目を考える。
上図の黄色の線のところ（ナビの一つ一つ）を横並びにしたいので、それをくくっているulタグにdisplay:flexを入れる。navタグだとうまく動かない（横並びにしたいのはあくまでliだから）ので、ちょっと注意。
header nav ul {
list-style: none;
padding: 0;
display: flex;
}
あとは、所々余白などの設定をすればOK。
■キービジュアル
html
<div class="key">
<p>
美味しいケーキを<br>
一人でも多くのお客様に<br>
召し上がっていただきたい<br>
<span>それがCHALONの想いです</span>
</p>
</div>css
.key {
background-image: url(../img/key2.jpg);
background-size: cover;
background-position: center center;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 30px;
}
.key p {
background-color: rgba(247, 114, 55, 0.5);
color: #fff;
text-align: center;
line-height: 1.5;
font-size: 41px;
padding: 41px;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.key p span {
font-size: 26px;
}
まず、背景に画像をbackground-size:coverで配置する。この際、画面幅に応じて左右か上下のどちらかがトリミングされることになるので、写真選びには注意する。（被写体が端っこの方にある画像は使わない）
そして、今回のポイントは、中央の文字をどうやって縦方向中央に持ってくるか。
htmlは、横方向に中央揃えは簡単だけれど、ある高さの中で中央に揃えるのは、何かしら小技を使わないと出来ない。
今回はalign:items-centerを使って縦方向中央にしたい。ですが、align-items:centerは、flexを使わないといけないので、
.key {
略
height: 600px;
display: flex;
align-items: center;
justify-content: center;
略
}
こんな感じの記述になる。
今回のdisplay:flexは、要素を横にするために入れているわけじゃなく（.keyuの中にはpタグが一つしかないのでそもそも横にする対象がない）、height:600pxの中で高さを真ん中（align-items:center）にするためにある。
あとは、水平方向の位置もjustify-content: center;で中央にしている。
文字の大きさは、大きい方が41px、小さい方が26pxにしている。
この数字は、bodyタグの文字の大きさを16pxと設定したので、黄金比に習って1.6をかけた数字の近似値を取っている。
16 x 1.6 = 25.6 近似値をとって26px
25.6 X 1.6 = 40.96 近似値をとって41px
■スクロール
矢印のアイコンは、googleのアイコンフォントを使って表示する。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
公式サイトのデベロッパーズガイドより、上記のコードをコピペする。
次に、使いたいアイコンを、
このページから選びます。
なぜかよくわかっていなにのだが、上部のFilledのタブをクリックしないとiconが表示されないことが多い。。。なぜ。。。
html
<div class="scroll">
<p>
<span class="material-icons">
expand_more
</span>
</p>
<p>scroll</p>
</div>
css
/*=========================
scroll
=========================*/
.scroll {
text-align: center;
line-height: 1;
color: #666;
}
.scroll span {
border: 1px solid #666;
border-radius: 50%;
padding: 10px;
}
cssはシンプルで、中央揃えにするのと、border-radiusで、枠線を丸にしているだけ。
■まとめ
少しづつhtmlやcssに慣れてきたのか、スムーズに進むようになってきた。
ひとまず要素を横並びにする方法は、flexを主体に何度も行って慣れて頂こう。
この記事が気に入ったらサポートをしてみませんか？