css プロパティ一覧(配置、変化、テーブル、システム)

(作成中)

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

配置

floatの解除       :clear

特殊配置プロパティfloatの
解除をするプロパティです。

(調査中)

文章のタテ分割     :columns(調査中)

文章群を短冊状に分割する
プロパティです。

(調査中)

ボックスモデルを並べる :flex-box

ボックスモデルを、
タテ方向、ヨコ方向に整頓させる
プロパティです。

かなり重要なので、
覚えておく方が良いでしょう。

詳しくは、
下の記事をご覧ください。

記事回り込み設定    :float

写真に記事を回り込ませたり、
html要素をヨコ方向に並べたりする
プロパティです。

しかし、
扱いが非常に難しいため

ほとんどの場合で、
flex-boxを使った方が良いでしょう。

詳しくは、
下の記事をご覧ください。

(作成中)

ボックスモデルをテーブルみたいに配置 :grid(調査中)

(調査中)

html <li>の設定     :list-style

html <li>タグの設定を変える
プロパティです。

詳しくは、
下の記事をご覧ください。

(作成中)

2Dの3D化       :perspective(調査中)

(調査中)

自由に配置       :position

要素を
座標数値で自由に配置できる
プロパティです。

左上を基点に
プラス方向、マイナス方向指定できるので
思ったところへ配置できます。

しかし、
扱いに少しクセがあるので

使い方を知る必要があります。

詳しくは、
下の記事をご覧ください。

positionの重なり順序   :z-index(調査中)

プロパティpositionで置かれたものの
重なり順序を設定するプロパティです。

(調査中)

変化

複雑な変化を指定        :animation(調査中)

複雑なアニメーションのための
プロパティです。

単純なアニメーションならば
transitionを使うのもありです。

(調査中)

3Dの裏面表示         :backface-visibility(調査中)

(調査中)

透き通る設定          :opacity

透ける設定のプロパティです。

工夫次第で色々と使える
プロパティです。

詳しくは、
下の記事をご覧ください。

(作成中)

移動、回転、拡大縮小、斜傾設定 :transform

移動、回転、拡大縮小、斜傾
動かす機能が全て詰まった
プロパティです。

このtransformプロパティを
扱えるようになると
ウェブ制作の幅も広がるので

確実に覚えた方が良い
プロパティの1つです。

詳しくは、
下の記事をご覧ください。

(作成中)

簡単な変化を設定        :transition

単純なアニメーションのための
プロパティです。

複雑なアニメーションならば
animationプロパティの方が良いでしょう。

詳しくは、
下の記事をご覧ください。

(作成中)

テーブル

境界線の分離、結合        :border-collapse(調査中)

セルの境界線を結合する
プロパティです。

結合の方が見栄え良いので

border-collapse: collapse;

を、使った方が良いでしょう。

セル同士の間隔          :border-spacing

セルとセルの間隔を決める
プロパティです。

border-collapse: separate;

の時だけ使えます。

<caption>の配置設定       :caption-side

テーブルタイトル配置の
プロパティです。

上か、下
どちらかにすることができます。

空セルの枠線表示設定       :empty-cells

空セルを表示するか、
非表示にするかの
プロパティです。

テーブルのセル、行、列、固定設定 :table-layout

テーブルのサイズ固定を決める
プロパティです。

セル、行、列
それぞれ決めることができます。

システム

変数             :counter-(調査中)

印刷設定           :page(調査中)

マウスポインタの反応設定   :pointer-events(調査中)

タッチパネルの反応設定    :touch-action(調査中)

タイトルとURLをコピーしました