30Daysトライアルの要点のまとめ　Day1からDay2まで

こんにちは、ワタリビト（wataribito）です。

プログラミングで収入を得るために勉強に励んでいるのですが、その勉強というのが「30Daysトライアル」と企画。

この企画に参加しながら勉強をしています。

30Daysトライアルを知らない人もいると思うので、最初に簡単に説明しますね。

端的にまとめると、1日1つ決められた量の課題をこなして、30日間でWeb制作が受注できるだけのスキルを身につけようという趣旨です。

主にツイッターやSlackで、課題の完了や課題の発表、エンジニアとしての採用報告などが行われているのでツイッターで #30Daysトライアル のタグ検索をするとたくさんのツイートが見つかりますよ。

参加は自由・参加料金は無料・会員登録などはナシ・ツイッターでつぶやかなくてもOKなので、参加のハードルはだいぶ低いですね。

＊ただし、課題が進むにつれてProgate（課題で使用するプログラミング学習サイト）の有料登録（月980円）が必要になります。

30Daysトライアルについての詳しい内容については、本家のこのサイト（東京フリーランス）を参照してください。

Q：本当に30日で仕事が取れるレベルになるのか？
A：努力次第で十分可能です

こちらも30daysトライアルの振り返りです?

30daysトライアルの要点まとめ　Day3

09/11/2019

30daysトライアル要点まとめ　Day4

09/12/2019

Day1の課題内容

1日目の課題内容は「ProgateのHTML＆CSS初級編の1章から4章までこなすこと」です。

具体的な内容は以下の通り。

少しWeb制作の知識がある人なら楽勝なレベルですね（Progateはこちらから）

全くの初心者でも、課題の量は多くないし、基礎中の基礎なので理解しやすいハズです。

ちなみに、今日の課題内容は

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

です?

まだProgateが無料で使える範囲なので、ひとまずどんなものか知りたい人は覗いてみて?https://t.co/3VXlMXeIlL

— Wataribito?旅とWebと3DCG (@wataribito) 2019年9月9日

Day1の要点まとめ

Day1で習う学習ポイントをまとめました。

1章　タグについて

・タグは段落や文章などの区別をつける役割を持っている。

・段落や画像、テキストなどの表示はそれぞれに応じたタグを使う。

・h1やa、divなどのタグは、開始タグと終了タグがセットで必要（一部を除いて）

・タグは＜＞の中に入れ、終了タグには＜の次に/（スラッシュ）も入れる。

例）<h1>（?開始タグ）（終了タグ?）</h1>

タグについて

2章　見出しと段落について

・見出しはh1からh6タグを使う

・テキストはaタグを使う

例えばこの文章はaタグ、見出しと段落についての部分はh4タグをそれぞれ使っている。

段落とテキストタグについて

3章　リンクタグについて

・別のURLリンクを記事に貼るには、<a href=””></a>タグを使う。

・””の中にURLを入れる。

・開始タグをテキストタグの<a>と間違えないこと（終了タグはおなじく</a>）

・<!–ここにテキスト–>?はコメント用タグ（コメントはページに表示されない）

・コメントは自分用のメモ代わりにつかう。

テキストタグとリンクタグの違い

4章　imgタグについて

・imgタグは「img」単体ではなく、「img src=””」のセットで使うとおぼえる。

・画像を表示するimgタグはテキストを囲むことがないため、終了タグが要らない。

imgは閉じタグ不要

Day2の内容と要点のまとめ

2日目の課題内容は『Progate HTML & CSS 初級編（5章から7章まで）』です。

具体的な内容は以下のとおり。

この日からCSSが学習内容に加わります。

CSSはWeb制作に絶対に必要なモノであり、様々な使い方をします。

ちょっと複雑になってきますが、まだ基礎中の基礎しか学ばないので、難しくありません。

（CSSとは、色やカタチ、場所などを自由に指定・変更できる機能です）

＊文字の種類は一般的にはフォントと呼ばれており、以降はフォント呼称も使用します。

今日の課題のDAY2.『Progate HTML & CSS 初級編（7章まで）』終了

このあたりもまだまだ楽勝な感じ
まったく初めての人でもすぐに理解できると思います?

まだまだ無料で進められるので、興味がある人はすぐにでも始められますね

詳細は?からhttps://t.co/3VXlMXwjKl#30daysトライアル#Progate https://t.co/I7wepgyTfR

— Wataribito?旅とWebと3DCG (@wataribito) 2019年9月10日

Day2の要点まとめ

Day2で習う学習ポイントをまとめました。

5章　リストについて

・<ul>タグ（親）の中に<li>タグ（子）をいれてつかう。

・このブログのヘッダーもリストを使った入れ子構造。

・ほぼすべてのサイトやブログのヘッダーなどにリストがつかわれている。

・下の画像を打ち込んでも、CSSを設定していないのでこのままでは意味がない。

リストについて

6章　CSSについて

・CSSとは、モノのカタチや大きさ、位置、色など見た目をつくるもの

・HTMLで記述したコードの「どこの」「なにを」「どうするか」を決める

・HTMLとは記述の仕方が違うので注意（<>は使わず、｛｝をつかうなど）

・セレクタ、プロパティ、：；の使い方をおぼえる

・CSSのコメントは/**/を使う（HTMLとは違う）

h1の文字であるHellow Worldの色を赤に指定すると…?

h1の色が赤に変化した

7章　文字の大きさと種類の変え方について

・文字の大きさを指定するプロパティは「font-size」

・大きさの単位は「px」をつかう（40px、20pxなど）

・文字の種類を変えるプロパティは「font-family」

・文字の種類＝フォント名にスペースが入る場合は「””で囲む」

h1タグとpタグに文字色と大きさをバラバラになるよう設定すると…

それぞれの文字色と大きさがバラバラになる