Web制作コース初級編５日目（デイトラ）

Web制作コースのお申込みはこちらから

こんにちは！トモです。今日はWeb制作コース初級編5日目の学習内容を備忘録として残していきます。

コーディング準備編

LiveServerを起動する。

[index.htmlについて]
お作法→!＋Tabで、おまじないコードを記述する。
titleタグの中身を記述する。
meta:まで記述して、emmetを使ってdescriptionのcontentを記述する。
ファビコン用のlinkタグを作成し、relをiconにし、hrefにパスを記述する。
linkタグを作成し、reset.cssを読み込む。
linkタグを作成し、style.cssを読み込む。
reset.cssは毎回使用する為、別ファイルにして読み込ませるのがよい。
でないと、毎回style.cssなどに同じcssを記述していくことになる。
reset.cssはstyle.cssの前に読み込ませること。

本格的なコーディング開始の前に①

本格的なコーディング開始の前に②

最初に、いったん落ち着いてどのような構成にするのか考える。
メニューバー、ファーストビュー、デイトラとは、コース一覧、お問い合わせ、フッターの構成
div.headerでheaderタグ、section.top、section.about、section.course、section.contact、div.footerでfooterタグを記述（まずは型を作ってから書き始めること）

headerを作ろう（HTML完成まで）

１．
style.cssにbodyのcolor、font-family(emmet:ff)、line-heightを記述する。

【style.css】
body {
color: #082B48;
font-family: Verdana, Geneva, Tahoma, sans-serif;
line-height: 1.5;
}

２．
imgをやる前にtopの画像を入れてみる。
→top classのsectionタグにimgを入れる。
ただ、ブラウザ幅よりも大きく表示されている状態なので、ブラウザ幅100%で表示させる為に、ブラウザ（親要素）のimgタグで、widthとheightを記述する。

【index.html】
<header>
</header>
<section class="top">
<img src="./img/main-visual.png" alt="">
</section>
<section class="about">
</section>
<section class="cource">
</section>
<section class="contact">
</section>
<footer>
</footer>

【style.css】
img {
width: 100%;
height: auto;
}

aタグのアンダーバーをtext-decorationで削除し、色も統一したいのでcolorを設定する。

【style.css】
a {
text-decoration: none;
color: #082B48;
}

リンクのホバーしたときの動きを設定する為に（疑似要素）、a:hoverでopacityを記述する。

【style.css】
a:hover {
opacity: 0.7;
}

コンテンツの幅を中心にそろえる為に、.containerクラスにwidth、max-width、marginを設定
最大幅はある程度のサイズで指定しておくと見やすいサイトになる。

【style.css】
.container {
width: 90%;
max-width: 980px;
margin: auto;
}

ここまでで、共通パーツの作成はできたので、htmlでheaderを作成していく

ただ、headerが一番の鬼門となる（難しい）！

div.containerでcontainerクラスを作成。
コンテンツが横並びなので、float又はflexboxを使用する。
左側にfloatさせる為、containerクラスの中にheader-floatクラスを作成し、その中にタイトルを記入。

次に右側にfloatさせる用のheader-rightクラスを作成し、その中のテキストを記述。
（関係しているタグのクラス名を付けるときは「親-(ハイフン)名」の形で記述）
今回は3つテキストがあるのでemmetを使ってリストを作成し、その中のテキストを記述。
li.header-nav-item*3>a

【index.html】
<header>
<div class="container">
<div class="header-left">
<h1>30DAYSトライアル</h1>
</div>
<div class="header-right">
<ul class="header-nav">
<li class="header-nav-item"><a href="#">デイトラとは</a></li>
<li class="header-nav-item"><a href="#">コース一覧</a></li>
<li class="header-nav-item"><a href="#">お問い合わせ</a></li>
</ul>
</div>
</div>
</header>
<section class="top">
<img src="./img/main-visual.png" alt="">
</section>
<section class="about">
</section>
<section class="cource">
</section>
<section class="contact">
</section>
<footer>
</footer>

「clear」の使い方と「class」を細かく付ける理由について

まずはタイトルとメニュー部分を横並びにしていく。それにはflexかfloatを使用する。

今回はfloatを使用。header-leftとheader-rightクラスに対応するcssを作成。

【style.css】

floatの効果を確かめる為、一旦topの画像を消して、背景色を付けてみる。

【style.css】

するとtopのところがheaderに被ってしまう。

floatは浮くという意味なので、そのfloatプロパティを付けた要素はブロックの組み立てから浮いてしまう。浮いた分のスペースにその下にあった分のブロックが回り込んできてしまう。なので、これをクリアする為にclearプロパティを使う。

【style.css】

ここで、clearクラスを作り（clear:both）、header-leftとheader-rightの下にdiv.clearを
記述。

【index.html】
<header>
<div class="container">
<div class="header-left">
<h1>30DAYSトライアル</h1>
</div>
<div class="header-right">
<ul class="header-nav">
<li class="header-nav-item"><a href="#">デイトラとは</a></li>
<li class="header-nav-item"><a href="#">コース一覧</a></li>
<li class="header-nav-item"><a href="#">お問い合わせ</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</header>

bothは両方という意味なので、leftだろうがrightだろうが両方ストッパーになってくれる。

しかし、これは一番原始的な方法で、あまり現代だとイケてない書き方。

div.clearはテキストを表示させるわけでもないし、ただ「いる」だけみたいな…

もしも、floatさせるところがいっぱいあったら、何も使われていない謎のタグが多数記述されて、可読性が低下する。

したがって、ここで疑似要素を使う。clearというクラスをつけた要素のあとに、clear:bothをする(.clear:after)。afterやbeforeを付ける際のルールとして、content:""、clear:both、display:blockを記述。

【style.css】

これをどこに使うかというと、親要素のcontainerの横にclearを付けてあげる。
div.containerで囲っている部分の「後に」という意味なのでheader-leftとheader-rightの後に効果があらわれる。

【index.html】
<header>
<div class="container clear">
<div class="header-left">
<h1>30DAYSトライアル</h1>
</div>
<div class="header-right">
<ul class="header-nav">
<li class="header-nav-item"><a href="#">デイトラとは</a></li>
<li class="header-nav-item"><a href="#">コース一覧</a></li>
<li class="header-nav-item"><a href="#">お問い合わせ</a></li>
</ul>
</div>
</div>
</header>

※検証で見るとわかりやすく、clearのdivが終わる直前にafterがあり、このafterにclear:bothがついている。

これでhtmlを汚すことなく（邪魔することなく）cssだけで、floatをclearできるようになる。

topをimgに戻す。(一時的に記述した.topを削除)

h1にheader-titleクラスを作成。
header-left h1{}と記述してもいいかと思われるかもしれないが、基本的にhtmlはできるだけclassをつけたほうが良い。

【index.html】
<header>
<div class="container clear">
<div class="header-left">
<h1 class="header-title">30DAYSトライアル</h1>
</div>
<div class="header-right">
<ul class="header-nav">
<li class="header-nav-item"><a href="#">デイトラとは</a></li>
<li class="header-nav-item"><a href="#">コース一覧</a></li>
<li class="header-nav-item"><a href="#">お問い合わせ</a></li>
</ul>
</div>
</div>
</header>

もしも、header-rightの中の要素ulにclassがなかったとしたら、cssをリストにあてたいとなったときに、.header-right ul{}、.header-right ul li{}と書くと保守性が悪い。

もしも、header-rightの名前をheader-menuに変えようと思ったときにheader-rightの名前の部分を全部変えないといけなくなる。なので、classはできるだけ名前をひとつひとつ付けてあげるのがよい。

header-navとheader-nav-itemのclassを作成

【style.css】

header完成！

続けて、メニューを作っていく。

header-nav-itemをfloatさせるので、その親クラスheader-navにclearクラスをつけておく。

【index.html】
<header>
<div class="container clear">
<div class="header-left">
<h1 class="header-title">30DAYSトライアル</h1>
</div>
<div class="header-right">
<ul class="header-nav clear">
<li class="header-nav-item"><a href="#">デイトラとは</a></li>
<li class="header-nav-item"><a href="#">コース一覧</a></li>
<li class="header-nav-item"><a href="#">お問い合わせ</a></li>
</ul>
</div>
</div>
</header>

.header-nav-itemを記述。又、文字の間隔も欲しいので、左側にマージンを入れる。margin-left:50px;

【style.css】

あとはheaderにパディングを入れる。header{padding:20px 0;}

【style.css】

h1タグとaタグとで表示されている高さが若干違うので、
(30DAYSトライアルが高さ36ピクセルに対して、navの高さが24ピクセルしかない)h1の方に高さをそろえる必要がある。
※当分かわらないやつは直接タグを指定してしまってもよい。

【style.css】

Web制作コースのお申込みはこちらから

以上、Web制作コース初級編5日目の内容でした。