今回は今まで習ったことの内容の中の、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はあまり使用されない。まとめ
まだまだ、色々なタグやプロパティが存在するが、この範囲はいずれ何度も行う内容だと思うので、開発の際にその都度公式リファレンスを確認すると良いのではないかと思います。