HTML Knowledge Notes

HTMLの学習の中で気づいた点や、注意点をまとめたページです。

HTMLの全体


<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>

    </body>
</html>

解説

DOCTYPE宣言

<!DOCTYPE html>

大文字で書いても小文字で書いてもOK（「<!doctype html>でもOK）
ただし、htmlの前後に空白を入れることはできるが、!DOCTYPEの部分はそのまま続けて書く必要がある。

border-radius一括指定時の順番


            border-radius: 左上 右上 右下 左下;

border-radiusの値を一括指定する際、順番は「左上右上右下左下」

border一括指定時


            border: 幅 スタイル 色;

borderの値を一括指定する際、paddingやmarginのように個別指定は出来ないので注意。

display: grid;

Gridが効くのは「直下の子要素」だけ。例えば、


<section class="parent">
  <dl>
    <dt class="child1">...</dt>
  </dl>

というHTMLに


.parent {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

とCSSを指定しても、child1やchild2にはGridは効かない。
Gridを効かせたい場合は、dlにdisplay: grid;を指定する必要がある。

background-image

background-imageはレイヤーで考えると分かりやすい。


background-image:
  url("../../images/mountain.svg"),
  linear-gradient(deepskyblue, green);

background-size:
  50% auto,  /* 上のレイヤーの指定 */
  cover;     /* 下のレイヤーの指定 */

flexレイアウトとgridレイアウトの違い

flexは一次元（横または縦）の並びにおいて、各要素がどのように伸縮・配置されるかといった「要素の振る舞い」を指定する。一方、gridは行と列を持つ二次元レイアウトを前提とし、「全体の構造を定義」するためのプロパティが中心となる。

リンクを滑らかにする

transition: [秒数]s;をa:hoverに適用すると、滑らかな演出ができる。

scroll-behavior:smooth; は:rootやhtml要素に指定する必要がある。aタグがトリガーとなってhtml要素に動きを与えていくため、