推奨デスクトップレイアウト

画面左から問題ウィンドウ、リファレンス、ブラウザ（仕上がり見本+プレビューウィンドウ）を並べ、ブラウザの上にHTMLエディタ（VScodeやDreamweaver）を重ねる。重ねる際は下記のようにブラウザの一部が見えるようにウィンドウを少しずらすとプレビューの確認がしやすい。

試験対策

出題傾向はほぼ変わっていないので、模擬問題1～3とサンプル問題で繰り返し練習しておけば大丈夫です。

tips

base.html	最初に作成するbase.htmlをコピーしてindex.htmlなど、5つのファイルを作成するのでbase.htmlは細かく確認をしながら作成してください。仮に90分のうち60分をbase.htmlに使用しても他のファイルは問題が少ないので時間配分的には大丈夫です。
idとclass	classを多用する回とidを多用する回があります。idとclassのつけ間違いに注意が必要です。 特にナビゲーションの [li]要素には気を付けましょう。
○○要素の次の行に	「○○要素の次の行に」は閉じタグ（例： </div> ）の次の行
○○要素の中に	「○○要素の中に」は開始タグ（ 例：<div> ）の次の行
左右中央揃えのマージン 上: 0、下: 0、左: (各自考える)、右: (各自考える)	通常はmargin: 0 auto;と省略可能ですが、解答集には【margin: 0 auto 0 auto;】と書かれています。
背景	ショートハンドでbackground: url(“../images/bg.jpg”) repeat-x center top;でもよさそうですが、解答集はショートハンドを使用せず下記のように書かれています。 background-image: url(../images/bg.jpg); background-repeat: repeat-x; background-position: center top;

時短

1. Emmet（HTMLやCSSの省略記法）
   • 例：VScode：ul>li.nav_*4>a [Returnキー]　Dreamweaver：ul>li.nav_*4>a [TABキー]
2. ラップ機能（figureやfigcaption、formのlabelなど、文字列や要素を囲む場合に便利）
   • VScode：囲みたい要素や文字列を選択 　[F1キー]で検索欄に [>] が入るので　[ Emmet:ラップ変換 ]を選択→タグを入力　複数のタグの場合は[+]で繋ぐ
     ※[F1キー]の代わりに [Shift + cmd + P] でも可能　
     Dreamweaver：囲みたい要素や文字列を選択 して 挿入からタグを選択又はcommand+Tでタグを入力（command+Tでは、Emmetの省略記法は使えません）

VScode CSS Emmet抜粋

部分一致	プロパティ：（値）	部分一致	プロパティ：（値）
db	display:block;	tac	text-align:center;
bgc	bbackground-color: #fff;	w840	width:840px;
bgi	background-image: url();	m10	margin:10px;
c	color: #000000;	mt20	margin-top:20px;
bd	border: 1px solid #000;	mla	margin-left: auto;
bt	border-top: 1px solid #000;	mr10	margin-right: 10px;
fz16	font-size:16px;	mb20	margin-bottom: 20px;
psr	position:relative;	m0:a	margin:0 auto;
flr	float: right;	m0:a:20	margin:0 auto 20px;
bsh	box-shadow	p10	padding:10px;
bsh0:10:10	box-shadow:0 10px 10px;	p10:0	padding: 10px 0;
c#f00	color: #ff0000;	pt60	padding-top: 60;
w100%	width:100%	w570+ha+bgc:red	width: 570px; height: auto; background-color: red;

その他：VScodeのマルチカーソル　https://zenn.dev/rabee/articles/vscode-multiple-cursors-shortcut
Dreamweaverのマルチカーソル　https://helpx.adobe.com/jp/dreamweaver/using/writing-editing-code.html#multi-cursor

tableと疑似クラス

tableについての説明は下記のcodePenの表の中に記入しています。

nth-child(odd) (even)や :nth-child(3)のような問題が多く出題されてます

:first-child :nth-child(1)  :nth-child(0n+1)	兄弟要素のグループの中で最初の要素
:nth-child	An+B の表記を用いて、兄弟要素のリストから要素を選択
:nth-child(odd) 　:nth-child(2n+1)	奇数行 (1、3、5・・・・)
:nth-child(even)  　:nth-child(2n)	偶数行 (2、4、6・・・・)
:nth-child(7)	7 番目の要素
:nth-child(5n)	5番目 [=5×1]、10 番目 [=5×2]、15 番目 [=5×3]・・・・
:nth-child(n+7)	7 番目とそれ以降のすべての要素。 7 番目 [=0+7]、8 番目 [=1+7]、9 番目 [=2+7]・・・・
:nth-child(3n+4)	4 番目 [=(3×0)+4]、7 番目 [=(3×1)+4]、10 番目 [=(3×2)+4]、13 番目 [=(3×3)+4]等の要素
:nth-child(n+8):nth-child(-n+15)	兄弟要素のグループの中で 8 ～ 15 番目の要素
:last-child	兄弟のうちの最後の要素
:nth-last-child	An+B の表記を用いて、兄弟要素のリストから、リストの末尾から逆方向に数えて要素を選択
:nth-last-child(odd)  　:nth-last-child(2n+1)	最後から数えた奇数行 (1, 3, 5・・・・)
:nth-last-child(even) 　:nth-last-child(2n)	最後から数えた偶数行 (2, 4, 6・・・・)

float

display:flex;が実装される以前は要素を横並びにするためにfloatプロパティを使用していました。
今でもfloatプロパティは有効ですが、レスポンシブに不向きなため、レイアウトに使用する事は減りました。
特徴としてfloatした要素の次の要素以降が回り込んでしまったり、親要素に高さが指定されていない(auto)場合、親要素の高さから除外されたりするため、
親要素に overflow: hidden プロパティやclearfix、clear: both;などを設定してfloatを解除する必要があります。

CSSで使用する単位

単位	説明
px（ピクセル）	ピクセルはディスプレイ上の最小単位を表し、1pxはデバイスの1ドットに相当します。
pt（ポイント）	デバイスの解像度によって変化します。一般的なPCは解像度が96ppiなので、1ptは約1.33pxになります。 解像度が72ppiの場合は1ptは1pxになります。 1pt = 1px / デバイスの解像度（ppi）
em（エム）	CSSで指定しているフォントサイズを基準とした相対的な単位。フォントサイズが12pxと指定されている場合、1emは12pxとなり、2emは24pxとなります。
rem（レム）	htmlに指定されたサイズを基準にした相対的な単位。 htmlにフォントサイズの指定がなければフォントサイズは16pxになるので、1remは16pxとなります。
%（パーセント）	親要素のサイズを基準とした相対的な単位。

Q&A