模写修行　無料編を終えてポイント

矢印はCSSで作る
ポイント
・疑似要素after,beforを親要素に当てる。
・親要素にはposition:relateiveをあてる
・疑似要素には複数セレクタで共通の要素、positon:abusorut,top,bottom,rightをあてる

見出しのコンポーネント化
ポイント
・フォントサイズ、カラー、配置（text-aline）に注目してコンポーネント化
例）
サイズ
.c-title-level3 {
font-size: 18px;
.c-title-level2--center {
text-align: center;
・配置はモディファイアー、サイズはレベルやサイズで記載

レイアウトの注意
一番外側のレイアウトは％で設定
狭くなるに連れてpxで調整する
例）
.l-container {
width: 90%;
margin: 0 auto;
max-width: var(--width-content);
}

構造の注意点
全面に背景色を入れる場合はheader.l-container.header-innerの順
header-innnerは横並びにするために作成する

SVGの注意点
できる限りインラインSVGを使用する
ダークモードにする場合、パスのfillを消しておく

アクセシビリテぃを考えて隠しテキストを入れることもある。（インラインSVGを使用する場合）
テキストリーダーで読み上げれるようにするため

spanタグでhiddenにしておく
特殊なコードが必要
※display: none;で画面上から消すと、読み上げもされない

svgの色の変え方
Htmlに直接入力する場合はfillの数値を変える
cssの場合はプロパティfill:;使用する

ｓｖｇはブラウザの関係によって余白が少し入ってしまうことがあるためtransform: translateY(-1px);
position: relative;
z-index: -1;
}
で対処する。

便利なShortcutkey
Alt + 上下キー
 選択範囲の行の移動
Ctrl + Shift + K
 消したあとに間隔（スペース）が残らない行削除
Ctrl +（ Shift） Enter
 任意の場所でも次の行にカーソルを移動できる。
 Shiftも同時に押すと逆の動作
Alt + クリック（複数カーソル）
 好きな場所にカーソルを任意に増やすことができる
Alt + ドラッグ（複数範囲指定）
 Alt押しながらドラッグすると複数の範囲指定ができる
Alt+W
 Altを押しながらマウスをドラッグ（複数範囲選択）
 囲みたい部分を範囲選択してAlt+Wを押すとHTMLタグで囲む
 で調整する

target="_blank"
新しいタブで開く
target="リンクの表示先の指定"どこで展開されるかを記載
target="_blank"は脆弱性がありフィッシングサイトで悪用される。
対策
rel="noopener noreferrer"を入れる
noopenerは、新しいタブで開かれるリンクを参照できなくする指定のこと。

flex-wrap: wrap;
折り返しのプロパティ

kvのimgはdivでコンテナを作ってその中にimgタグで入れる
imgタグには必ず幅と高さを入れる（あくまでimgタグに入れるサイズは比率のため、imgの表示サイズでOK、実際のサイズはcssで調整）
→レイアウトシフトが起こるため

devtoolでレイアウトシフトを調べる方法
『render』と入力
『Show Rendering』を選択
『Layout Shift Regions』にチェック
リロード

alt属性を空にすると装飾目的と識別される
コンテンツの場合は入力する。

XML　拡張可能なマークアップ言語
htmlはWEBページの表示言語
XMLはデータ記述用の表示言語
データのやり取りや管理を簡単にするために用いられる
<?xml　?>で宣言している

letter-spacingの注意点
文字の右側に余白が入る。従って、text-align: center;した場合は、文字の先頭の左側にも同じだけの余白を入れないと正確な中央になりません。
下記のように調整をする必要がある
padding: 0 16px 0 calc(16px + 0.1em);
https://moshashugyo.com/lessons/migliore/sections/1452460988591703808

text-transform: uppercase;
すべての大文字にしてくれる