HTML & CSS 学習まとめノート

HTML

DOCTYPE宣言

コード


<!DOCTYPE html>

解説

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

head要素

CSS、JavaScriptのリンク

コード


		<head>
		  <link rel="stylesheet" href="/styles/style.css">
		  <script src="/scripts/script.js" defer></script>
		</head>

解説

リンクする際はルートから始まる絶対パス（※URL指定ではない）を使用することが推奨される。相対パス指定は開発者の認知負荷が掛かるため、なるべく避けたほうが安心。

CSS

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要素に動きを与えていくため、

vw、svw、vh、svhのまとめ

単位	正式名	説明
vw	Viewport Width	ビューポート幅の100%（スクロールバーを含む）
svw	Small Viewport Width	ビューポート幅の100%（スクロールバーを除く）
vh	Viewport Height	ビューポート高さの100%（スクロールバーを含む）
svh	Small Viewport Height	ビューポート高さの100%（スクロールバーを除く）

疑似要素はJavaScriptで読めない

実DOM要素しか読み込めない。そのため、例えば::before{ counter-increment: section; content: counter(section) ". "; }のように、疑似要素で生成したコンテンツはJavaScriptで取得できない。

ブラウザ間の差異

改行アルゴリズム

Chrome：改行しない
Safari：改行しない
Firefox：積極的に改行する

対策：<wbr>を適切な位置に入れる。overflow-wrap: anywhere;を入れる。word-break: break-all;は非推奨だが、下位互換のため念のため併用した方が良い。Safari 15.4（2022年）から対応のため。

デバッグ方法

以下のコードではみ出ている要素を赤い線で表示することができる。


* {
  outline: 1px solid red;
}