【告知】ノマドエンジニア養成ブートキャンプ

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

コーディング

 

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

 

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

 

 

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

 

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

 

✔︎本記事の内容

  • DAY1.『Progate HTML & CSS 初級編(4章まで)』の解説

 

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

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

 

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

progateの説明画面

こんな感じです。

 

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

 

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

 

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

 

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

【DAY1. 】Progate HTML & CSS初級編(第4章まで)を解説

デイトラ1日目

完全初心者でも、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名を決めるには下記を参考にどうぞ。

 

 

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の概念を分かりやすい図を使って説明してくれてるので、是非参考にして下さい。

 

 

月5万円を稼ぐスキルを身につけよう

DAY1.はいかがだったでしょうか。

 

DAY1~7.まではProgateでの学習ですので、まずは基礎の基礎を固めましょう。

とにかく手を動かすことが大事

挫折は付き物ですが、とにかく手を動かしましょう。

 

分からなければ、答えを見るかググって解決です。

 

  • 一回で覚えようとしなくてOK
  • 30秒考えて分からなかったらスライドを見る
  • 5分以上詰まったら、答えを見る
  • 正解したら、コードの値を変えて検証する
  • 参考書は参考程度でOK

 

下記に僕がオススメするHTMLとCSSの参考書を紹介しておきます。

 

次のステップは、DAY2.です。

 

三角形と男性 【DAY2.】30DAYSトライアル2日目をわかりやすく解説

 

【無料あり】おすすめするプログラミングスクール3社【ニーズ別に紹介】