カテゴリー: css

  • flex box

    cssのflex boxの使い方メモ

    基本的な使い方

    横並びにしたいブロック要素を囲む要素にdisplay: flexを指定する。

    見やすいように背景色を指定してあります

    プロパティ

    flex-direction : 子要素の配置方向

  • CSSプロパティの初期値

    CSS3のプロパティ初期値をまとめてみました。
    ※アルファベット順
    ※ショートハンドプロパティは省略

    A

    プロパティ名 初期値 説明
    animation-delay 0s アニメーションを遅れて開始させる
    animation-direction normal 繰り返しの際に逆再生で戻す
    animation-duration 0 アニメーションの再生時間
    animation-iteration-count 1 アニメーションを繰り返す回数
    animation-name none 実行させるキーフレーム
    animation-timing-function ease アニメーションの速度の変化パターン
    azimuth center 音の聞こえる横方向の位置

    B

    プロパティ名 初期値 説明
    backface-visibility visible 裏側の表示・非表示
    background-attachment scroll 背景画像の固定配
    background-clip border-box 背景の表示領域の設定
    background-color transparent 背景色
    background-image none 背景画像
    background-origin padding-box 背景画像の基準位置の設定
    background-position 0% 0% 背景画像の表示位置
    background-repeat repeat 背景画像の並び方
    background-size auto 背景画像のサイズ
    border-collapse separate セルの枠線の表示形式
    border-image-outset 0 ボーダー画像の表示領域
    border-image-repeat stretch ボーダー画像の並び方
    border-image-slice 100% ボーダー画像のスライス
    border-image-source none ボーダー画像
    border-image-width 1 ボーダー画像の表示幅
    border-radius 0 角丸の一括指定
    border-spacing 0 セルとセルの間隔
    border-top-color currentColor 上の枠線の色
    border-bottom-color currentColor 下の枠線の色
    border-left-color currentColor 左の枠線の色
    border-right-color currentColor 右の枠線の色
    border-top-left-radius 0 左上の角丸
    border-top-right-radius 0 右上の角丸
    border-bottom-right-radius 0 右下の角丸
    border-bottom-left-radius 0 左下の角丸
    border-top-style none 上の枠線の形式
    border-bottom-style none 下の枠線の形式
    border-left-style none 左の枠線の形式
    border-right-style none 右の枠線の形式
    border-top-width medium 上の枠線の太さ
    border-bottom-width medium 下の枠線の太さ
    border-left-width medium 左の枠線の太さ
    border-right-width medium 右の枠線の太さ
    bottom auto 下からの位置
    box-shadow none ボックスに影をつける
    box-sizing content-box width・heightにパディングとボーダーを含めるか

    C

    プロパティ名 初期値 説明
    caption-side top 表タイトルの表示位置
    clear none 回りこみの解除
    clip auto 見える範囲
    column-count auto 段の数
    column-gap normal 段と段の間隔
    column-rule-style none 段の境界線の線種
    column-rule-width medium 段の境界線の太さ
    column-width auto 段の幅
    content normal 内容の追加
    counter-increment none 連番の値を進める
    counter-reset none 連番のリセット
    cue-after none 要素の直後に識別音を鳴らす
    cue-before none 要素の直前に識別音を鳴らす
    cursor auto カーソルの形状

    D

    プロパティ名 初期値 説明
    direction ltr 文字表記の方向
    display inline 表示形式

    F

    プロパティ名 初期値 説明
    float none 左右への配置と回り込み
    font-size medium フォントサイズ
    font-style normal イタリック
    font-variant normal スモールキャップ
    font-weight normal フォントの太さ

    H

    プロパティ名 初期値 説明
    height auto ボックスの内容領域の高さ

    L

    プロパティ名 初期値 説明
    left auto 左からの位置
    letter-spacing normal 文字間隔
    line-height normal 行間
    list-style-image none リストマーカーの画像
    list-style-position outside リストマーカーの表示位置
    list-style-type disc リストマーカーの形式

    M

    プロパティ名 初期値 説明
    margin-top 0 上マージン
    margin-bottom 0 下マージン
    margin-left 0 左マージン
    margin-right 0 右マージン
    max-height none 最大の高さ
    max-width none 最大の幅
    min-height 0 最小の高さ
    min-width 0 最小の幅

    O

    プロパティ名 初期値 説明
    opacity 1 透明度
    orphans 2 ページ最後の段落の必要行数
    outline-color invert アウトラインの色
    outline-offset 0 ボーダーとアウトラインの間隔
    outline-style none アウトラインの形式
    outline-width medium アウトラインの太さ
    overflow visible はみ出る部分の表示方法
    overflow-x visible はみ出る部分の表示方法（横）
    overflow-y visible はみ出る部分の表示方法（縦）

    P

    プロパティ名 初期値 説明
    padding-top 0 上パディング
    padding-bottom 0 下パディング
    padding-left 0 左パディング
    padding-right 0 右パディング
    position static 相対配置・絶対配置・固定配置
    page-break-after auto 要素の直後で改ページ
    page-break-before auto 要素の直前で改ページ
    page-break-inside auto 要素内での改ページの禁止
    pause-after 0 要素の直後の読み上げ休止時間
    pause-before 0 要素の直前の読み上げ休止時間
    perspective none バース（遠近感）の度合い
    perspective-origin 50% 50% perspectiveの原点を設定
    pitch medium 読み上げ時の声の高さ
    pitch-range 50 読み上げ時の声の高さの変化幅
    play-during auto 読み上げ時のバックグラウンド音

    R

    プロパティ名 初期値 説明
    resize none ボックスのリサイズを可能にする
    richness 50 読み上げ時の声の明瞭度
    right auto 右からの位置

    S

    プロパティ名 初期値 説明
    speak normal 音声読み上げ時の読み方
    speak-header once 表の見出しの読み上げ方
    speak-numeral continuous 数字の読み上げ方
    speak-punctuation none 句読点や記号の読み上げ方
    speech-rate medium 読み上げる速度
    stress 50 読み上げ時のアクセントの強さ

    T

    プロパティ名 初期値 説明
    table-layout auto テーブルの表示形式
    text-align left 行揃え
    text-decoration none 下線・上線・取消線・点線
    text-emphasis-style none 圏点の種類
    text-indent 0 1行目のインデント
    text-shadow none 文字の影
    text-transform none 大文字・小文字
    top auto 上からの位置
    transform none 移動・回転・拡大縮小・傾斜
    transform-origin 50% 50% トランスフォームの原点を設定
    transform-style flat 子要素の2D/3Dの設定
    transition-delay 0 トランジションを遅れて開始させる
    transition-duration 0 トランジションの再生時間
    transition-property all トランジションを適用するプロパティ
    transition-timing-function ease トランジションの速度の変化パターン

    V

    プロパティ名 初期値 説明
    vertical-align baseline インラインまたはテーブルセル要素の縦方向の整列
    visibility visible 表示・非表示

    W

    プロパティ名 初期値 説明
    white-space normal 空白・改行・タブの処理
    width auto ボックスの内容領域の幅
    word-spacing normal 単語間隔

    Z

    プロパティ名 初期値 説明
    z-index auto 重なる順序