【デイトラ学習記録】WEB制作コース初級編DAY５ゼロからサイトを作ってみよう①

こんにちは！ピスカ（@pisca_create_yr）です！

只今デイトラWEB制作コース中級編（WEB制作コース開始７３日目）ですが、初級偏の学習記録を振り返って残したいと思います。

ピスカ

管理人ピスカです。

１９９０年大阪市生まれ
3年間エステ、5年間美容皮膚科カウンセラー
その後、保育士資格を取得し３年間保育士として勤務

長男11時間保育園に預けるフルタイムワーキングママ

育休中に在宅ワークを目指してWEBスキル習得中です！

デイトラとは？
WEB制作コース初級編 DAY５ゼロからサイトを作ってみよう①
まとめ

デイトラとは？

筆者は以前少しだけワードプレスでのブログ運営はしておりましたがすぐに挫折し、ほぼWEBスキル0からのスタートです。

まず、HTML、CSS、コーディングって何？のレベルから始めました。

デイトラWEB制作コースはそんな全くの未経験でも初級編だけで月5万のスキルが身に付くという内容の“未経験でも・迷わず・楽しく”学べるオンラインスクールです。

中級、上級レベルになると本業でバリバリやっていけるスキルが身につきそうです♪

【高価】自己投資！オンラインスクールデイトラを選んだ理由

現在育休中なのですが、育休中にWEB制作のフリーランサーを目指してオンラインスクール”デイトラ”でWEB制作コースを受講することにしました。無料で数ある情報を手に入れやすい環境の中で、わざわざお金を払ってオンラインスクールを受講する理由と、たくさんのオンラインスクールの中からデイトラを選んだ理由をまとめました。これからオンラインスクールでの受講を考えている方へ、少しでも参考になれば嬉しいです。

前回はWEB制作コース初級編 DAY１〜４の学習記録と感想をまとめました。

【デイトラ学習記録】WEB制作コース初級編DAY１〜４

こんにちは！ピスカ（@pisca_create_yr）です！只今デイトラWEB制作コース中級編（WEB制作コース開始６９日目）ですが、初級偏の学習記録を振り返って残したいと思います。ピスカ管理人ピスカです。１９...

「ここまではなんとなく理解した」という感じでしたが、実際にサイトを作ってみるととても難しく感じたことを覚えています。

でも完成した時はとても嬉しかったな〜！

今回はデイトラ簡易サイトをレッスン動画を見ながら実際に手を動かして作成します。

WEB制作コース初級編 DAY５ゼロからサイトを作ってみよう①

DAY5 header編の主な内容はこちら

Chromeのデベロッパーツールの使い方
コーディング準備編
headerを作ろう（HTML完成まで）
「clear」の使い方と「class」を細かく付ける理由について
思い通りの見た目にならない時にまず確認するべきポイント６つ
headerの完成！（CSS完成まで）
書いたはずのCSSのクラスが反応しない時の対処法
困ったらまずは「よくある質問」をご覧ください！

Chromeのデベロッパーツールの使い方

WEBページを作る時は、常時Chromeのデベロッパーツール（検証機能）を開いて確認しながらコーディングを進めます。

WEBページの構造を見ることができ、気になるページがあれば、他サイトでもデベロッパーツールでHTMLやCSSや後に学習するJavaScriptを見ることができます。

さらにシュミレーション的に動くので、この要素を外したらどうなるのだろう？と思ったら実際にテストすることもできるのです！

こちらでは動画とおすすめ記事の紹介で

基本的な操作方法
デベロッパーツールでやりたいこと

などを学びます。

コーディング準備

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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の基本の型について動画で解説です。

Emmetによって”!”を入力したら基本の方がズラッと出てくるのですが、最初は何がなんだかわかりませんよね(*´-`)

ですが、準備次第でこの後のコーディングがスムーズにできるようになるので必須の準備です。

レッスン動画ではそれぞれのタグの役割の説明を解説しながら、ファイルや素材を当てはめていきます。

あらかじめダウンロード素材のファイルをダウンロードして、レッスン動画と同じ素材を使って手を動かして学ぶことを推奨されています。

ここからは一回動画を見るだけでは理解できなかったので、１回目は流し見、２回目実際に入力、３回目にノートにまとめる、わからないことがあればまた動画を見直す、を繰り返して進んだため、今までよりも時間が掛かってしまいました。

また他のコーディングにも使いまわせる”reset.css”（どのブラウザでも見え方を一緒にする設定のCSSファイル）も準備してくれているので非常に助かります♪

デイトラ簡易サイトの構造

仕上がったサイトを見てみると。。

私はまず、ヘッダーとかフッターってどこ？から始まったのですが、デイトラ簡易サイトのそれぞれのブロックはこんな感じに分けられています。

まずはダーっとおおまかにHTMLを書いて、だいたいの型を作ってから細かく追加で書いていくとわかりやすいです。

<body>
    <header>
        
    </header>

    <section class="top">

    </section>

    <section class="about section">
        
    </section>

    <section class="course section">
        
    </section>

    <section class="contact section">
        
    </section>

    <footer>

    </footer>
</body>

“top””abouto””course””contact”の部分の<section class=”○○”>のところはDAY６でまとめています♪

【デイトラ学習記録】WEB制作コース初級編DAY６ゼロからサイトを作ってみよう②メインコンテンツ編

デイトラ簡易サイトをつくってみよう！メインコンテンツ編（about,top,course,contact,footer）のHTMLとCSSをまとめました！答え合わせにも使ってください！

そしてbody全体の共通CSSも書いてしまいます。

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

img {
    width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: #082B48;
}

a:hover{
    opacity: 0.7;
}

.container {
    width: 90%;
    max-width: 980px;
    margin: auto;
}
/*floatを止める役割の疑似要素(背景がヘッダーにかからないようにする)*/

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

覚えたポイント

bodyのfont-family 左から順に表示される（見ている人がVerdanaが非対応だったらGeneva、Genevaが非対応だったらTahoma）
bodyのline-height 行間、読みやすい行間で
imgのwidth: 100%; ブラウザの幅に合わせて最大100％に表示
imgのheight: auto; 高さはその画像に合わせて
aのtext-decoration: none; リンクのデコレーションをなしに
a:hoverのopacity: 0.7; リンクの上にカーソルを乗せた時の透過具合
.container containerのclass共通で余白を作って見やすくする
.clear::after floatを止める役割の疑似要素

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

では準備が整ったところで、いよいよheader編です！

動画を見ながらコーディングを進めていきますが、早速難しいです。

ページの中で一番難しいんじゃないですかね！？

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

それぞれのclassがどこに当たっているかはこちら↓

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

headerで登場するfloatとは横並びにするための要素です。

そのまま横並びにすると親要素の高さが０になって下のブロックが浮いて詰まってしまいバランスが悪くなるため、clearという疑似要素を使って対策が必要です。

clearはHTMLと共通CSSに書いていきます。

headerのHTML
<div class="container clear">

共通CSS
.clear::after{
    content: "";
    clear: both;
    display: block;

共通CSSでは.clearというclassに付ける::afterという疑似要素です。

content: “”; afterを使う時のルールで、空要素
clear: both; 先行する左右両方の浮動要素と切り離され、下に移動
display: block; 要素が縦に並んでいくイメージ

ここはつまずきポイントです；；；

筆者も理解するまでにいろんなサイトを読んで勉強しました_φ(･_･

ちなみにdisplay: block;についてはこちらの記事がすごくわかりやすかったです！

【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

CSSの難関「display」プロパティについて初心者でも分かるように丁寧に解説します。inline、block、inline-block、noneとは？違いは？

横並びにする要素はflexboxというものもありますが、まずは基本のfloatから学ぶことを推奨されています。

flexboxについてはDAY6でまとめています！

【デイトラ学習記録】WEB制作コース初級編DAY６ゼロからサイトを作ってみよう②メインコンテンツ編

デイトラ簡易サイトをつくってみよう！メインコンテンツ編（about,top,course,contact,footer）のHTMLとCSSをまとめました！答え合わせにも使ってください！

「class」を細かく付ける理由

レッスン動画の中で「class」を細かく付けることをおすすめされています。

なぜなら大きくclassをつけると後でCSSの修正をする時に大きい範囲でCSSが当たってしまい、細かい修正ができないからです。

class名にには命名規則もありますよ♪

またまとめますね！

headerの完成！（CSS完成まで）

/*------------
header
-------------*/
.header{
    padding: 20px 0;

}

.header-left{
    float: left;
}

.header-title{
    font-size: 24px;
    font-weight: bold;
}

.header-right{
    float: right;
}

.header-nav{

}

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

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

覚えたポイント