css3基本プロパティメモシート
css3プロパティメモシートでcssの基本構文をマスター...
CSS（Cascading Style Sheets）は、私たちが知っているウェブのルック＆フィールを定義するものです。HTMLとJavaScriptがWebの機能的な側面を重視するのに対し、CSSはWebの視覚的な側面を扱います。
HTMLで静的ページを構築する方法を学んだら、次はCSSでスタイルを整えて見栄えを良くする方法を学びましょう。CSS3プロパティメモシートは、このような場合に役立ちます。CSSの最新版であるCSS3で知っておくべき基本的な構文が網羅されています。
CSSの実用的な知識は、Webページの色、フォント、ボーダー、背景、レイアウトなどを合理的な方法でカスタマイズするのに役立ちます。さらに、Webやモバイルのアプリケーションを設計する際にも重宝しています。
無料ダウンロード：このメモ用紙は、販売パートナーであるTradePubからPDF形式でダウンロードすることができます。初めて利用する場合は、簡単なフォームに入力する必要があります。必要なCSS3プロパティメモシートをダウンロードします。
css3基本プロパティメモシート
| ショートカット | アクション |
|---|---|
| 背景特性 | |
| 背景 | 1つの宣言で様々な背景属性を定義することができます。 |
| 背景となる附属書 | 背景画像を固定するか、ページに合わせてスクロールさせるかを指定します。 |
| 背景色 | ページ上の要素の背景色を定義する。 |
| 背景画像 | 要素の背景画像を定義する。 |
| バックグランドクリップ | 要素の背景画像または色がどこまで広がるかを指定する。 |
| 背景の由来 | 背景画像を配置する領域を指定する。 |
| 背景の位置 | 背景画像の原点を定義する。 |
| 背景の繰り返し | 背景画像をどのように並べるかを指定する。 |
| 背景サイズ | 背景画像の大きさを指定する。 |
| ボーダー プロパティ | |
| ボーダー | 要素の4辺のボーダー幅、スタイル、カラーを設定します。 |
| ベゼル底面 | 要素の下枠の幅、スタイル、色を設定します。 |
| ボーダーベースカラー | 要素の下枠の色を設定する。 |
| ボーダーの左下半径 | 要素のボーダーの左下隅の形状を定義する。 |
| ボーダーの右下半径 | 要素の右下隅の境界線の形状を定義する。 |
| ボーダーボトムスタイル | 要素の下辺のボーダーのスタイルを設定します。 |
| ボーダー下部の幅 | 要素の下枠の幅を設定します。 |
| ボーダーカラー | 要素の4辺のボーダーカラーを設定します。 |
| ボーダー画像 | ボーダースタイルではなく、画像を使用する方法を指定します。 |
| ボーダー画像の開始位置 | ボーダー画像領域がボーダーフレームからはみ出ることを指定する。 |
| ボーダー画像複製 | ボーダー画像をどのように並べるかを指定します。 |
| 境界画像スライシング | 画像の境界線の内方へのオフセットを指定する。 |
| ボーダー画像ソース | ボーダーとして使用する画像の位置を指定します。 |
| ボーダー画像幅 | 画像の枠の幅を指定する。 |
| 左ボーダー | 要素の左ボーダーの幅、スタイル、色を設定します。 |
| 左ボーダーカラー | 要素の左境界線の色を設定する。 |
| 左ボーダースタイル | 要素の左ボーダーのスタイルを設定します。 |
| ボーダー左幅 | 要素の左境界線の幅を設定する。 |
| 境界半径 | 要素の角の形状を定義する。 |
| 右枠 | 要素の右側ボックスの幅、スタイル、色を設定します。 |
| 右枠の色 | 要素の右側ボックスの色を設定する。 |
| 右ボーダースタイル | 要素の右側ボックスのスタイルを設定します。 |
| 右枠の幅 | 要素の右側ボックスの幅を設定する。 |
| ボーダースタイル | 要素の四辺のボーダースタイルを設定します。 |
| ボーダーのトップ | 要素上のボーダーの幅、スタイル、色を設定します。 |
| ボーダーのトップカラー | 要素の上境界線の色を設定する。 |
| ボーダーの左上半径 | 要素のボーダーの左上隅の形状を定義する。 |
| ボーダーの右上半径 | 要素のボーダーの右上隅の形状を定義する。 |
| ボーダートップスタイル | 要素の上境界線のスタイルを設定します。 |
| ボーダー上部の幅 | 要素の上境界線の幅を設定する。 |
| ボーダー幅 | 要素の四辺のボーダーの幅を設定します。 |
| カラー属性 | |
| カラー | テキストの色を定義し、設定します。 |
| 不透明度 | 要素の透明度を定義する。 |
| 次元属性 | |
| 高さ | 要素の高さを定義する。 |
| 最大高さ | 要素の最大高さを定義する。 |
| 最大幅 | 要素の最大幅を定義する。 |
| 最低高 | 要素の高さの最小値を定義する。 |
| 最小幅 | 要素の最小幅を定義する。 |
| 幅 | 要素の幅を指定する。 |
| 生成されるコンテンツの属性 | |
| 内容 | ** 生成されたコンテンツです。 |
| 引用 | 埋め込む転置カンマを指定する。 |
| カウンタリセット | 1つまたは複数のカウンターを作成またはリセットします。 |
| カウンタ増分 | 1つまたは複数のカウンタ値をインクリメントする。 |
| 柔軟なボックスレイアウト | |
| アライメントコンテンツ | フレキシブルコンテナのアイテムの配置を指定する。 |
| アライメントプロジェクト | 項目のデフォルトアライメントを指定します。 |
| セルフアライメント | 選択した項目のアライメントを指定します。 |
| 曲げ加工 | 部材のフレキシブルな長さを指定します。 |
| スケーリングベース値 | 弾力性のあるアイテムの初期プライマリサイズを指定する。 |
| 曲げ方向 | フレキシブルアイテムの向きを指定します。 |
| 弾性流体 | flex direction と flex wrap 属性の省略記法プロパティ。 |
| レジリエントな成長 | フレックスコンテナ内の他のアイテムに対するフレックスアイテムの相対的な成長方法を指定します。 |
| 弾性収縮率 | フレックスコンテナ内の他のアイテムに対してフレックスアイテムをどのように縮小するかを指定します。 |
| フレキシブルパッケージ | フレックス項目を改行するかどうかを指定する。 |
| 調整額 | フレックスの長さや自動マージンを解決した後、フレックスコンテナの主軸に沿ってフレックスアイテムを配置する方法を指定します。 |
| ご注文 | フレックスコンテナ内のフレックスアイテムの表示順、レイアウト順を指定します。 |
| フォントの特性 | |
| フォント | フォントスタイル、フォントバリアント、フォント太さ、フォントサイズ/行の高さ、フォントファミリーのような様々なフォントプロパティを一つの宣言で定義することができます。 |
| フォントシリーズ | 要素のフォントのリストを定義します。 |
| 文字サイズ | テキストのフォントサイズを定義します。 |
| 文字サイズ | フォントのフォールバックが発生したときに、テキストの読みやすさを維持します。 |
| フォントストレッチ | フォントからノーマルフェイス、コンデンスフェイス、エキスパンドフェイスを選択します。 |
| フォントスタイル | テキストのフォントスタイルを定義します。 |
| フォント可変型 | フォントバリアントを指定します。 |
| フォントウエイト | テキストのフォントの太さを指定する。 |
| リストプロパティ | |
| リストスタイル | リストおよびリスト要素の表示スタイルを定義する。 |
| リストスタイル画像 | リストアイテムマーカーとして使用する画像を指定する。 |
| リストスタイルポジション | リストアイテムマーカーの位置を指定します。 |
| リストスタイルタイプ | リスト項目のマーカスタイルを指定します。 |
| マージンプロパティ | |
| マージン | 要素の四辺のマージンを設定します。 |
| マージンボトム | 要素の下端マージンを設定します。 |
| マージンレフト | 要素の左マージンを設定します。 |
| マージンライト | 要素の右マージンを設定します。 |
| マージントップ | 要素の上端マージンを設定します。 |
| マルチカラムレイアウトのプロパティ | |
| コラムカウント | 複数列の要素における列数を指定する。 |
| コラムフィル | 列をどのように埋めるかを指定する。 |
| コラムギャップ | マルチカラム要素におけるカラム間のギャップを指定する。 |
| コラムルール | 複数列の要素において、各列の間に引く直線（罫線）を指定する。 |
| カラムルールカラー | マルチカラムレイアウトにおいて、列と列の間に描かれる罫線の色を指定する。 |
| カラムルールスタイル | マルチカラムレイアウトにおいて、列と列の間に描かれる罫線のスタイルを指定する。 |
| カラムルールワイド | マルチカラムレイアウトにおいて、列と列の間に描かれる罫線の幅を指定する。 |
| コラムスパン | マルチカラムレイアウトで要素がまたがる列の数を指定します。 |
| 列幅 | 複数列の要素における列の最適な幅を指定する。 |
| コラムス | column-widthとcolumn-countプロパティを設定するためのショートハンドプロパティ。 |
| コラムカウント | 複数列の要素における列数を指定する。 |
| 概要 プロパティ | |
| 輪郭 | 要素のアウトラインの4辺の幅、スタイル、色を設定します。 |
| 輪郭色 | アウトラインの色を設定します。 |
| アウトライン・オフセット | アウトラインと要素のボーダーエッジの間のスペースを設定します。 |
| アウトラインスタイル | アウトラインのスタイルを設定します。 |
| アウトライン幅 | アウトラインの幅を設定します。 |
| パディングの特性 | |
| 水増し | 要素の四辺のパディングを設定します。 |
| にじゅうぞこ | 要素の下辺にパディングを設定する。 |
| パディングレフト | 要素の左側にパディングを設定する。 |
| 右詰め | 要素の右側にパディングを設定する。 |
| パッディングトップ | 要素の上側にパディングを設定する。 |
| プリントプロパティ | |
| ページブレークアフター | 要素の後に改ページを挿入する。 |
| ページブレーク前 | 要素の前に改ページを挿入する。 |
| ページレイアウトインサイド | 要素内に改ページを挿入する。 |
| テーブルプロパティ | |
| こじ開け | テーブルセルのボーダーを連結するか分離するかを指定する。 |
| ボーダー間隔 | 隣接する表セルの境界の間隔を設定する。 |
| キャプションサイド | テーブルのキャプションの位置を指定する。 |
| 空胞 | 空の表セルのボーダーと背景を表示／非表示にします。 |
| テーブルレイアウト | テーブルレイアウトアルゴリズムを指定する。 |
| こじ開け | テーブルセルのボーダーを連結するか分離するかを指定する。 |
| テキストプロパティ | |
| 方向 | テキストの方向/書き込み方向を定義します。 |
| タブサイズ | タブ文字の長さを指定する。 |
| テキストアライン | インラインコンテンツの水平方向のアライメントを設定します。 |
| テキストアラインラスト | text-alignがjustifyのとき、ブロックの最終行や強制改行の直前の行をどのように整列させるかを指定します。 |
| テキスト装飾 | テキストに付加される装飾を指定する。 |
| テキストデコレーションカラー | text-decoration-lineの色を指定する。 |
| テキストデコレーションライン | 要素にどのような線装飾***を付加するかを指定する。 |
| テキストデコレーションスタイル | text-decoration-lineプロパティで指定された行のスタイルを指定する。 |
| テキストインデント | テキストの最初の行をインデントする。 |
| テキストジャスティファイ | text-align 属性が justify に設定されている場合に、使用する両端揃え方法を指定する。 |
| テキストオーバーフロー | テキストがブロックコンテナからはみ出した場合の表示方法を指定します。 |
| テキストシャドウ | 要素のテキストコンテンツに一つ以上の影をつける。 |
| テキストへんかん | テキストの大文字と小文字を変換します。 |
| ラインハイト | テキストの行間の高さを設定します。 |
| 縦組み | 現在のテキストベースラインからの相対的な要素の垂直方向の位置決めを設定します。 |
| 文字間 | 文字と文字の間の余分なスペースを設定します。 |
| ワードプロセシング | 単語間の間隔を設定します。 |
| ホワイトスペース | 要素内の空白をどのように扱うかを指定する。 |
| ことばじり | 単語内の改行方法を指定します。 |
| ワードラップ | コンテンツがコンテナの境界を越えた場合に、単語を区切るかどうかを指定する。 |
| トランスフォームプロパティ | |
| バックフェイスビジビリティ | 変換された要素の "裏 "側を，ユーザーを向いたときに表示するかどうかを指定する。 |
| パースペクティブ | オブジェクトのすべての子要素が表示される視点を定義します。 |
| パースペクティブオリジン | パースペクティブ特性の原点（3次元空間の消失点）を定義する。 |
| 変える | 要素に2Dまたは3D変換を適用します。 |
| へんかんしゃしん | 要素の変換の原点を定義する。 |
| 変形スタイル | ネストされた要素の3D空間でのレンダリング方法を指定します。 |
| トランジションプロパティ | |
| 移行 | 要素の2つの状態間の遷移を定義する。 |
| トランジションディレイ | トランジション効果を開始するタイミングを指定します。 |
| 遷移時間 | トランジションエフェクトが完了するまでの秒数またはミリ秒を指定します。 |
| 遷移性 | トランジション効果を適用する CSS プロパティの名前を指定する。 |
| トランジションタイミング機能 | トランジションエフェクトのスピードカーブを指定します。 |
| ビジュアルフォーマットプロパティ | |
| みせる | 要素の表示方法を指定する ***creen. |
| 位置 | 要素の配置を指定する。 |
| トップ | 位置決めされた要素の上辺の位置を指定する。 |
| せいかい | 位置決めされた要素の右端の位置を指定する。 |
| 下 | 位置決めされた要素の下辺の位置を指定する。 |
| 左 | 位置決めされた要素の左端の位置を指定する。 |
| うかぶ | ボックスをフロートさせるかどうかを指定します。 |
| 鮮明 | 浮遊要素との関係で要素の配置を指定する。 |
| z-index | 配置された要素の重なり順を指定する。 |
| オーバーフロー | 要素のボックスからはみ出したコンテンツの扱いを指定する。 |
| オーバーフローX | 要素のコンテンツ領域の幅を越える場合のコンテンツの管理方法を指定する。 |
| オーバーフローワイ | 要素のコンテンツ領域の高さを超える場合のコンテンツの管理方法を指定する。 |
| リサイズ | ユーザによる要素のサイズ変更可否を指定する。 |
| 刈る | クリッピング領域を定義する。 |
| 視認性 | 要素の表示・非表示を指定する。 |
| カーソル | カーソルの種類を指定する。 |
| ボックスシャドウ | 要素のボックスに 1 つまたは複数のドロップシャドウを適用します。 |
| ボックスサイジング | CSS のデフォルトのボックスモデルを変更します。 |
| アニメーションのプロパティ | |
| アニメーション | すべてのアニメーション***の動作を指定します。 |
| アニメーションディレイ | アニメーションを遅延させて開始するタイミングを指定します。 |
| アニメーション方向 | アニメーションを前方、後方、または交互に再生するかどうかを指定します。 |
| アニメーション時間 | アニメーションが1周するのに必要な秒数またはミリ秒を指定します。 |
| アニメーションフィルモード | CSS アニメーションが実行される前後に、対象物にどのようにスタイルを適用するかを指定する。 |
| アニメーションの繰り返し回数 | アニメーションが停止するまでの再生回数を指定する。 |
| アニメーション名 | セレクトした要素に適用する @keyframes で定義された animati*** の名前を指定します。 |
| アニメーション再生状態 | アニメーションが実行中か一時停止中かを指定する。 |
| アニメーションタイミング機能 | CSSアニメーションの進行方向を指定する。 |
cssの基礎のその先へ
CSSの構成要素をマスターしたら、CSSのスキルをアップして、これらのCSSコード例で実験してみることをお勧めします。また、JavaScriptを学ぶことで、ウェブページをより高度なものにすることもできます。
写真提供：Nick Kavonis
- 2021-03-19 04:34 に公開
- 閲覧 ( 47 )
- 分類：プログラミング
