Emmet
VSコードではEmmetという機能が初めから使えるようになっています。Emmetを活用すると、HTML・CSSのコーディングを素早く行うことができます。
HTML
- h2 + tabキー ⇨ <h2></h2>
- p + tabキー ⇨<p></p>
- a + tabキー ⇨ <a href=””>
- div + tabキー ⇨ <div></div>
- ul + tabキー ⇨ <ul></ul>
- li + tabキー ⇨ <li></li>
- img + tabキー ⇨ <img src=””>
タグの<は入力しなくて大丈夫！
spanなど文字の途中に入れるものの時はうまくいかないこともあります。
CSS
- tac + tabキー ⇨ text align : center
- tar + tabキー ⇨ text align : right
- fz16 + tabキー ⇨ font-size : 16px
- fw700 + tabキー ⇨ font-weight : 700
- lh1.5 + tabキー ⇨ line-height : 1.5
- c + tabキー ⇨ color : #000
- m0 + tabキー ⇨ margin : 0
- mr10 + tabキー ⇨ margin-right : 10px
- pl10 + tabキー ⇨ padding-left : 10px
- df + tabキー ⇨ display : flex
- jcc + tabキー ⇨ justify-content : center
- ali + tabキー ⇨ aline-items : center
検証ツール
Google Chromeデベロッパーツールの起動方法は、Google Chromeで対象のWebサイトを開いた状態で右クリックをして「検証」をクリックするだけです。
デバイスごとの表示を確認したり、エラーを確認したりすることができます。
調べる
例えば…下のデザイン、セクションの繋ぎ目が斜めになっています。
これってどうやってコーディングするのかな？と最初はわからないですよね。
『セクションつなぎ目斜め css』と検索すると、答えが書かれてるサイトが出てきました。
