今回は今まで習ったことの内容の中の、HTMLとCSSについてアウトプットしていきます！！

HTMLについて

HTMLとはマークアップ言語の一つで簡単に言えば文字を表示するための言語です。入れ子構造になっている。
例）< h1 >文字を入力< /h1 >
上記のように左右をタグと呼ばれるもので囲み表示します。
タグには沢山種類があり、主要な物を下記に記します。

h1,h2,h3,h4...タグ

見出しタグ。数字が大きくなっていくほど、小さい文字となる。

pタグ

段落を指定するためのタグ。

headタグ、bodyタグ

headタグには簡単に言えばHTMLの設定を記載する。bodyタグには実際にweb上に表示したい文字を記載

headerタグ、mainタグ、footerタグ

この三つはbodyタグの中に記載するものになる。
※ headerタグとheadタグは間違えないようにしよう！！

divタグ

ブロックレベル要素としてグループ化できる要素。基本的に何もない限りこのタグを使用する。

ulタグ、liタグ

ulを親要素としてliタグを使用。基本的にlistとして使用するため、同じ意味合いを持つものをいれる。

CSSについて

簡単に言えば、CSSとはHTMLで記述した文章に色やサイズ等を適用するための言語である。
例)
index.html

<html>
  <head>
    <link rel = "stylesheet" href = "style.css">
  </head>
  <body>
    <div class = "class">背景が赤くなる</div>
    <div class = "class-j">
      <p>文字が赤くなる</p>
    </div>
  </body>
</html>

style.css


.class{
  background-color: red;
}
p{
  color: red;
}

上記のように、HTMLの方でlinkタグを指定してあげることで、CSSが適用されるようになる。CSSはHTMLでclassを指定して使用することも可能であると同時に、要素を指定して使用することも可能。
また、CSSは上記で記載したように、プロパティ(background-color等)と呼ばれるものを記載することで色や大きさなどを変更することが可能。
プロパティの主要なものは下記に記載。

colorプロパティ

文字の色を変更

background-colorプロパティ

背景色を変更

font-sizeプロパティ

文字のサイズを変更

heightプロパティ

高さを指定できるプロパティ

widthプロパティ

幅を指定できるプロパティ

HTMLの表示について

HTMLは箱のような形になっており、外から順にmargin,border,paddingとなっている。それらの幅の指定を行う方法が下記のプロパティである。

marginプロパティ

外のサイズを指定できるプロパティ

paddingプロパティ

内側のサイズを指定できるプロパティ

borderプロパティ

marginとpaddingの間の線の部分を指定できる。

FlexBoxとは

HTMLが箱のようなものと前述に記したと思うが、この箱を自由に動かす便利な概念みたいな物。
基本的に下記を使用する。

display: flex

親要素に指定すると、小要素のブロックが全て横並びになる。

justify-content: A;

親要素に指定すると子要素の互いの横幅を一括で指定することが可能。Aにはspace-aroundやspace-betweenなどを指定する。

align-items: A;

親要素に指定すると小要素の縦の位置を一括で調整できる。Aにはcenterなどを用いる。

float: A;

子要素に指定すると横並びになる。Aにはrightとleftが入る。
※ floatとdisplay: flex;は、一見似たようなものに見えるが、display: flex;の方が圧倒的に移動できる範囲が広いため、floatはあまり使用されない。

まとめ

まだまだ、色々なタグやプロパティが存在するが、この範囲はいずれ何度も行う内容だと思うので、開発の際にその都度公式リファレンスを確認すると良いのではないかと思います。

HTML/CSSについて