Day3ではCSSが登場します。
りゅうたろうこれも聞いたことある！
も たCSSはHTMLで書いた部分の見た目を変えるための言語なんだよ
Webサイトを作る上で絶対欠かせない要素のCSS。
奥が深く、やれることも多いです。僕自身いつも表示崩れに頭を抱えています。
Day3（CSSを書いてみよう）
CSSのファイルを作成、読み込み
CSSを書くには3つの方法があります。（他にもあったらすいません＞＜）
- HTMLタグの中に直接CSSを書いていく方法
- HTMLのheadタグ内に一括でstyle要素を書いていく方法
- CSSを別のファイルに書き込んで、HTMLで読み込む方法
この中でデイトラでは、別ファイルで書き込んでいく方法を学習していきます。
基本的には可読性や修正のしやすさもあり、この方法が一番使われているかと思います。
というか僕もこれしかやったことはありません。笑
<link rel="stylesheet" href="./css/style.css">この記載をheadタグ内に記載することで外部のファイルを読み込む事ができます。
CSSに限った話ではないので、この形を覚えておきましょう。
ファイル場所の指定の仕方は別の記事で説明することにします。（href=の部分がファイル先指定の部分です）
僕自身すごく勘違いしていた部分でもあるので、詳しく説明しようと思います＞＜
CSSの基本ルールについて
基本は p ＜セレクタ＞ { font-size ＜プロパティ＞ : 20px ＜値＞ }
のように書きます。
- セレクタ ・・・ p、h2のようにHTMLのタグ等を記載して、見た目を変えたい部分を指定します。
- プロパティ ・・・ 指定した部分の何を変えたいかを指定します。（文字の大きさ、色、背景色など様々）
- 値 ・・・ 変えたい内容の値を設定します。（具体的な数字が入ります）
セレクタはタグだけではなく、後述するclass名、ID名や子孫、隣接など指定方法が色々あるので、これも細かくは別の記事で説明しようと思います。
結構セレクタ指定迷う事あるんだよなぁ・・・
実際指定の仕方でググることも多々あります（笑）
CSSでよく出るプロパティ
プロパティの種類もホンッッットに多い！！
わざわざ暗記する必要はありませんが、よく使うものくらいは覚えておくとスムーズにコーディングができます。
①文字の配置・装飾
- text-align ・・・ 水平位置の調整
- line-height ・・・ 行の高さの調整
- letter-spacing ・・・ 文字の間隔の調整
- font-size ・・・ 文字の大きさの調整
- font-weight ・・・ 文字の太さの調整
- font-family ・・・ 文字の字体の調整
- color ・・・ 文字の色の調整（注：font-colorではない！！）
②ブロックの調整
- width ・・・ 横幅の調整
- height ・・・ 高さの調整
- padding ・・・ 内側の余白の調整
- margin ・・・ 外側の余白の調整
③背景の調整
- background-color ・・・ 背景の色
- background-image ・・・ 背景の画像
- background-repeat ・・・ 背景の画像の繰り返し
- background-size ・・・ 背景の画像のサイズ
- background ・・・ 背景についてのショートハンド
④位置指定について
- flex ・・・ 横並び
- flex-wrap ・・・ 子要素の折り返し
- justify-content ・・・ 水平方向の間隔の調整
- align-items ・・・ 垂直方向の並びの調整
- flex-direction ・・・ 並べる向きの調整
- position ・・・ 位置
- top,bottom,left,right ・・・ それぞれ上、下、左、右の位置
- z-index ・・・ 重なりの順序
ショートハンドというのは、複数のプロパティを一つにまとめて短く記載する事をいいます。
例えば上の例では、backgroundがありますが
background: #fff url('◯◯◯') no-repeat center center/contain;左から
背景の色(#fff）、背景画像（url(‘◯◯◯’)、画像の繰り返し(no-repeat)、画像の位置(center center)、画像の大きさ(contain)
を表しています。
もっと他にも使えるプロパティもありますが、今はとりあえずそういうものがあるという事を覚えておいてください。
この辺りはよく使うプロパティになりますので、無理に覚えずともやってれば勝手に覚えると思います。
りゅうたろう英語ばっかりでよくわからないなぁ。。。
やっぱり英語できる人の方がいいのかな。。。
Mota僕も全く英語はわからないよ！
りゅうたろうそ、そうなの？
（やけに自信満々だ・・・）
Motaコードを打つときは全て打つこともないし、わからないときはどんどんググれば大丈夫！
前回インストールしたVScode上では、アルファベットを１文字打つだけで予測変換が出てくるので、スペルを覚える必要はありません。
久々に真面目に打ったので、上の一覧を打っていくのも、かなり苦労しました（汗）
デイトラでは、動画を使ってわかりやすく説明してくれてます！
１から１０まで理解するにはやっぱり動画で見るのが一番理解しやすいかなと思いますね。
Day4（環境構築をしよう）
VS codeの設定（プラグインなど）
ここではVScodeの設定内容、使い方について解説されています。
プラグインというのは、VScodeの機能をプラスアルファで補佐してくれる機能です。
色々入れましたが、デイトラでも個別に紹介されていますが、「Live Server」が特別使ってるイメージです。
（おすすめプラグインなどは、デイトラに限らず様々な人が紹介されています。自分に合ったプラグインを見つけて行くのが良いかと思います。「VScode おすすめプラグイン」とかでググってみましょう）
HTMLやCSSファイルの更新をライブプレビューできるようにするプラグインです。
も たコードを入力して、リアルタイムに更新されるのを見ると感動するよ！
すごくサイトを作ってるのをリアルに感じられます。
逆に反映されてないと何が悪いのか悩むことになりますが。。。（汗）
ちょっと前後しちゃいましたが、プラグインではなく設定の方で自動保存にしておくのも効率を上げるには重要です。
初期状態では、Macであれば「command ＋ s」、Windowsであれば「ctrl ＋ s」を押して保存をするものですが、下記設定で入力のたびに保存をする事が可能になります。
場所はちょっと違うかもしれませんが、「Auto Save」という項目を画像のように「afterDelay」に変更するだけで自動保存になります。
ちょっとしたことですが、こういうことの積み重ねがコーディングの時間短縮になりますので、よほどこだわりがなければ自動保存が楽だと思います。
Emmet
Emmet（エメット）というのは、コーディングにおける入力補完ツールになります。
これがVScodeには標準で付いているのがいいらしいです。
（VScode以外がどうなっているのか僕はわかりませんが、、、）
これは完全に覚えるしかないのですが、よく使うプロパティだけでも覚えておくと便利です。
僕がよく使うものだけ載せておきます。
Emmet例
①HTMLのタグ
通常は、<p></p>とカッコをつけてタグを打ち込むのが普通ですが、
p ＋ tab を押すことで ・・・ <p></p> となります。
p.mota + tab を押すと ・・・ <p class=”mota”></p> とclass名を含んだ形にもなります。
②CSSのプロパティ＋値
- fz10 ＋ tab ・・・ font-size : 10px;
- fw700 ＋ tab ・・・ font-weight : 700;
- lh + tab ・・・ line-height
- m20 + tab ・・・ margin : 20px;
- db + tab ・・・ display : block; (dib + tab で display : inline-blockになります）
この他にも＞や＋などを使って子孫要素、隣接要素まで指定した書き方などもありますが、上手く使えてません＞＜
これが体に染み付くと格段にコーディングが早くなると思います。
簡単でよく使うものから積極的に使っていきましょう！！
初級編Day3〜4のまとめ
- Day3（CSSを書いてみよう）
・CSSのファイルを作成して、HTMLに記載して読み込む。
・CSSはセレクタ、プロパティ、値で出来ている。
・CSSのプロパティ名を暗記する必要はない。 - Day4（環境構築をしよう）
・VScodeのプラグインを自分なりにカスタマイズして効率的にコーディングをする！
（おすすめはLive Serverです）
・Emmetはよく使うものから積極的に使う！
について学習しました。
実はこの他にもChromeの検証機能なども簡単に説明されてます。
何をするにもこの検証機能は必須になりますので、これも別の機会に個別に記事にしたいと思います！！
ここまで書くのに、思ったより時間がかかってしまった・・・
もっと上手くまとめられるように頑張ります！
それではまた！
