ドキュメント : CSS
-
【CSS】ボックスモデル
HTML要素のボックスモデルについてご紹介します。ボックスモデルボックスモデルはHTML要素の領域=ボックスに関する考え方です。理解することでスタイルやレイアウトを思ったように編集できるようになる手助けになります。ボックスボックス(要素の領域)は次のように構成されています。MarginBorderPaddingContentContentContentはコンテンツ(テキストや画像など)が表示される
-
【CSS】@media - スタイルの適用条件
CSSのスタイル適用条件についてご紹介します。適用条件スタイルの適用条件を指定することができます。例えば、デスクトップとスマートフォンで同じスタイルを適用するとレイアウトが崩れてしまう場合があります。これは適用条件によってスタイルを切り替えることで、問題を解決することが可能です。@media適用条件を指定するには@mediaを使用します。@media 条件 { スタイル}条件の部分にはメディ
-
【CSS】スタイルの数値と単位
CSSのプロパティ値に使う数値と単位についてご紹介します。数値プロパティ値は整数や小数点数などの数値が利用できます。単位プロパティ値に数値を利用する場合、単位を付けます。代表的な単位にpxやem、rem、%などがあります。単位 : px単位pxはピクセルを表わします。ピクセルとはディスプレイを構成する粒の単位で、解像度によって実際のサイズが変わります。例 : font-size<style&
-
-
【CSS】スタイルの色(カラー)の値
CSSの色(カラー)の指定方法をご紹介します。カラーネームカラーネームは色の名称です。例えば赤はred、青はblue、緑はgreenなどです。<style>p { color: red;}</style><p>text text text text text</p>カラーコードカラーコードは#6桁の16進数で色を表わします。例えば赤は#FF00
-
【CSS】font - 文字のフォント
CSSのfontプロパティをご紹介します。fontfontは要素のフォントやサイズなど様々なプロパティを一括定義します。基本構文font: スタイル 変形 太さ 横幅 サイズ/行間 書体;サイズと書体は必須項目です。各値は個別プロパティで設定することもできます。スタイル文字のスタイル(通常体、筆記体、斜体など)です。個別で定義するにはfont-styleプロパティを定義します。詳しくは次の記事をご
-
-
-
【CSS】@ルール - 動作の定義
CSSの@ルール(アットルール)についてご紹介します。@ルール@ルールはCSSの動作を定義します。@charsetや@import、@mediaなど様々な種類があります。基本構文@識別子 構文;構文の部分は設定する@ルールによって異なります。また、基本的に@ルールはスタイルの最初に定義します。サンプル文字コードを設定する@charsetの例を示します。@charset "utf-8"代表的な@ルー
-
【CSS】@charset - スタイルシートの文字コード
CSSの@ルールの1つ、@charsetについてご紹介します。@charset@charsetはスタイルシートの文字コードを定義します。基本構文@charset "文字コード";サンプル次のサンプルは文字コードをuft-8に設定します。@charset "utf-8";
-
【CSS】@import - 外部スタイルシート(CSSファイル)の読み込み
CSSの@ルールの1つ、@importについてご紹介します。@import@importは外部スタイルシート(CSSファイル)を読み込みます。基本構文@import url("URL");サンプル次のサンプルはsample.css(外部スタイルシート)を読み込みます。@charset "utf-8";h1 { color: red;}<style>@import url('htt
-
-
【CSS】font-size - 文字のサイズ
スタイルのプロパティの1つ、font-sizeについてご紹介します。font-sizefont-sizeは文字のサイズを定義します。基本構文font-size: 値;サンプル次のサンプルは文字のサイズを36pxに設定します。<style>p { font-size: 36px;}</style><p>text text text text text<
-
【CSS】font-family - 文字の書体
スタイルのプロパティの1つ、font-familyについてご紹介します。font-familyfont-familyは文字の書体を定義します。基本構文font-family: 値;複数の書体を指定する場合は、カンマ(,)で値を区切ります。font-family: 値, 値, 値;値が複数ある場合、左から優先して書体の適用可否を判定します。可能な場合は適用し、不可の場合は次の書体を検証します。書体の