HTMLとCSSを使ったプログラミング知識3選。

この記事では、将来プログラミングをできるようになるために、HTMLとCSSの今日学んだ基礎知識を解説していく記事です。
今日学んだこと。

1. リセットCSSを導入する。

2. コメントアウトについて。

3. ボーダー「境界線」の指定の仕方。

リセットCSSについて

HTML・CSSの動作について、ブラウザごとにほんの少しだけ違いがあります。
例えばフォントが違ったり、チェックボックス・プルダウンメニューの見た目が違ったりします。
これを解消するために、ブラウザごとの違いを補正してくれるリセットCSSと呼ばれるものが無料で配布されています。いくつか種類があり、それぞれメリット・デメリットがあ今回は最近よく用いられているNormalize.cssというものを利用していきます。Normalize.cssはブラウザごとに用意されているスタイルを活かしつつ、バグを解消することに重きを置かれたリセットCSSです。

コメントアウトについて。

CSSにもHTMLと同様に「コメントアウト」があります。CSSの場合は /∗ ∗/ で囲った部分がコメントとなります。
こういった形で /∗ ∗/ で囲った部分は、反映されなくなります。
複数行での指定も可能で、どこになにが書いてあるのか後で見ても分かるようにメモとして利用することもできます。
VS Codeには、選択した部分を一発でコメントアウトできるショートカットキーがあります。
まずはコメントしたいところを選択し、次に Command + /  を押します。
これでコメントアウトができました。

ボーダー「境界線」の指定の仕方。

HTMLにはborderというCSSプロパティという機能によって境界線をつけることができます。スタイル・太さ・色を上下左右ごとに指定することができます。
boderは上下左右のスタイル・太さ・色を合わせると全部で20パターンのCSSプロパティがあるのですが、これは使いづらいのでショートハンドで覚えるのがおすすめです。
borderにはいくつかのスタイルがあります。一番多く使われるのはsolidで、1本線を表示します。他にも2本線を引くdoubleや、破線を引くdashed、点線のdottedなどがあります。
borderの太さはピクセルで、色はフォントや背景と同じようにカラーコードで指定します。

例えば、要素の左側にだけ境界線を引きたい場合はborder-top（上）border-right（右）border-left（左）border-bottom（下）
というように指定することができます。

まとめ

基礎知識の部分が少しずつ抜け、かなり内容が難しいものになってきたなと感じました。徐々に必要なコマンドや機能の種類が増えてきており、まだ解説を見ながらでなければ充分にHTMLを書くことはできませんが、少しずつ慣れていこうと考えました。
コメントアウトやボーダーの指定ではまだ理解しきれていない部分もあるので、しっかり勉強していこうと考えました。