【DAY1.】30DAYSトライアル1日目をわかりやすく解説

おはこんばにちは、ミヤビです。

今回は、＃30DAYSトライアルのDAY1.について解説します。

DAY1.『Progate HTML & CSS 初級編（４章まで）』
まずはオンラインプログラミング学習サイト『Progate』( https://t.co/2CJ1eEhyiD )でコーディング（HTML・CSSでのライティング作業）の基礎を学びましょう！
DAY1は、初級編の４章まで終わらせてください💻#30DAYSトライアル pic.twitter.com/63TyLBmtZK
— ショーヘー@Webエンジニア (@showheyohtaki) January 7, 2019

ここで挫折はあり得ないです。

ゲーム感覚で学べるので、サクッといきましょう。

✔︎本記事の内容

DAY1.『Progate HTML & CSS 初級編（4章まで）』の解説

✔︎30DAYSトライアル1stの最終目標

月5万を稼ぐスキルを目指す
未経験からWEB系エンジニアの転職を目指す
未経験からWEB系ノマドエンジニアを目指す

プログラミング学習サイトで最もオススメする1つであるProgateを利用します。

こんな感じです。

左画面の指示に従い、画面中央のエディタにコードを打ち込むと、右画面にプレビューとして表示されます。

ヒントやエラーを教えてくれるので、初心者にはとっつきやすいです。

Progateの内容自体は１週間程度で終わるので、たった1,000円課金すれば良いです。

プログラミングを独学で学習して、人生を豊かにしましょう。

Progateを始めよう

【DAY1. 】Progate HTML & CSS初級編（第４章まで）を解説

完全初心者でも、2時間あれば終了します。

STEP1:HTMLの基本を理解しよう

HTMLはいわば骨組みであり、タグ付けを行います。

タグとは「<>〜</>」です。

たとえば、こんな感じ。

<h1>ここにh1見出しを入力します</h1>
<p>ここに文章を入力します</p>
<a href="ここにurl">ここにurlのタイトル</a>
<img src="ここに画像のurl">

タグで囲むもの、囲まないものがあります。

見出し、段落、リンク先、画像などをHTMLで入力します。

リストを理解しよう

リストとは、ざっくりいえば箇条書きです。

<ul>要素と<ol>要素がありますが、違いは箇条書きの先頭に黒点が付くか数字が付くかの違いです。

<ul>
  <li>ここにテキストを入力します</li>
  <li>ここにテキストを入力します</li>
  <li>ここにテキストを入力します</li>
</ul>

下記のように表示されます。

ここにテキストを入力します
ここにテキストを入力します
ここにテキストを入力します

<ul>は黒点、<ol>は数字と覚えましょう。

STEP2:CSSの基本を理解しよう

CSSとはHTMLにデザインを施すことです。

要は、「どこの」「何を」「どうする」を入力します。

<!-- h1の色を赤に、背景を#fffに -->
h1 {
color: red;
background-color: #fff;
}

<!-- pのフォントサイズを20pxに、文字の種類をserifに -->
p {
font-size: 20px;
font-family: serif;
}

<!-- imgの幅を500pxに、高さを400pxに -->
img {
width: 500px;
height: 400px;
}

こんな感じでCSSを書きます。

STEP３：HTMLのレイアウトを作ろう

HTMLのレイアウトを決めるには、ヘッダー、メイン、フッターのようにまず構成を決めましょう。

ここでdivタグを使います。

<div class="header">
<!--ここにheaderコンテンツ -->
</div>

<div class="main">
<!--ここにmainコンテンツ -->
</div>

<div class="footer">
<!--ここにfooterコンテンツ -->
</div>

class名を指定する

<!-- mainクラス  -->
<div class="main">
<!-- mainクラスの中のcopy-containerクラス -->
  <div class="copy-container">
  <h1>HELLO WORLD<span>.</span></h1> 
  </div>
</div>

.main {
  padding: 100px 80px;
}
.copy-container h1 {
font-size:　140px;
}
.copy-container span {
color:##ff4a4a;
}

class名を決めるには下記を参考にどうぞ。

CSS設計にはBEMという命名規則があってですね🗒
僕も全然ちゃんと守ってないですがw
ただ基本を知ってるとclass名決めが楽になるのはもちろん、Sass書くときにすごく楽なので意識はしたほうがいいです👍
👇基礎知識https://t.co/Q5Tp7s1DZP
👇これがいいと思うhttps://t.co/HuQZm2NFPR pic.twitter.com/RhFXGQCkqd
— ショーヘー@Webエンジニア (@showheyohtaki) October 8, 2019

STEP4:ヘッダーを作ろう

WEBサイトの頭の部分です。

サイトロゴやナビゲーションメニューが配置されます。

floatを理解しよう

floatプロパティは、要素を横並びにしたい時に使います。

floatとは、「浮かせる」といった配置方法で、ちょっとイメージがしづらいです。

例えば、<li>要素に対してfloat: leftを指定すると、縦並びから横並びになります。

HTMLでは、基本的に上から下に表示されます。

<ul>
  <li>リスト１</li>
  <li>リスト２</li>
  <li>リスト３</li>
</ul>

・リスト１
・リスト２
・リスト３

li {
list-style: none;　<!-- 先頭の黒点を消すよ  -->
float: left;
}

リスト１リスト２リスト３

浮くイメージが湧きますでしょうか。

HTMLでは、ブロックが上から下に積み重なりますが、floatで要素を浮かせることで、そのブロックを横に移動させるといった感じです。

ちづみさんがfloatの概念を分かりやすい図を使って説明してくれてるので、是非参考にして下さい。

✅なくそう！floatわけわからん！の壁！
html、css初心者泣かせ(自分も泣いた)のfloatについて図解しました。#100DaysOfCode #30DAYSトライアル pic.twitter.com/L2Tm4WMmBr
— ちづみ (@098ra0209) January 16, 2019