CSS勉強

1冊ですべて身につくHTML＆CSSとWebデザイン入門講座のまとめ復習作業
CSSの範囲で気になったり覚えておきたい部分をメモりました。

htmlでCSSの読み込ませ方
< link rel="stylesheet" href="CSSのファイルを指定">
を、htmlのhead内に記述。
※リセットCSSより下に記述しないと消されちゃうから注意

他にもhead内にstyleタグで記述する方法と
body内のタグにstyle要素で付与する方法があるが、
CSSファイルを作成してlinkで読み込ませるのが管理や効率上、最適。
※htmlのタグにstyle要素で付与する方法は、適用される優先度が上位な為、
一部のCSSだけ変更する場合などは有効？

-----------------------------------------------------------------------------------------------------------------------
CSSの書き方

雛型
@charset "utf-8"　文字コードの指定を一行目に書く。その下から記述。

セレクター {
    プロパティ: 値;
}

要素の中の要素を指定する場合は、半角スペースで区切る
セレクター_セレクター {
    プロパティ: 値;
}

--------------------------------------------------------------------------------------------------------------------------
CSSでのコメントアウトの書き方
/* */ で挟む

--------------------------------------------------------------------------------------------------------------------------
リセットCSS
ブラウザーに適用されているデフォルトのCSSを消して
自分が適用するCSSがどのブラウザーで見ても
同じ様に見えるように、予め行う。
読み込ませ方は、リセットCSS用のCSSファイルを用意して
head内からlinkで読み込ませるか、
CSSファイルの冒頭にリセットCSSを記述する方法がある

--------------------------------------------------------------------------------------------------------------------------
font-size 文字の大きさを指定 px rem %などで指定

font-family 文字のフォントを指定
※フォント名に日本語やスペーズが入る場合は" "で囲む

font-weight 文字の太さを指定 1~1000の数値か
                                                     normal bold lighter bolderなどで指定

font-style フォントのスタイルを指定
　　　　  normal italic oblique で指定

font-variant フォントをスモールキャップに指定
                     normal small-capsで指定

line-height 行の高さを指定
※囲まれてる要素の高さと同じにすると指定した要素が中央に寄る

font 上記のfont関連のプロパティを一括管理
※line-heightも含む

text-align 文章を整列させる　left right center justify で指定

text-decoration テキストに飾りを指定
　　　　　　　none underline overline line-through blink で指定

letter-spacing 文字の間隔を指定 数値で指定

color 文字の色を指定 カラーコード#・・・; かRGB値 rgb(赤, 緑, 青);で指定
　　　　　　　　　　RGB値場合、透明度の指定もできる。rgba

background-color 背景に色を指定 指定方法はcolorと同じ

background-image 背景に画像を設置 url(画像のパス);

background-repeat 背景画像の繰り返し表示方法の指定
　　　　　　　　　repeat repeat-x repeat-y no-repeat で指定

background-size 背景画像の大きさを指定
　　　　　　　　px rem %の値, coverやcontainのキーワードで指定

background-potion 背景画像の設置位置の指定
　　　　　　　　　数値指定, 横方向 left center right
                                                      縦方向 top center bottomで指定

background-clip 背景の適用範囲を指定
　　　　　　　  border-box padding-box content-box text で指定

background-origin 背景画像が描画される基準点を指定
　　　　　　　　  border-box padding-box content-boxで指定

background-attachment 画面をスクロールした際、背景を固定するか
　　　　　　　　　　　一緒に移動させるかを指定
　　　　　　　　　　　scroll fixed local で指定

background 上記のプロパティを一括で指定可能。
※プロパティ同士は半角スペースで区切る
　sizeの値は、positionの直後に/で区切る

width 幅を指定 数値,autoで指定

height 高さを指定 数値,autoで指定

margin 要素の外側の余白を指定 数値かautoで指定
margin-top right bottom left で指定も可能

padding 要素の内側の余白を指定 数値かautoで指定
padding-top right bottom left で指定も可能

border-widht ボーダー線の太さを指定
　　　　　　thin medium thick などのキーワードか数値で指定

border-style ボーダー線の線種を指定
　　　　　  none solid double dashed dotted groove ridge inset outset
　　　　　  で指定
※半角スペースで区切ってtop right bottom left で線種を分けて指定可能

border-color ボーダー線の色を指定 指定はcolorと同じ

border 上記のborderプロパティを一括で指定。 半角スペースで区切る
※borderはborder-top right bottom leftと指定も可能

list-style-type リストマーカーの種類を指定。キーワードで指定

list-style-position リストマーカーの表示位置を指定
　　　　　　　　outside inside で指定

list-style-image リストマーカーに画像を指定 url();で画像を指定

list-style 上記のlist-style関連のプロパティを一括管理

--------------------------------------------------------------------------------------------------------------------------
「Flexbox」
display: flex; 親要素に指定し、Flexboxレイアウトを適用

flex-direction 子要素の配置方向を指定
　　　　　　row row-reverse column column-reverseで指定

flex-wrap 子要素の折り返し方法を指定
　　　　  nowrap wrap wrap-reverseで指定

justify-content 水平方向の揃え方を指定
　　　　　　   flex-start flex-end center space-between space-around
　　　　　　　で指定

align-items 垂直方向の揃え方を指定
　　　　　 stretch flex-start flex-end center baseline で指定

align-content 複数行に渡った場合の揃え方を指定
　　　　　　 stretch flex-start flex-end center space-between space-around
　　　　　　 で指定

「CSSグリッド」タイル型にレイアウトする方法
display: grid 親要素に指定し、CSSグリッドを適用

grid-template-column 子要素の横幅を指定 数値で指定
※横並びにしたい数だけ半角スペースで区切って数値で指定

gap 子要素同士の余白を指定 数値で指定
※px指定の他にfr(fraction:比率)での指定も可能

grid-template-rows 子要素の高さを指定 
　　　　　　　　   指定方法はgrid-template-colunmと同じ



--------------------------------------------------------------------------------------------------------------------------
webフォントの使い方
ユーザーがインストールしていなくても、そのフォントを表示することができる
<link rel="stylesheet" href="フォントのコード">
その後、
CSSでフォント名を記述

--------------------------------------------------------------------------------------------------------------------------
「idとclassを使う」
htmlのタグにid=""
もしくは、class=""で個別にタグに指定する。
CSSでは
id＝#〇〇
class=.〇〇
で指定する

idはファイル内に同じ名称のidは1つのみ指定可能
classは同名のclassを複数指定可能

半角スペースで区切ると1つのタグ内に複数のid classを指定可能

適用される優先順位は id > class

--------------------------------------------------------------------------------------------------------------------------