★CSS
Transform［トランスフォームアニメーション］ 要素に移動(translate)、拡大縮小(scale)、回転(rotate)、傾斜(skew)などの変形(transform)を適応させるCSSプロパティです transformプロパティの値に指定できる関数 関数名 読み方 実行効果 translate トラン…
Transition［トランジションアニメーション］ transitionを使えば、ある状態から別の状態へ滑らかに変化させることができます transition と animation の違い animation は、連続したアニメーションを作成するためのもの @keyframesで、変化していく形状な…
属性セレクター (attribute selector) ある種類の属性のある要素を対象に指定できます developer.mozilla.org <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>属性セレクター</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .sample …</meta></meta></head></html>
要素の絶対位置を指定する position: absolute; position: absolute; は、要素の配置を自由に設定することができます position: absolute; は単体で使用せず、position: relative; とセットで使います positionプロパティはabsoluteの他にも下記の4つがあり…
相対位置を指定する position: relative; 現在位置を基準に、相対位置を指定することができます position: relative; は単体で使用せず、position: absolute; とセットで使うことが多いです positionプロパティはrelativeの他にも下記の4つがあります fixed …
ブラウザで確認 CSSを適用しない状態を確認（ブラウザーの初期値が適用） VS Codeから、拡張機能「LiveServer」でプレビュー 拡張機能「LiveServer」をインストールしていない場合 VS Codeの「index.html」を開いている状態で、「index.html」のタブの上で右…
要素を中央寄せ CSSで中央に寄せができるプロパティ3選（他複数可能） text-align flexbox margin 【text-align】プロパティで左右中央寄せする方法 text-alignでブロック要素などの水平方向に対して配置を決めることができます <div class="parent"> <span>インライン要素を中央に寄せ</span></div>…
CSSで行揃え text-align: left; text-align: center; text-align: right; text-align: justify; 要素（テキスト）を左寄せ テキスト（行）をブロック内の左央に配置 すべての要素の初期値 要素（テキスト）を中央寄せ テキスト（行）をブロック内の中央に配…
文字の囲み borderを使用して、要素に枠線をつける borderプロパティの値を指定する セレクタ { boder: 線の太さ, 線の種類, 線の色 ; } 上下左右の枠線を個別に指定する 「border」と記述することにより、上→右→下→左をショートハンドで記述したことになり…
ページ全体の文字指定（初期値作成） ページ全体に反映したい文字の値は「body」に指定します（継承） body bodyは、resetとは別でページの文字の初期値を設定する 基本的には、文字情報のみ 文字色、line-heightは適宜変更する場合があります body { color:…
リセットCSS ブラウザのデフォルトスタイル（初期値）を解除するためのCSSは「リセットCSS」と呼ばれ、世界中でいろいろな手法が試されています。 目的は、各ブラウザが持つ「ボックスモデルの値」を初期化すること 以下の例は、最小記述の resetCSS の例に…
コメントアウト コメントアウトとはテキストエディタ側（コード側）に書くメモのようなもので、ブラウザには表示されません。 HTMLのコメントアウト 「」の間にコメント内容を書く <h1>これは表示されます</h1> <p>これは表示されます</p> <body> <header class="header"> </header> <main> </main> <footer> </footer> </body>
