ドキュメント : CSS
-
【CSS】CSS入門
アプリケーションやWEBサイトは生活に欠かせない必需ツールです。CSSはそれらを構築する1つの技術です。ここではCSSについてご紹介します。CSSとはCSSの正式名称はCascading Style Sheetsです。プログラミング言語に分類されます。CSSでHTMLやXMLの要素のスタイル(装飾)を設定することができます。基本構文HTML要素に装飾を適用する基本構文は次のようになります。セレクタ
-
【CSS】コメントアウト - ソースコードの説明やメモ
CSSコードで動作に影響しないテキストを記述する方法をご紹介します。コメントアウトコメントアウトは動作に影響しないテキストの書き方です。CSSに限らずHTMLや他のプログラミング言語でもコメントアウトがあります。一般的にソースコードの説明やメモに使用します。基本構文/* テキスト *//*から*/までがコメントアウトの対象になります。複数行のコメントアウトも可能です。サンプルコード1行のみ/* h
-
【CSS】セレクター - スタイル(装飾)の対象
CSSでスタイルの適用要素を指定するセレクターについてご紹介します。セレクターセレクターはスタイルの適用要素を指定する文字列です。様々な方法でセレクターを定義することができます。基本的なセレクター要素の種類要素の種類を指定できます。要素の種類 { プロパティ名: プロパティ値;}次の例はh1要素にスタイルを適用します。<style>h1 { color: red;}<
-
-
【CSS】擬似クラス - 要素状態のセレクター
CSSの擬似クラスについてご紹介します。擬似クラス擬似クラスはセレクターにおいて、要素の状態を示すキーワードです。基本構文:擬似要素 { プロパティ名: プロパティ値;}代表的な擬似クラス擬似クラスは様々な種類があります。ここでは一般的によく使われる代表的な擬似クラスをご紹介します。:hover:hoverはポインティングデバイス(マウスカーソル)が要素に被さった状態です。<style
-
【CSS】:hover(擬似クラス) - カーソルが被さった状態
CSSの擬似クラスの1つ、hoverについてご紹介します。:hover:hoverはポインティングデバイス(マウスカーソル)が要素に被さった状態です。基本構文:hover { プロパティ名: プロパティ値;}サンプル<style>h1:hover { color: red;}</style><h1>CSSとは</h1><p>C
-
-
-
【CSS】:checked(擬似クラス) - チェック状態
CSSの擬似クラスの1つ、checkedについてご紹介します。:checkedcheckedはチェックボックスやラジオボタンがONの状態です。基本構文:checked { プロパティ名: プロパティ値;}サンプルチェックボックスにチェックを入れるとチェック時の色が赤に変わります。<style>input:checked { accent-color: #ff0000;}&l
-
【CSS】:required(擬似クラス) - 必須状態
CSSの擬似クラスの1つ、requiredについてご紹介します。:required:requiredは入力要素が必須の状態です。基本構文:required { プロパティ名: プロパティ値;}サンプル<style>input:required { display: block; border: 1px solid red;}</style><inpu
-
【CSS】:active(擬似クラス) - アクティブな状態
CSSの擬似クラスの1つ、activeについてご紹介します。:active:activeは要素がクリックなどによるアクティブになった状態です。基本構文:active { プロパティ名: プロパティ値;}サンプル<style>input:active { display: block; border: 1px solid red; outline: none;}&
-
-
【CSS】:focus(擬似クラス) - フォーカスがあたっている状態
CSSの擬似クラスの1つ、focusについてご紹介します。:focus:focusは要素にフォーカスがあたっている状態です。基本構文:focus { プロパティ名: プロパティ値;}サンプル入力項目をクリックし、フォーカスをあてると、枠線が赤くなります。<style>input:focus { display: block; border: 1px solid red
-
【CSS】:not(擬似クラス) - マッチしない要素
CSSの擬似クラスの1つ、notについてご紹介します。:not:not基本構文:not(セレクター) { プロパティ名: プロパティ値;}サンプルclass属性がformal-nameではないp要素にスタイルを定義しています。<style>p:not(.formal-name) { color: red;}</style><h1>CSSとは</