このレッスンでは、調べ物をする際に知っておきたい言葉や、コーディングをスムーズにするための基礎を紹介します。
HTML,CSS基礎知識
「やりたいこと」を検索するときや、チュートリアルを読む時に、知っていると便利な構造の名称・基礎知識をご紹介します。
HTML
HTMLは要素を積み重ねるように構成されています。 要素とはタグで囲われた塊のことを指します。
要素の中には、別の要素をいれることも出来ます（入れ子）。 入れ子の場合は、外側の要素を親要素、中にはいっている要素を子要素、孫要素と呼びます。
例えば、下図のようにブログ記事をカードで並べて表示しています。 文字数によって、カードの高さが変わってしまいますよね。 横並びのカードを同じ高さに揃えたい場合に、なんと検索れば良いでしょう？
「カード 高さ 揃える 方法」だと色々なシチュエーションのチュートリアルが出てきます。どれが求めていた（役に立つ）コードかわからず探すのに時間がかかってしまうこともあるでしょう。
「flex 子要素 高さ 揃える」「flex 孫要素 高さ 揃える」と検索すると、かなり検索結果が絞られます。
CSS
CSSは「セレクタ」「プロパティ」「値」の3つで構成されます。
- セレクタ：どの要素の
- プロパティ：どこを
- 値：どうするか
という書き方ですね。 上の例だと「bg-whiteクラスをもつ要素の、背景色（background-color）を、白（#FFF）にする」の意味になります。
htmlで要素を入れ子にしているように、cssのセレクタも入れ子で指定できます。 下記のようなセレクタの書き方は、よく使いますよね。
#about .bg-white{ background-color: #fff; }
この半角スペースで区切った書き方は、aboutというIDを持つ要素の中にあるbg-whiteクラス、を意味しています。こうした書き方を子孫セレクタと呼び、半角スペースは結合子といいます。
同じ「aboutというIDを持つ要素の中にあるbg-whiteクラス」を指定する場合、別の書き方をする事もあります。
#about>.bg-white{ background-color: #fff; }
結合子が「>」になっていますね。 こちらは小セレクタといい、#aboutの子要素でbg-whiteクラスを持つもの、という意味になります。孫要素には適用されません。
【例】
<div id="about">
<div class="bg-pink">
子要素のbg-pink
</div>
<div>
<div class="bg-pink">
孫要素のbg-pink
</div>
</div>
</div>
セレクタの種類や入れ子指定には、これ以外にも色々な方法があります。
ブロックレベル要素とインライン要素
HTMLの要素は、初期状態でブロックレベル要素となるもの・インライン要素となるものがあります。
簡単に言ってしまうと、初期状態で幅100％になるタグか、ならないタグかです。ここを分からずにデザイン画からコードを考えてしまうと、後々スタイル指定が大変になってしまうこともあります。特性を知っておきましょう。
なお、それぞれの要素（タグ）はデフォルトでブロックベレル、インラインが決まっています。が、cssの方で、displayプロパティを指定して変更することも可能です。
【ブロックレベル要素】
親要素の幅一杯まで広がる要素。
ブロック要素の後は自動改行され、次のブロック要素が横に並ぶことはありません。
代表：div、p、ul,ol、li、hタグ 一覧はブロックレベル要素 - MDN
ブロック要素は初期状態で親要素の100％幅になりますが、cssで高さや幅を指定することも出来ます。marginやpaddingの設定も上下左右に行うことができます。
【インライン要素】
要素に含まれるコンテンツの大きさによって幅が決まります。
自動改行もされないため、インライン要素の横にインライン要素が並びます。
代表：a、img、span、strong、button 一覧はインライン要素 - MDN
インライン要素は「含まれるコンテンツの大きさ」が幅・高さになります。
そのため、そのままwidthやheightを指定しても効きません。
また、marginは左右のみしか指定できない、padiingは全方向に指定できるものの隣接する他の要素があれば被るという性質があります。
例えば、ボタンにpaddingを付けたい・幅や高さを指定したい場合は「display: inline-block;」を指定します。
入れ子ルールの確認
HTMLの要素は、その中に別の要素を入れることが出来ます。 複雑なデザインをWebページとして表示させるためには、この要素の入れ子は必要不可欠です。
しかし、何でもかんでも入れ子にできるわけではありません。 色々ルールがあったり、見解が分かれるところもありますが、基本的には下記の２点を押さえておけば大丈夫です。
- インライン要素の中にブロック要素は入れられない
- ul,olタグの子要素は原則liタグのみ
【NG例】
<span>
<div>
<div>
</span>
<ul>
<li></li>
<img src="XXX.jpg>
<li></li>
</ul>
【OK例】
<div>
<span>
</span>
<div>
<ul>
<li><img src="XXX.jpg></li>
<li></li>
</ul>
まとめ
コーディングを行ううえで知っておくと便利な基礎知識をまとめました。今までうけてきたレッスンの復習、なんとなく書いていたCSSセレクタの仕組みなど、気になるところがあったのではないでしょうか？
このページで紹介した以外にも、セレクタの書き方や、displayプロパティで指定できる他の値などはたくさんあります。例えば、よく使っているflexもdisplayプロパティですよね。
気になるところをとっかかりにして、色々調べてみましょう。
基礎レッスンが終わったら、そうして知識を増やし基礎力を上げていきましょう。
一回読んで覚えようとしなくても構いません。
気になったところを調べる・出てきた説明が分からなければ更に調べる、その習慣が何よりも大切です。