おはこんばにちは、ミヤビです。
今回は、#30DAYSトライアル のDAY1.について解説します。
DAY1.『Progate HTML & CSS 初級編(4章まで)』
まずはオンラインプログラミング学習サイト『Progate』( https://t.co/2CJ1eEhyiD )でコーディング(HTML・CSSでのライティング作業)の基礎を学びましょう!DAY1は、初級編の4章まで終わらせてください💻#30DAYSトライアル pic.twitter.com/63TyLBmtZK
— ショーヘー@Webエンジニア (@showheyohtaki) January 7, 2019
ここで挫折はあり得ないです。
ゲーム感覚で学べるので、サクッといきましょう。
✔︎本記事の内容
- DAY1.『Progate HTML & CSS 初級編(4章まで)』の解説
✔︎30DAYSトライアル1stの最終目標
- 月5万を稼ぐスキルを目指す
- 未経験からWEB系エンジニアの転職を目指す
- 未経験からWEB系ノマドエンジニアを目指す
プログラミング学習サイトで最もオススメする1つであるProgateを利用します。
こんな感じです。
左画面の指示に従い、画面中央のエディタにコードを打ち込むと、右画面にプレビューとして表示されます。
ヒントやエラーを教えてくれるので、初心者にはとっつきやすいです。
Progateの内容自体は1週間程度で終わるので、たった1,000円課金すれば良いです。
プログラミングを独学で学習して、人生を豊かにしましょう。
【DAY1. 】Progate HTML & CSS初級編(第4章まで)を解説
完全初心者でも、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を書きます。
STEP3: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/HuQZm2NFPR pic.twitter.com/RhFXGQCkqd
— ショーヘー@Webエンジニア (@showheyohtaki) October 8, 2019
STEP4:ヘッダーを作ろう
WEBサイトの頭の部分です。
サイトロゴやナビゲーションメニューが配置されます。
floatを理解しよう
floatプロパティは、要素を横並びにしたい時に使います。
floatとは、「浮かせる」といった配置方法で、ちょっとイメージがしづらいです。
例えば、<li>要素に対してfloat: leftを指定すると、縦並びから横並びになります。
HTMLでは、基本的に上から下に表示されます。
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
・リスト1 ・リスト2 ・リスト3
li {
list-style: none; <!-- 先頭の黒点を消すよ -->
float: left;
}
リスト1リスト2リスト3
浮くイメージが湧きますでしょうか。
HTMLでは、ブロックが上から下に積み重なりますが、floatで要素を浮かせることで、そのブロックを横に移動させるといった感じです。
ちづみさんがfloatの概念を分かりやすい図を使って説明してくれてるので、是非参考にして下さい。
✅なくそう!floatわけわからん!の壁!
html、css初心者泣かせ(自分も泣いた)のfloatについて図解しました。#100DaysOfCode #30DAYSトライアル pic.twitter.com/L2Tm4WMmBr— ちづみ (@098ra0209) January 16, 2019
月5万円を稼ぐスキルを身につけよう
DAY1.はいかがだったでしょうか。
DAY1~7.まではProgateでの学習ですので、まずは基礎の基礎を固めましょう。
とにかく手を動かすことが大事
挫折は付き物ですが、とにかく手を動かしましょう。
分からなければ、答えを見るかググって解決です。
- 一回で覚えようとしなくてOK
- 30秒考えて分からなかったらスライドを見る
- 5分以上詰まったら、答えを見る
- 正解したら、コードの値を変えて検証する
- 参考書は参考程度でOK
下記に僕がオススメするHTMLとCSSの参考書を紹介しておきます。
次のステップは、DAY2.です。

