デイトラWEB制作コース学習記録・初級DAY1〜4

デイトラWEB制作コース初級「HTML/CSS基礎編」の記録です。

DAY1〜DAY4となります。

DAY1 はじめに

デイトラはメンターサポートがついており、Slackというチャットツールから質問や相談をすることが出来ます。

まず、最初に学習することは「質問の仕方」。

問題を正しく伝え、素早く解決できるスキルを身につけます。

何でもかんでも「分かりません、教えて下さい」だとキリがありませんし、自分のためにもなりません。

端的に言うと、以下の様なテンプレートを使用します。

テンプレートをそのまま載せるとまずいので、内容は少し改変しました。

このように確実に伝えることで無駄な質問のやりとりを防ぐことができます。

次にWEB制作で必須のGoogle Chrome、VS Codeのインストールし、一通り基本的な使い方を学びます。

DAY2 HTMLのタグの学習

HTMLは、基本的に開始タグと終了タグで囲むのがルール。

見出しタグの<h1></h1>,段落の<p></p>,グループ化の<div></div>などなど。

タグの使用例

<h1>タイトル</h1>
<p>ここにテキストが入ります。</p>

タグはかなりの数があり全て覚えられないため、よく使うタグを少しずつ覚えていけば良し。

また暗記する必要もないため、ここでは大体こんなものがある程度に留めておきます。

DAY3 CSSを書いてみる

CSSとは、見た目を整えるもの。HTMLで書いたテキストの大きさや色などの変更をすることが出来ます。

CSSは基本的に、「セレクタ・プロパティ・バリュー」で成り立ち、
「タイトルの（セレクタ）・色を（プロパティ）・赤にする（バリュー）」という形で定義できます。

この指定方法も覚えられないくらいあるので、よく使うものを少しづつ覚えていく感じでOKかなと。

ボックスレイアウトのmargin・paddingの違いが分かりづらいかもしれませんが、ボタンのレイアウトで考えてみたら理解しやすいと思います。

ボタンより外側がmargin、ボタンの内側がpadding、ボタンの枠がborder

DAY4 環境構築をする

プラグインのインストール

DAY1でインストールしたVS Codeのプラグインを複数導入します。

プラグインとは拡張機能のことで、導入することで便利な機能が追加されます。

主には、HTMLやCSSの入力補完や記述を修正するもの。

一文字でもスペルミスがあるとうまく動作しないので、効率よく出来るだけ間違いが起こらない様にするためにはこのようなプラグインは必須です。

Live Serverの使い方を学習

先ほどインストールしたプラグインの中にLive Serverというものがあります。

Live Serverを起動すると、記述した内容がリアルタイムに表示されるので「まさにサイトを作っている」という感じで気持ちいいですね。

Google Chromeの検証機能の学習

Google Chromeの検証機能については、過去に独学で勉強していたので復習。

知らなかったTipsを忘れないよう貼り付けしておきます。

Emmet（エメット）の理解

Emmet（エメット）は、VS codeに標準で搭載されている機能で、文字の一部を入力するだけで後の記述を補完してくれるというもの。

例えば、divと入力した後にTabキーを押すと<div></div>が自動で作られ、fz16と入力した後Tabキーを押すとfont size: 16px;が自動的に作られます。

Emmetを使えばタイプミスも減り、タイプ文字数も大幅に少なくなるため爆速コーディングができるというわけですね。

完全に理解した。

デイトラWEB制作コース「HTML/CSS基礎編」まとめ

一番初めから覚えることがたくさんありましたが、やっていくうちに覚えていくしかないという印象でした。

HTMLやCSSはどういったものかを理解し、とりあえずコードを書いてみて反映されていれば立派なWEB制作者です。（激甘）

繰り返しますが、よく分からないから何度も見直すというよりもとりあえず先に進んで「詰まったところで復習」というやり方が効率的な気がします。

基礎を深く理解していきたいと言う人はProgateも合わせてやってみるといいかもしれません。

自分自身Progateで基礎を学んでいたので、とても入りやすかったです。

時間効率重視でやりたいと言う人は、デイトラを日にち関係なくガンガン進めてみましょう。