CSS - 版の履歴

2024年2月22日 (木) 03:38にYによる

2024-02-22T03:38:09Z

← 古い版		2024年2月22日 (木) 12:38時点における版
1行目:		1行目:
			[[ファイル:hcj.png\|thumb\|CSS3\|300px]]

	'''CSS ( Cascading Style Sheets )''' は、HTMLタグに対してデザインや体裁を指定してサイトの見栄えや動きを美しくデザインするための記述シート。		'''CSS ( Cascading Style Sheets )''' は、HTMLタグに対してデザインや体裁を指定してサイトの見栄えや動きを美しくデザインするための記述シート。

Y: /* 主な目的 */

2019-05-08T01:45:02Z

主な目的

← 古い版		2019年5月8日 (水) 10:45時点における版
2行目:		2行目:

	==主な目的==		==主な目的==
	# その ~~Webページの目的を達成するために、閲覧者が読解しやすいデザインを実現する~~		# その Webページの目的を達成するために、閲覧者が認識/理解しやすいデザインを実現する
	# その ~~Webページの目的を達成するために、閲覧者に美しい印象を与えるデザインを実現する~~		# その Webページの目的を達成するために、閲覧者に良い印象/説得力を与えるデザインを実現する

	CSS を利用して人間学的に良いデザインをすると、その Webページは多くの人にとって素晴らしい印象や説得力を与えるものとなる。		CSS を利用して人間学的に良いデザインをすると、その Webページは多くの人にとって素晴らしい印象や説得力を与えるものとなる。

Y: /* カスタム・プロパティ */

2019-02-20T22:19:00Z

カスタム・プロパティ

差分を表示

Y: /* カスタム・プロパティ */

2019-02-20T22:02:47Z

カスタム・プロパティ

← 古い版		2019年2月21日 (木) 07:02時点における版
616行目:		616行目:
	\|-		\|-
	!<code>--*</code>		!<code>--*</code>
	\|--接頭辞が付けられたプロパティは自由に変数名をつけてスタイルを適用できる。--fevorate-color: #488cff;		\|<nowiki>--</nowiki>接頭辞が付けられたプロパティは自由に変数名をつけてスタイルを適用できる。--fevorate-color: #488cff;
	\|}		\|}

Y: /* flexアイテムの揃え位置 */

2019-02-20T22:02:24Z

flexアイテムの揃え位置

← 古い版		2019年2月21日 (木) 07:02時点における版
517行目:		517行目:
	* '''フレキシブルボックスレイアウト'''は行か列のいずれか（１次元）しか制御しないレイアウトモデル		* '''フレキシブルボックスレイアウト'''は行か列のいずれか（１次元）しか制御しないレイアウトモデル
	* [https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox フレックスボックスの基本概念] : MDN公式の説明		* [https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox フレックスボックスの基本概念] : MDN公式の説明

			==グリッドレイアウト==
			display に grid か inline-grid を指定して HTML要素を gridコンテナ化する。

			{\| class="wikitable" summary="グリッドレイアウト"
			\|-
			!<code>grid-area</code>
			\|grid-template-areas で利用するエリア名を指定（エリアベース）
			\|-
			!<code>grid-template-areas</code>
			\|grid-area で指定したエリア名を元に直感的にアイテムを配置（エリアベース）。[https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas MDN公式の説明]
			\|-
			!<code>grid-template-columns</code>
			\|グリッド列それぞれの幅を指定。300px などのピクセル指定や、1fr(fraction) などの比率指定、またその両方を使った指定ができる。記述が冗長になるときは repeat(6, 1rf) といった記述もできる
			\|-
			!<code>grid-template-rows</code>
			\|グリッド行それぞれの幅を指定
			\|-
			!<code>grid-auto-columns</code>
			\|暗黙的に作成されたグリッド列の幅を指定。minmax() も利用できる
			\|-
			!<code>grid-auto-rows</code>
			\|暗黙的に作成されたグリッド行の幅を指定。minmax() も利用できる
			\|-
			!<code>grid-column-start</code>
			\|グリッド列の縦の格子線を利用してアイテムの幅を決める。開始位置を指定。自動で一番左側の線から順に数字が振られている（ラインベース）
			\|-
			!<code>grid-column-end</code>
			\|グリッド列の縦の格子線を利用してアイテムの幅を決める。終了位置を指定（ラインベース）
			\|-
			!<code>grid-row-start</code>
			\|グリッド行の横の格子線を利用してアイテムの幅を決める。開始位置を指定。自動で一番上の線から順に数字が振られている（ラインベース）
			\|-
			!<code>grid-row-end</code>
			\|グリッド行の横の格子線を利用してアイテムの幅を決める。終了位置を指定（ラインベース）
			\|-
			!<code>grid-gap</code>
			\|グリッドセル間の間隔をまとめて指定
			\|-
			!<code>grid-column-gap</code>
			\|グリッドセル間の列間隔を指定
			\|-
			!<code>grid-row-gap</code>
			\|グリッドセル間の行間隔を指定
			\|}

			* グリッドレイアウトは行と列の両方（２次元）を制御するレイアウトモデル
			* [https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout グリッドレイアウトの基本的な概念] : MDN公式の説明

			==ダイナミック・アニメーション==
			{\| class="wikitable" summary="ダイナミック・アニメーション"
			\|-
			!<code>transition</code>
			\|２つの状態間の変化の流れをまとめて指定。それぞれのトリガーは擬似クラスか JavaScript で指定。マウスホバー変化など、簡単なエフェクトにも使える
			\|-
			!<code>transition-property</code>
			\|transition効果を適応する CSSプロパティを指定
			\|-
			!<code>transition-duration</code>
			\|transition効果の所要時間を指定
			\|-
			!<code>transition-timing-function</code>
			\|transition効果の変化のタイミング・進行割合を指定
			\|-
			!<code>transition-delay</code>
			\|transition効果が始まるタイミングを指定
			\|-
			!<code>animation</code>
			\|アニメーション情報をまとめて指定
			\|-
			!<code>animation-name</code>
			\|アニメーション効果の名前を指定。@keyframes に同じ名前を指定することでブラウザにすべてを任せるのではなく、アニメーションの流れを明示的に制御できるようになる
			\|-
			!<code>animation-duration</code>
			\|アニメーション効果の所要時間を指定
			\|-
			!<code>animation-timing-function</code>
			\|アニメーション効果の変化のタイミング・進行割合を指定
			\|-
			!<code>animation-delay</code>
			\|アニメーション効果が始まるタイミングを指定
			\|-
			!<code>animation-iteration-count</code>
			\|アニメーション効果を繰り返す回数を指定
			\|-
			!<code>animation-direction</code>
			\|アニメーション再生の向きを指定
			\|-
			!<code>animation-fill-mode</code>
			\|アニメーション再生の前後の状態を指定
			\|-
			!<code>animation-play-state</code>
			\|アニメーションが再生中か停止中か、その状態を取得
			\|}

			===カスタム・プロパティ===
			{\| class="wikitable" summary="カスタム・プロパティ"
			\|-
			!<code>--*</code>
			\|--接頭辞が付けられたプロパティは自由に変数名をつけてスタイルを適用できる。--fevorate-color: #488cff;
			\|}

Y: /* 画像 */

2019-02-20T21:52:40Z

画像

← 古い版		2019年2月21日 (木) 06:52時点における版
441行目:		441行目:
	\|画像に Photoshop のようなフィルター効果をつける。blur（ぼかし）, contrast（コントラスト）, grayscale（モノクロ）, hue-rotate（色相反転）, brightness（輝度）, saturate（彩度）, drop-shadow（[https://developer.mozilla.org/ja/docs/Web/CSS/filter-function/drop-shadow ドロップシャドウ]）など		\|画像に Photoshop のようなフィルター効果をつける。blur（ぼかし）, contrast（コントラスト）, grayscale（モノクロ）, hue-rotate（色相反転）, brightness（輝度）, saturate（彩度）, drop-shadow（[https://developer.mozilla.org/ja/docs/Web/CSS/filter-function/drop-shadow ドロップシャドウ]）など
	\|}		\|}

			===コンテンツの挿入===
			{\| class="wikitable" summary="コンテンツの挿入"
			\|-
			!<code>content</code>
			\|コンテンツを挿入・計算
			\|-
			!<code>counter-increment</code>
			\|要素のカウンターの値を進める。１位２位３位など list-style では実現できない表記に利用
			\|-
			!<code>conter-reset</code>
			\|要素のカウンターの値をリセット
			\|-
			!<code>quotes</code>
			\|引用符記号をセット
			\|-
			!<code>calc</code>
			\|値を指定する際に計算を行うことができる。width: calc(100% - 80px);
			\|}

			==フレキシブルボックスレイアウト==
			display に flex か inline-flex を指定して HTML要素を flexコンテナ化する。

			===flexアイテムの配置・折り返し・順序===
			{\| class="wikitable" summary="flexアイテムの配置・折り返し・順序"
			\|-
			!<code>flex-flow</code>
			\|flexアイテムの direction と wrap をまとめて指定
			\|-
			!<code>flex-direction</code>
			\|flexアイテムの並び方の主軸を指定。row, row-reverse, column, column-reverse
			\|-
			!<code>flex-wrap</code>
			\|flexアイテム群の横幅がコンテナの横幅より大きくなる場合に折り返すかどうかを指定。wrap, nowrap
			\|-
			!<code>order</code>
			\|コンテナ内の flexアイテムの表示順序を指定
			\|}

			===flexアイテムの幅===
			{\| class="wikitable" summary="flexアイテムの幅"
			\|-
			!<code>flex</code>
			\|flex-grow, flex-shrink, flex-basis の順にまとめて指定（推奨）。通常は flex: 1; のような表記で十分
			\|-
			!<code>flex-grow</code>
			\|flexアイテムが伸びる割合を指定
			\|-
			!<code>flex-shrink</code>
			\|flexアイテムが縮む割合を指定
			\|-
			!<code>flex-basis</code>
			\|flexアイテムの基本幅を指定
			\|}

			===flexアイテムの揃え位置===
			{\| class="wikitable" summary="flexアイテムの揃え位置"
			\|-
			!<code>justify-congtent</code>
			\|主軸（row なら横軸）における flexアイテムの位置揃えを指定。flex-start, center, flex-end, space-around, space-between, space-evenly
			\|-
			!<code>aling-items</code>
			\|交差軸（row なら縦軸）における flexアイテムの位置揃えを指定。flex-start, center, flex-end
			\|-
			!<code>aling-content</code>
			\|交差軸上に余分なスペースがある場合、flexアイテムの位置揃えを指定。flex-start, center, flex-end, space-around, space-between, stratch
			\|-
			!<code>justify-self</code>
			\|主軸における特定の flexアイテムの位置揃えを個別に指定。つまり、justify-content の設定を上書きする
			\|-
			!<code>aling-self</code>
			\|交差軸における特定の flexアイテムの位置揃えを個別に指定。つまり、align-items の設定を上書きする
			\|}

			* '''フレキシブルボックスレイアウト'''は行か列のいずれか（１次元）しか制御しないレイアウトモデル
			* [https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox フレックスボックスの基本概念] : MDN公式の説明

Y: /* カラム */

2019-02-20T21:39:39Z

カラム

@@ 421行目: / 421行目: @@
 !<code>column-fill</code>
 |カラム同士の高さを揃えるかどうかを指定
 |}

Y: /* フォント・テキスト */

2019-02-20T21:37:31Z

フォント・テキスト

@@ 367行目: / 367行目: @@
 !<code>writing-mode</code>
 |テキストやボックスのレイアウトやフロー方向を指定
 |}

Y: /* 色・透明度 */

2019-02-20T21:30:07Z

色・透明度

@@ 279行目: / 279行目: @@
 !<code>repeating-radial-gradient()</code>
 |繰り返しの円形グラデーションを指定
 |}

Y: /* 色・透明度 */

2019-02-20T21:17:16Z

色・透明度

@@ 259行目: / 259行目: @@
 {| class="wikitable" summary="色・透明度"
 |-
-!<code></code>
+!<code>color</code>
+|文字色を指定
 |}