CSS propaty

１．基本

・冒頭お決まりフレーズ：@charset "urf-8";

単位

• px(ブラウザを広げても固定)/%(ブラウザや他の要素に応じてい変化)/em/rem
• 画面サイズによる大きさに対する指定：vh(veiwpoint height)/vw(veiw width)
• 親要素の大きさに対する指定：%

背景

• 色指定：boby{background-color: pink;}
• 画像指定：background-image:;
• 繰り返し：background-repeat:;（repeat(初期値)/-x/-y/non-repeax）
• 位置：background-position:数字/縦横指定(横 縦);

•   縦：top/center/bottom

    横：left/center/right

• 表示サイズ：-size:②エリア全体：cover/②画像全体表示：content/③割合：%;
• 背景ショートハンド

•   background:ulr() 繰り返し 位置/表示サイズ;

    background:ulr() no-repeat right center/cover;

• グラデーション

•   background-image:linear-gradient(135deg,#e6ba5d 0%,#9ac78a 100%);

    傾き/開始/終了

    参考サイト：ジェネレーター・ギャラリー・その他：特典参照

フォント指定

• 色：p{color:red; (カラーコード#/RBG:透明度も指定可能)
• 種類：font-family:'','','',sans-serif;)
• 英語・日本語混在：font-family:'英語','日本語',sans-serif;
• サイズ：font-size; 〇〇px;
• 太さ：font-weight: bold;
• 小文字・大文字：text-transform

•   ・すべて大文字：uppercase

    ・すべて小文字：lowercase

    ・最初の文字のみ大文字：capitalize<

• グラデーション

•   ①文字後ろに画像配置：background-image

    ②文字の後ろのみ画像指定：badkground-clip:text;

  ensp; ③文字を透明にする：color: transparent

テキスト

• 行間(行の高さ)：line-height:(推奨)1.5-1.8
• 文字間隔：letter-spacing:(推奨).o4-.12em;
• 傍線を一括指定：text-decoration:(線の位置・種類・色・太さ);
• 線の位置：下線(under)/上線(overline)/取り消し線(line-through)/線なし(none)
• 箇条書きの前の記号：list-style-type:;

•   ：(ul初期値)disc/⚪︎：circle/▪︎：square/1.：(ol初期値)decimal/なし：none

空白

• &nbs p ;通常の半角スペースと同じサイズの空白です。
• &ensp ;半角スペースより少し広い空白
• ・&emsp ;半角スペースよりさらに広めの空白（全角スペースとほぼ同じ幅）
• ・&thinsp ;より狭い空白

処理する対象：セレクタ

• タイプセレクタ：A{}　すべてのA要素　例ul：すべてのul要素に適応
• ≈子孫セレクタ：A B{}：A要素内のB以下の要素全部　例header nav ul：ヘッダーのナビ内のul要素に適応
• 子セレクタ：A>B{}：A要素内のB要素のみ
• 隣接セレクタ：A+B{}：A要素の直後にB要素があった時のみ
• 属性セレクタ：A[C]{}：Cという属性を持った要素
• lassセレクタ：.class名{}：class名のclasss属性を持った要素にだけ適応
• dセレクタ：#id名{}：id名のid属性を持った要素にだけ適応
• 類似クラス：A:〇〇[]：ある状態のセクタのみ　例hover[]：マウスオーバー時のみ

idセレクタ/classセレクタ

• 名前の付け方：数字以外で始める/２単語を繋げるときは[-/_/大文字]
• 複数選択：classのみ選択可能
• 優先順位：class優先(idはページ内リンク・Javaで使用するため)：

属性セレクタ：A[C]{}：Cという属性を持った要素

• input[type]：type属性を伴うすべてのinput要素
• input[type="text"]：type="text"属性のinput要素
• [type="text"]：type="text"属性すべて

セレクタの詳細度

• HTMLのstyle属
• idセレクタ
• classセレクタ
• タイプセレクタ
• もっとも強い上書き：!important 例：p{color:red!important}

２．ボックス概念

ブロック：display:block; 例：h1-h6/p/ul

• 並び：縦
• 幅・高さ：指定
• 余白：四辺

インライン：display:inline; 例：a/em/img/

• 並び：横
• 幅・高さ：コンテンツで変化
• 余白：左右のみ

インライン-ブロック：display:inline-block;

• 並び：横(inline)
• 幅・高さ：指定+コンテンツで変化(inline+block)
• 余白：四辺(block)

BOX

• 横幅：width
• 縦：height
• 境界内側：padding
• 境界外側：margin
• 内容：content
• 境界線：border

境界余白

• 境界内側：padding
• 境界外側：margin
• 四辺全辺指定　○px:上下左右/○px ○px:上下・左右/○px ○px ○px:上・左右・下/○px ○px ○px ○px:上・右・下・左
• 四辺個別指定　上辺：-top/下辺：-bottom/右辺：-right/左辺：-left

境界線

• 境界線四辺の大きさ・種類・色指定：border-[width/style/color]: 3px solid #fffffff
• 四辺　上辺：border-top/下辺：border-bottom/右辺：border-right/左辺：border-left
• 境界線の角：border-radius: 20px;

ボックスのサイズ

• 境界線・境界内側を含まない：border-sizing:content-box;
• 境界線・境界内側を含む ：border-sizing:border;
• border-sizingの方が直感的に指定できる*/

• ボックスの影：box-shadow:(横 px/縦 px/ぼかし px/広がりpx/影の色 #/内側 inset)
• ボックスレイアウトの指定:display: block/inline/flexbox/grid;

３．フレックスの種類

• ①親要素(フレックスコンテナ)
• ②子要素(フレックスアイテム)

• ①親要素(フレックスコンテナ)

  • 折り返し：flex-wrap/下から始まる：wrap-reverse*/
  • 横方向：justify-content

  •   寄る方向：先頭寄り(初期値)flex-start/末端寄り：flex-end/中央寄り：center

      ＋余白：間あり・両端なしspace-between/間あり・両端あり・spase-around/間・両端均等space-evenly

  • 縦方向：align-items
  • 親要素の高さに引き伸ばし(初期値)：stretch/先頭：flex-start/末尾：flex-end/天地中央center

  ②子要素(フレックスアイテム)

  • 大きさ：flex-basisi
  • 子要素の大きさに合わせる：auto/任意の数値：〇〇px
  • 縦方向：aline-self
  • 親に合わせるauto(初期値)/先頭：flex-start/末端：flex-end/天地中央：center

  ４．配置

  • コンテンツの表示方法：overflow-x(横)/y(縦)

  •   はみ出して表示：visible/非表示：hidden/スクロール：scroll/ブラウザ依存：auto

  • インライン

  •   内包するインラインの指定：text-align:center/left/right;

  • 中央寄せ

  •   boxの中央寄せ：margin: ○px(上下) auto（左右）;

      inlineの中央寄せ：text-align:center;

  要素の配置(ポジションプロパティ)

  position: ;

  • static(初期値)：動かない
  • relative：基点：自身の左上/後続要素：動かない
  • acsolute：基点：ウィンドゥ左上/後続要素：動く
  • acsoluteの基点を親要素の左上へ：親(position:relative)にしてから指定
  • left/right/top/bottom:〇〇px;

  •   

    • 重なり：z-index:数字(数字が大きほど上、整数(-もある))
    • ぎじ要素：セレクタ名::before(after){content:(画像/パス/テキスト);}
    • パララック効果：スクロールの早さの違いで動きを出す(positopn:fixed;/z-index:-1;)

    ５．アニメーション

    transition

    • transition-property/duration/delay/timing-function:;
    • transition: all 300ms ease-in 100ms

    property

    • property：プロパティ名かall
    • duration：効果の所要時間、秒数orミリ秒数
    • delay：効果が始まるまでの時間、秒数orミリ秒数
    • timing-function：変化の仕方

      ・ease：ゆっくり始まる

      ・einear：一定速度で変化

      ・eease-in：ゆっくり始まり、ゆっくり終わる

      ・ease-out：速く始まり、ゆっくり終わる

      ・ease-in-out：ゆっくり始まり、中盤で加速し、ゆっくり終わる

    transform

    • transform：変形の種類
    • 回転：rotate/移動：translate/拡大・縮小：scale/傾き：skew
    • transform-origin：変形の原点
    • 初期値：center/left top

    キーフレームアニメーション

    • animation-name：アニメーション
    • animation-duration：所用時間、秒数orミリ秒数
    • animetion-timing-function：キーワード・関数型
    • animetion-iteration-count：実行回数

    ６．画像

    高解像度用画像

    • ①SVG画像：ベクター画像(拡大しても荒くならない)

    •   (ラスター画像：ドットで形成されボケやすい)

    • ②高解像度ディスプレイ用の大きな画像を用意して切り替える
    • srcset="(解像度１倍用の画像のフォルダ名),(解像度２倍用の画像のフォルダ名)"*画像幅：max-width
    • max-width:100%;：子要素が小さい場合はそのまま(使いやすい)
    • width:100%;：子要素が小さい場合は引き延ばされる

    効果：filter：効果(値)

    • 複数指定可能：半角スペース区切る
    • 明度：brightness(130%)
    • 影：drop-shadow(10px 10ps #ccc)
    • ぼかし：blur(10px)
    • 白黒階調：grayscale(100%)
    • セピア階調：sepia(100%)
    • 彩度：saturate(180%)
    • コントラスト：contrast(180%)

    歪み補正：object

    • object-fit：表示方法、coverなどのキーワードを入れる;
    • cover：領域いっぱいに広がる
    • contain：画像全体

    配置：object-position

    横 縦：0 100%/center 90

    ７．グリッドトラック

    • 縦：grid-template-rows: 40vw 30vw 30vw 40vw 40vw
    • 横：grid-template-columns:50% 50%

    開始・終了：左上から数える

    • 開始：grid-rows(column)-start:
    • 終了：grid-rows(column)-end： 2
    • 開始終了ショートハンド：grid-rows(column)：1/ 2

    レスポンシブWEBデザイン

    • 定型文 半角スペース 条件指定(ブレイクポイント)
    • モバイル：@media screen and (max-width:640px){cssを記述}
    • PC：　　　@media screen and (max-width:920px){cssを記述}
    • 非表示
    • 当該メディアで非表示：(セレクタ)　{display: none;}
    • 別メディア非表示　　：(セレクタ)　{display: block;}

    試作段階のプロパティ：ベンダープレフィックスつける

    • ①-webkit-：google chrome/Safari/maivrosoft edge/opera
    • ②-moz-*：Firefox/
    • 確認できるサイト：Can I use?/MDN Web docs