TECH I.S.

CSS の例

CSS 構文

CSS 構文

CSS 構文の説明

CSS セレクター

要素セレクター ID セレクター クラス セレクター (すべての要素用) クラス セレクター (<p> 要素のみ) 2 つのクラスを参照する HTML 要素 ユニバーサルセレクター グループ化セレクター

CSS セレクターの説明

CSS の方法と場所

外部 CSS 内部CSS インライン CSS 複数のスタイル シート カスケード順序

CSSの説明方法

CSS コメント

一行コメント 複数行コメント

CSS コメントの説明

CSS の色

要素の背景色を設定する テキストの色を設定する 枠の色を設定する 異なる色の値を設定する RGB 値の設定 16 進値の設定 HSL 値の設定

CSS カラーの説明

CSS 背景

ページの背景色を設定する さまざまな要素の背景色を設定する ページの背景として画像を設定する 背景画像を横方向にのみ繰り返す方法 背景画像の配置方法 固定の背景画像 (この画像はページの残りの部分と一緒にスクロールしません) 1 つの宣言ですべての背景プロパティ 高度な背景の例

CSS 背景プロパティの説明

CSS ボーダー

4 つの境界線の幅を設定します 上枠の幅を設定する 下枠の幅を設定する 左ボーダーの幅を設定する 右ボーダーの幅を設定する 4 つの境界線のスタイルを設定する 上枠のスタイルを設定する 下ボーダーのスタイルを設定する 左ボーダーのスタイルを設定する 右ボーダーのスタイルを設定する 4 つの境界線の色を設定します 上枠の色を設定する 下枠の色を設定する 左枠の色を設定する 右枠の色を設定する 1 つの宣言ですべての境界プロパティ 要素に丸い境界線を追加する 両側に異なる境界線を設定する 1 つの宣言ですべての上境界線のプロパティ 1 つの宣言内のすべての下枠プロパティ 1 つの宣言内のすべての左境界プロパティ 1 つの宣言ですべての適切な境界プロパティ

CSS ボーダー プロパティの説明

CSS マージン

要素の各辺に異なる余白を指定する 4 つの値を持つ省略形の margin プロパティを使用する 3 つの値を持つ省略形の margin プロパティを使用する 2 つの値を持つ省略形の margin プロパティを使用する 値が 1 つの省略形の margin プロパティを使用する margin を auto に設定して、要素をコンテナ内の中央に配置します 親要素から左マージンを継承させる マージン崩壊

マージンのプロパティの説明

CSS パディング

要素の両側に異なるパディングを指定する 4 つの値を持つ短縮パディング プロパティを使用する 3 つの値を持つ短縮パディング プロパティを使用する 2 つの値を持つ短縮パディング プロパティを使用する 1 つの値で短縮パディング プロパティを使用する パディングと要素の幅 (ボックスのサイズ変更なし) パディングと要素の幅 (box-sizing) 要素の左パディングを設定する 要素の padding-right を設定する 要素の padding-top を設定する 要素の padding-bottom を設定する

CSS パディング プロパティの説明

CSS 高さ/幅

要素の高さと幅を設定する 要素の最大幅を設定する さまざまな要素の高さと幅を設定する パーセントを使用して画像の高さと幅を設定する 要素の最小幅と最大幅を設定する 要素の最小高さと最大高さを設定する

CSS の高さ/幅のプロパティの説明

CSS ボックス モデル

ボックスモデルのデモンストレーション 全幅250pxの要素を指定

CSSボックスモデルの説明

CSSの概要

要素の周りに線を引く (アウトライン) アウトラインのスタイルを設定する アウトラインの色を設定する アウトラインの幅を設定する 簡略化されたアウトライン プロパティを使用する アウトラインと要素の端/境界線の間にスペースを追加する

CSS アウトライン プロパティの説明

CSS テキスト

さまざまな要素のテキストの色を設定する テキストを揃える リンクの下の行を削除 テキストを装飾する テキスト内の文字を制御する テキストのインデント 文字間のスペースを指定する 行間のスペースを指定する 要素のテキスト方向を設定する 単語間の空白を増やす 要素のテキスト シャドウを指定する 要素内でのテキストの折り返しを無効にする テキスト内の画像の垂直方向の配置

CSS テキスト プロパティの説明

CSS フォント

テキストのフォントを設定する フォントのサイズを設定する フォントのサイズを px で設定します フォントのサイズを em で設定します フォントのサイズをパーセントと em で設定します フォントのスタイルを設定する フォントのバリアントを設定する フォントの太さを設定する 1 つの宣言ですべてのフォント プロパティ

フォント プロパティの説明

CSS アイコン

Font Awesome アイコン ブートストラップ アイコン Google アイコン

CSS アイコンの説明

CSS リンク

訪問済み/未訪問のリンクに異なる色を追加する リンクでのテキスト装飾の使用 リンクの背景色を指定する ハイパーリンクに他のスタイルを追加する さまざまな種類のカーソル 上級者向け - ボーダー付きのリンク ボックスを作成する

CSS リンクのプロパティの説明

CSS リスト

リスト内のすべての異なるリスト項目マーカー リスト項目マーカーとして画像を設定する リスト項目マーカーを配置する デフォルトのリスト設定を削除 1 つの宣言内のすべてのリスト プロパティ 色付きのスタイル リスト 全角ボーダーリスト

CSS リストのプロパティの説明

CSS テーブル

table、th、および td 要素に黒枠を指定する ボーダーコラプスの使用 テーブルの周りの単一の境界線 テーブルの幅と高さを指定する コンテンツの水平方向の配置を設定する (text-align) コンテンツの縦方向の配置を設定する (vertical-align) th 要素と td 要素のパディングを指定する 横仕切り ホバー可能なテーブル 縞模様のテーブル 表の枠の色を指定する テーブル キャプションの位置を設定する レスポンシブ テーブル おしゃれなテーブルを作る

CSS テーブルのプロパティの説明

CSS表示

要素を非表示にする方法 (visibility:hidden) 要素を非表示にする方法 (display:none) ブロックレベル要素をインライン要素として表示する方法 インライン要素をブロックレベル要素として表示する方法 CSS と JavaScript を併用して非表示のコンテンツを表示する方法

CSS 表示プロパティの説明

CSS ポジショニング

ブラウザ ウィンドウを基準にして要素を配置する 通常の位置を基準にして要素を配置する 要素を絶対値で配置する スティッキーポジショニング 重なり合う要素 要素の形状を設定する ピクセル値を使用して画像の上端を設定する ピクセル値を使用して画像の下端を設定する ピクセル値を使用して画像の左端を設定する ピクセル値を使用して画像の右端を設定する 画像テキストの配置 (左上隅) 画像テキストの配置 (右上隅) 画像テキストの配置 (左下隅) 画像テキストの配置 (右下隅) 画像テキストの配置 (中央揃え)

CSS 配置プロパティの説明

CSS オーバーフロー

オーバーフローの使用: 表示 - オーバーフローはクリップされません。要素のボックスの外側にレンダリングされます。 オーバーフローの使用: 非表示 - オーバーフローがクリップされ、残りのコンテンツが非表示になります。 オーバーフローの使用: スクロール - オーバーフローはクリップされますが、残りのコンテンツを表示するためにスクロールバーが追加されます。 オーバーフローの使用: auto - オーバーフローがクリップされた場合、残りのコンテンツを表示するためにスクロールバーを追加する必要があります。 オーバーフロー x とオーバーフロー y を使用します。

CSS オーバーフロー プロパティの説明

CSS フローティング

float プロパティの簡単な使い方 段落内で右に浮く境界線と余白のある画像 キャプションが右に浮く画像 段落の最初の文字を左にフロートさせる float をオフにする (clear プロパティを使用) フロートをオフにする (「clearfix」ハックを使用) フローティング ボックスを作成する 横並びの画像を作成する 同じ高さのボックスを作成する (flexbox を使用) 水平メニューの作成 Web レイアウトの例を作成する

CSS float プロパティの説明

CSSインラインブロック

インライン、インライン ブロック、ブロックの違いを表示する インライン ブロックを使用してナビゲーション リンクを作成する

CSSインラインブロックの説明

CSS 整列要素

マージンと中央揃え 中央揃えのテキスト 画像を中央に配置 位置に合わせて左右を揃える 位置に合わせた左/右揃え - クロスブラウザ ソリューション フロートに合わせて左右揃え float による左/右揃え - クロスブラウザ ソリューション パディングで垂直方向に中央揃え 垂直方向と水平方向の中央揃え 行の高さで垂直方向に中央揃え 垂直方向および水平方向の位置を中央揃えにする

CSS align プロパティの説明

CSS コンビネーター

子孫セレクター 子セレクター 隣接兄弟セレクター 一般的な兄弟セレクター

CSS コンビネータの説明

CSS 疑似クラス

ハイパーリンクに異なる色を追加する ハイパーリンクに他のスタイルを追加する :フォーカスの使用 :first-child - 最初の p 要素に一致 :first-child - すべての p 要素の最初の i 要素に一致 :first-child - すべての最初の子 p 要素のすべての i 要素に一致 :lang の使用

CSS 疑似クラスの説明

CSS 疑似要素

テキストの最初の文字を特別にする テキストの最初の行を特別にする 最初の文字と最初の行を特別にする :before を使用して、要素の前にコンテンツを挿入します :after を使用して、要素の後にコンテンツを挿入します

CSS 疑似要素の説明

CSS 不透明度

透過画像の作成 透明な画像の作成 - マウスオーバー効果 透明な画像の逆マウスオーバー効果 透明ボックス/div RGBA 値を持つ透明なボックス/div 背景画像にテキストを含む透明なボックスを作成する

CSS 画像の不透明度の説明

CSS ナビゲーション バー

完全にスタイル設定された垂直ナビゲーション バー 完全にスタイル設定された水平ナビゲーション バー フルハイトの固定垂直ナビゲーション バー 固定の水平ナビゲーション バー スティッキー ナビゲーション バー (IE または Edge 15 以前では機能しません) レスポンシブ トップ ナビゲーション レスポンシブサイドナビゲーション

CSS ナビゲーション バーの説明

CSS ドロップダウン

ドロップダウン テキスト ドロップダウンメニュー 右揃えのドロップダウン メニュー ドロップダウン画像 ドロップダウン ナビゲーション バー

CSS ドロップダウンの説明

CSS 画像ギャラリー

イメージギャラリー レスポンシブ画像ギャラリー

CSS 画像ギャラリーの説明

CSS 画像スプライト

画像スプライト 画像スプライト - ナビゲーション リスト ホバー効果のある画像スプライト

CSS 画像スプライトの説明

CSS 属性セレクター

target 属性を持つすべての <a> 要素を選択します target="_blank" 属性を持つすべての <a> 要素を選択します スペースで区切られた単語のリストを含む title 属性を持つすべての要素を選択します。そのうちの 1 つは「flower」です クラス属性値が「top」で始まるすべての要素を選択します (単語全体である必要があります)。 「top」で始まるクラス属性値を持つすべての要素を選択します (単語全体であってはなりません) 「test」で終わるクラス属性値を持つすべての要素を選択します 「te」を含むクラス属性値を持つすべての要素を選択します

CSS 属性セレクターの説明

CSSフォーム

全角入力欄 埋め込み入力フィールド 縁取り入力フィールド 下枠付き入力フィールド 色付きの入力フィールド フォーカスされた入力フィールド フォーカスされた入力フィールド 2 アイコン・画像で入力 アニメーション検索入力 テキストエリアのスタイリング 選択メニューのスタイリング スタイリング入力ボタン レスポンシブフォーム

CSS フォームの説明

CSSカウンター

カウンターを作成する ネストされたカウンター 1 ネストされたカウンター 2

CSS カウンターの説明

CSS ウェブサイトのレイアウト

シンプルでレスポンシブなウェブサイトのレイアウト ウェブサイトの例

CSS Web サイトのレイアウトの説明

CSS 角丸

要素に角を丸くする 各コーナーを個別に丸める 楕円形のコーナーを作成する

CSS 角丸の説明

CSS ボーダー画像

round キーワードを使用して、要素の周囲に画像の境界線を作成します Stretchキーワードを使用して、要素の周りに画像の境界線を作成します 画像の境界線 - 異なるスライス値

CSS ボーダー画像の説明

CSS 背景

要素に複数の背景画像を追加する 背景画像のサイズを指定する 「contain」と「cover」を使用して背景画像をスケーリングします 複数の背景画像のサイズを定義する フルサイズの背景画像 (コンテンツ領域を完全に埋める) background-origin を使用して、背景画像が配置される場所を指定します background-clip を使用して、背景の描画領域を指定します

CSS 背景の説明

CSS グラデーション

線形グラデーション - 上から下 線形グラデーション - 左から右 線形グラデーション - 対角線 線形グラデーション - 指定した角度で 線形グラデーション - 複数のカラー ストップを使用 線形グラデーション - 虹の色 + テキスト 線形グラデーション - 透明度あり Linear Gradient - 繰り返される線形グラデーション 放射状グラデーション - 等間隔のカラー ストップ 放射状グラデーション - 異なる間隔のカラー ストップ 放射状グラデーション - 形状の設定 放射状グラデーション - さまざまなサイズのキーワード 放射状グラデーション - 放射状グラデーションの繰り返し

CSS グラデーションの説明

CSS シャドウ効果

シンプルな影の効果 影に色を追加する 影にぼかし効果を加える 黒い影付きの白いテキスト 赤いネオンの輝きの影 赤と青のネオン グロー シャドウ 黒、青、濃い青の影付きの白いテキスト 要素に単純なボックス シャドウを追加する ボックス シャドウに色を追加する ボックス シャドウに色とぼかし効果を追加する 紙のようなカード（テキスト）を作成する 紙のようなカード（ポラロイド画像）を作成する

CSS シャドウ効果の説明

CSS テキスト効果

非表示のオーバーフロー コンテンツをユーザーに通知する方法を指定する 要素にカーソルを合わせたときにオーバーフローしたコンテンツを表示する方法 長い単語を分割して次の行に折り返すことができるようにする 改行ルールを指定する

CSS テキストの説明

CSS Web フォント

@font-face ルールで「独自の」フォントを使用する @font-face ルール (太字) で「独自の」フォントを使用する

CSS Web フォントの説明

CSS 2D 変換

translate() - 要素を現在の位置から移動する rotate() - 要素を時計回りに回転 rotate() - 要素を反時計回りに回転 scale() - 要素を増やす scale() - 要素を減らす skewX() - X 軸に沿って要素を傾斜させます skewY() - Y 軸に沿って要素を傾斜させます skew() - X 軸と Y 軸に沿って要素を傾斜させます matrix() - 要素の回転、拡大縮小、移動、傾斜

CSS 2D 変換の説明

CSS 3D 変換

rotateX() - 指定された角度で X 軸を中心に要素を回転させる rotateY() - 指定された角度で Y 軸を中心に要素を回転させる rotateZ() - 指定された角度で Z 軸を中心に要素を回転させる

CSS 3D 変換の説明

CSS トランジション

Transition - 要素の幅を変更する Transition - 要素の幅と高さを変更する トランジションに異なる速度曲線を指定する トランジション効果の遅延を指定する トランジション効果に変換を追加する 1 つの省略形プロパティですべての遷移プロパティを指定します

CSS トランジションの説明

CSS アニメーション

アニメーションを要素にバインドする アニメーション - 要素の背景色を変更する アニメーション - 要素の背景色と位置を変更する アニメーションを遅らせる アニメーションを停止する前に 3 回実行する アニメーションを永遠に実行する アニメーションを逆方向に実行 交互のサイクルでアニメーションを実行する アニメーションの速度曲線 アニメーション短縮プロパティ

CSS アニメーションの説明

CSS ツールチップ

右のツールチップ 左のツールチップ 上部のツールチップ 下部のツールチップ 矢印付きのツールチップ アニメーション ツールチップ

CSS ツールチップの説明

CSS スタイル画像

丸みを帯びた画像 丸で囲まれた画像 サムネイル画像 リンクとしてのサムネイル画像 レスポンシブ画像 画像テキスト (左上隅) 画像テキスト (右上隅) 画像テキスト (左下隅) 画像テキスト (右下隅) 画像テキスト (中央揃え) ポラロイド画像 グレースケール イメージ フィルタ 高度 - CSS と JavaScript を使用した画像モーダル

CSS 画像の説明

CSS 画像反射

画像の下に反射を作成する 画像の右側に反射を作成する 画像と反射の間にギャップを作成する 反射にフェードアウト効果を作成する

CSS 画像反射の説明

CSS オブジェクト適合

object-fit: カバーを使用 object-fit を使用: 含む object-fit を使用: 塗りつぶし object-fit を使用: なし object-fit を使用: 縮小 1 つの例のすべての object-fit プロパティ値

CSS object-fit の説明

CSS オブジェクトの位置

古き良き建物が中央になるように画像を配置する 有名なエッフェル塔が中央になるように画像を配置します

CSS オブジェクト位置の説明

CSS ボタン

基本的な CSS ボタン ボタンの色 ボタンのサイズ 丸みのあるボタン 色付きのボタン枠 ホバー可能なボタン シャドーボタン 無効化されたボタン ボタン幅 ボタングループ 縁取りボタン群 アニメーション ボタン (ホバー効果) アニメーションボタン（波紋） アニメーション ボタン (押された効果)

CSS ボタンの説明

CSS ページネーション

シンプルなページネーション アクティブでホバー可能なページネーション 丸みを帯びたアクティブでホバー可能なページネーション ホバー可能な遷移効果 縁取りされたページネーション 丸みを帯びた縁取りのページネーション リンク間にスペースを入れたページネーション ページネーションのサイズ リンク間にスペースを入れたページネーション 中央揃えのページネーション パン粉

CSS ページネーションの説明

CSS 複数列

複数の列を作成する 列間のギャップを指定 列間のルールのスタイルを指定します 列間の罫線の幅を指定します 列間のルールの色を指定します 列間の罫線の幅、スタイル、および色を指定します 要素がまたがる列数を指定する 列の推奨される最適な幅を指定します

CSS 複数列の説明

CSS ユーザー インターフェイス

ユーザーが要素の幅を変更できるようにする ユーザーが要素の高さを変更できるようにする ユーザーが要素の幅と高さの両方をサイズ変更できるようにする アウトラインと要素の境界線の間にスペースを追加する

CSS ユーザー インターフェイスの説明

CSS 変数

var() 関数の使用 var() 関数を使用して複数のカスタム プロパティ値を挿入する

CSS 変数の説明

CSS ボックスのサイズ変更

ボックスサイズ変更なしの要素の幅 ボックスサイズの要素の幅 フォーム要素 + ボックスのサイズ変更

CSS ボックスのサイジングの説明

CSS フレックスボックス

3 つのフレックス アイテムを含むフレックスボックス 3 つのフレックス アイテムを含むフレックスボックス - rtl 方向 フレックス方向 - 行逆 フレックス方向 - 列 フレックス方向 - 列逆 justify-content - フレックスエンド justify-content - 中央 justify-content - スペースの間 justify-content - 前後にスペース align-items - ストレッチ align-items - フレックススタート align-items - フレックスエンド 整列項目 - 中央 align-items - ベースライン フレックスラップ - nowrap フレックスラップ - ラップ フレックスラップ - ラップリバース align-content - 中央 フレックスアイテムを注文する 右マージン:auto; マージン:自動; = 完璧なセンタリング flex アイテムの align-self 残りのフレックス アイテムと比較して、フレックス アイテムの長さを指定します flexbox を使用してレスポンシブ イメージ ギャラリーを作成する フレックスボックスでレスポンシブ Web サイトを作成する

CSS フレックスボックスの説明

CSS メディア クエリ

ビューポートの幅が 480 ピクセル以上の場合は、背景色を薄緑に変更します ビューポートの幅が 480 ピクセル以上の場合、ページの左側にフローティングするメニューを表示します

CSS メディアクエリの説明

CSS メディア クエリ - その他の例

画面幅に応じて異なる背景色を設定する レスポンシブ ナビゲーション メニュー float を使用したレスポンシブ列 フレックスボックスを使用したレスポンシブ列 メディア クエリで要素を非表示にする レスポンシブフォントサイズ レスポンシブ画像ギャラリー レスポンシブ Web サイト ブラウザの向きに応じてページのレイアウトを変更する 最小幅から最大幅

CSS メディア クエリの例の説明

CSS レスポンシブ ウェブデザイン

レスポンシブ グリッド ビュー デスクトップ、ラップトップ、スマートフォンにブレークポイントを追加 典型的なブレークポイント レスポンシブ画像 レスポンシブ動画 レスポンシブ フレームワーク: W3.CSS レスポンシブ フレームワーク: Bootstrap

CSS レスポンシブ ウェブデザインの説明

CSS グリッド

グリッドレイアウト グリッド要素 グリッド列のギャップ グリッド線 グリッドコンテナ グリッドアイテム

CSS グリッドの説明

チュートリアル