article要素 雑誌や新聞の記事、ブログの投稿などの、ドキュメント内で自己完結した構成物を表す。 header要素 導入やナビゲーションを表し、footer要素には関連ドキュメントへのリンクや著作権情報などを表す。 ※header要素、footer要素は直近の祖先である…

セクションとは 見出しとそれに続くコンテンツによって構成され、ドキュメントの章や節を表すもの。 セクションがあることでWebページを構造化できる。 セクション構造の決定ルール セクション内ではじめて現れる見出しが、そのセクションの見出しとなる。 1…

各カテゴリの解説 カテゴリ 説明 フローコンテンツ ブラウザに表示する要素。ほとんどの要素を包括する フレージングコンテンツ テキストを構成する要素 セクショニングコンテンツ セクションを構成する要素 ヘディングコンテンツ 見出しを構成する要素 組み…

優先順位はスタイルシートを記述した場所やセレクタによって決める。 スタイルシートの優先順位 インラインスタイルシート 外部スタイルシート または 内部スタイルシート ユーザスタイルシート ユーザエージェントスタイルシート セレクタによるCSSプロパテ…

マルチカラムレイアウトとは 多段レイアウトを実現するレイアウト 複数列で構成されるレイアウトを用意に作成できる マルチカラムレイアウト関連の主なプロパティ プロパティ名 説明 columns column-countプロパティとcolumn-widthプロパティのショートハン…

inear-gradient関数とは 直線的にグラデーションをつける 1つ目の値を角度(deg)で指定した場合、値は上が0deg、下が180deg radial-gradient関数とは 円形にグラデーションをかける

box-shadowプロパティとは 要素に影をつけるプロパティ box-shadowプロパティの値 値 説明 1つ目 影のｘ軸の方向 2つ目 影のｙ軸の方向 3つ目 影のぼかし指定 ４つめ 影の拡大指定 inset 影の内側につけるキーワード

borderプロパティとは 枠線関連のショートハンドプロパティ borderプロパティで設定できるプロパティ プロパティ名 説明 border-width 枠線の幅を指定する border-style 枠線のスタイルを指定する border-color 枠線の色を指定する ※border-radiusプロパティ…

background-sizeプロパティとは 背景画像の大きさを指定する background-sizeプロパティの主な値 値 説明 auto 背景画像の元の縦横比を崩さずに拡大・縮小する contain トリミングや伸張なしに可能な限り背景画像を縮小・拡大する cover 伸張なしに可能な限…

backgroundプロパティとは 背景関連のショートハンドプロパティ backgroundプロパティでまとめて設定できるプロパティ プロパティ名 説明 background-image 背景画像を指定する background-position background-originの設定から相対位置で、背景画像の位置…

floatプロパティとは HTMLの要素を左右に回り込ませるプロパティ 要素を横並びにできる clearプロパティとは floatで設定した要素の回り込みを解除するプロパティ

ブロックレベル要素とは 親要素の領域全体を使用するブロックを構成する インライン要素とは 要素字体の領域のみを使用する 主なブロックレベル要素とインラインレベル要素 レベル 主な要素 ブロックレベル div、 canvas、 form、 h1、 ol、 ul、 li、 p、 t…

text-decorationプロパティとは テキスト装飾関連プロパティのショートハンドプロパティ text-decorationプロパティで指定できるプロパティ プロパティ名 説明 text-decoration-line 装飾(線)の種類を指定する。underline(下線)、overline(上線)、line-throu…

主なテキスト関連のプロパティ プロパティ名 説明 text-transform テキストの大文字/小文字表記方法を指定する white-space 空白文字の扱い方を指定する word-break 改行方法を指定する hyphens 行を折り返す最のハイフンを指定する text-align テキストの寄…

fontプロパティとは フォント関連のショートハンドプロパティ fontプロパティで指定できるプロパティ プロパティ名 説明 font-style フォントスタイルを指定する font-variant フォントをスモールキャップ(小文字を同じ高さの大文字)に切り替える font-weigh…

font-familyプロパティとは フォントを指定するプロパティ 指定したフォントはブラウザが動作している環境にインストールされているものが使用されるため、指定したフォントが必ず使用できるとは限らない フォントはいくつでも指定できる font-familyの記述…

font-weightとは フォントの太さを指定するプロパティ 数値やキーワードなどで値を指定できる font-styleとは フォントのスタイルを指定するプロパティ italicとobique(斜体)を指定できる

font-sizeプロパティとは フォントサイズを指定するプロパティ 主なフォントサイズの単位 単位 説明 xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large フォントサイズを指定するキーワード。 mediumは<font size="3">と同等。 smaller、 larger 親要素の</font>…

animationプロパティとは @keyframe規則で定義したアニメーションを要素に適用するためのプロパティ 主なアニメーション関連のプロパティ プロパティ名 説明 animation アニメーション関連のショートハンドプロパティ animation-name アニメーションのキーフ…

＠keyframes規則とは アニメーションのキーフレーム(通過点)を定義するための規則 ＠keyframes規則の記述例 @keyframes fadeout { from { margin-left: 0%; opacity: 1; } to { margin-left: 100%; opacity: 0; } } from、toは％に変更可能

transitionプロパティとは 変化速度を制御する。 主なトランジション関連プロパティ プロパティ 説明 transition トランジションのショートハンドプロパティ transition-duration 変化にかかる時間を秒(s)、またはミリ秒(ms)で指定する transition-property …

caption-sideプロパティとは キャプションの表示位置を指定するプロパティ。 キャプションを上下のいずれかの位置に表示できる。 左右への表示はCSS2.1で削除された。

transformプロパティとは 要素を移動、回転、拡大/縮小、傾斜することが可能。 transformプロパティの主な設定値 設定値 説明 translate(X軸[,Y軸]) 要素を移動する。 rotate(角度) 要素を回転する。 scale(数値) 要素を拡大/縮小する。 skew(角度) 要素を傾…

可変ボックスとは さまざまなディスプレイサイズに適応するためのレイアウトモードの1つ。 ディスプレイサイズに応じて、要素の大きさやマージンなどを最適化できる。

Webフォントとは Webサーバ上のフォントデータを取得して、ブラウザ上で文字を表現するフォント。 クライアントマシン環境の影響を受けずに同一のフォントで文字を表現できる。 webフォントの設定例 @font-face { font-family: "myfont"; src: url("https://…

list-styleプロパティとは list-style-typeプロパティとlist-style-imageプロパティ、list-style-positionプロパティをまとめて設定できる。 list-styleプロパティでまとめて指定できるプロパティとその概要 プロパティ名 概要 記述例 list-style-type li要…

HTMLの要素を非表示にするCSSプロパティの設定例 opacity: 0; visibility: hidden; display: none; opacityプロパティとvisibilityプロパティを用いた場合、HTML要素が占めていたスペースは確保される。 displayプロパティで非表示にした場合、HTML要素が占…

clipプロパティとは HTML要素の特定の部分のみを可視化するCSSプロパティ。 可視化する位置をrectで指定する。 ★rectは4つの値で位置を指定する。 1つ目は要素の上からの位置。2つ目以降は順に、右からの位置、下の位置、 左からの位置 「position: absolute…

clipプロパティとは HTML要素の特定の部分のみを可視化するCSSプロパティ。 可視化する位置をrectで指定する。 rectは4つの値で位置を指定する。

疑似クラスとは 要素の状態やタイミングに対してスタイルを適用し、セレクタと組み合わせて記述する。 疑似クラスの書式 セレクタ : 疑似クラス名 { プロパティ:値; } 疑似要素とは 疑似クラスと同様に、要素のタイミングに対してスタイルを適用する。 疑似…