Web制作コース初級編5日目(デイトラ)

こんにちは!トモです。今日は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の前に読み込ませること。

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

<!DOCTYPE html>
<!-- ↑ドキュメントタイプの宣言 -->
 
<!-- langを指定して「日本語のサイト」であることを明示します -->
<html lang="ja">
<head>
    <!-- 文字コードはUTF-8を指定します -->
    <meta charset="UTF-8">
    <!-- 要確認 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- スマホやタブレットでも綺麗に表示する「レスポンシブ表示」のための記述です。メディアクエリを使う際に必要なので忘れずに! -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- サイトのアイコンを設定します。このアイコンがタブに表示されます -->
    <link rel="icon" href="favicon.ico">
    <!-- サイトのタイトルを記述します。タブや検索結果に表示されるタイトルにはこの内容が表示されます。-->
    <title>初めてのLP</title>
    <!-- サイトの概要を記述します。検索結果に表示される説明文には、この内容が表示されます。-->
    <meta name="description" content="デスクリプションです">
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
</html>

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

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

【メモ】
「デザインカンプ」とはデザイン完成品の見本のこと。

headerを作ろう(HTML完成まで)

【メモ】
・通常style.cssにサイト全体でよく使うクラス及びindex.htmlざっと全体を書き、各ブロックにあてるcssを書く
・しかし、初心者でhtmlを書ききってからcssをあてるのは難しいので、ポイントポイントでcssをあてていく
・bodyに共通のプロパティをあてていく

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

2.
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】

/*======================================
header
=======================================*/
.header-left {
    float: left;
}

.header-right {
    float: right;
}
 

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

【style.css】

/*======================================
header
=======================================*/
.top{
  background-color: lightblue;
  height 400;
}
 

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

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

【style.css】

.clear {
    clear: both;
}
 

ここで、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】

.clear::after {
    content: "";
    clear: both;
    display: block;
}
 

これをどこに使うかというと、親要素の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 {

}
.header-nav-item {

}
 

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-nav {

}
.header-nav-item {
    float: left;
    margin-left: 50px;
}
 

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

【style.css】

/*======================================
header
=======================================*/
header {
    padding: 20px 0;
}
 

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

【style.css】

/*======================================
header
=======================================*/
.header-nav-item a {
    font-size: 15px;
    font-weight: 600;
    line-height: 36px;
}
 

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