6日目210726 CODEStates

今日は先週のHTMLに続いてCSSを勉強しました.

CSS(Cascading Style Sheets)

CSSは、HTMLなどの表記言語の表現を決定する.△スタイルを決める.
HTMLがウェブページの構造を担当する場合、CSSはその構造を組織する.
一般ユーザー向けのアプリケーションにはユーザーインタフェースが必要です.
適切な位置に内容を配置するレイアウト設計は開発者が備えるべき基本的な素質である.
CSSは.cssファイルで合成し、HTMLのタグを使用します.cssファイルを適用できます.
ex) <link rel="stylesheet" href="style.css">CSSの基本文法は以下の通りです.
選択者とその後ろの括弧{}に、選択したHTML要素に適用するスタイルを選択者で記入します.
選択者がタグ名を使用する場合、HTMLドキュメントに同じタグ名を持つすべてのタグが選択されます.また、HTML要素の属性class、idを使用して特定の要素を選択することもできます.
classを使用して要素を選択する場合.class値の形式で選択者を記入し、idの形式で要素を選択する場合は、#id値の形式で選択者を記入します.
ex) .wrapper{ ... wrapper라는 class을 갖는 요소를 선택}      #wrapper{... wrapper라는 id값을 갖는 요소를 선택}
上の画像のコードでは、最初のbuttonセレクタがhtmlドキュメントのすべてのbutton要素にカッコ内のスタイルを適用します.
button#backwardセレクタは、button要素のid値がbackwardの要素(すべてのbuttonのスタイルに適用)にカッコ内のスタイルを適用します.
適用するスタイル定義は、キー:値(キー:値)として表されます.
一般的なスタイルのプロパティは次のとおりです.

color:文字の色を指定します.

font-family:フォントを指定します.

font-size:文字のサイズを指定します.

font-weight:文字の太さを指定します.

text-装飾:下線、横線などを指定します.

text-align:横ソートの方法を決定します.

Boreder-boxとContent-box

箱の大きさをどのように測定するかが重要です.
デフォルトでは、html要素のボックスはmargin、border、padding、contentsで構成されます.

余白:枠線の外にある要素の外部空白領域.
marginプロパティを使用して厚さを設定できます.

border:エッジ領域.borderプロパティを使用してエッジの厚さ、色、形状を設定できます.

padding:枠線の内側にある要素の内部空白領域.paddingプロパティを使用して厚さを設定できます.

contents:要素のテキストや画像などの実際の内容が置かれている領域.Width、heightプロパティを使用してサイズを設定できます.

box-sizeプロパティはwidth、heightプロパティのターゲット領域を変更できます.
デフォルトではwidthプロパティとheightプロパティを使用してコンテンツのサイズを設定しますが、これは実際には要素のbox-sizeプロパティの値がcontent-boxであるためです.
box-sizeの属性値はcontent-boxとborder-boxで、違いは以下のとおりです.

content-box:width,height属性の値はコンテンツ領域の幅と高さを表す.(デフォルト)

border-box:width、heightプロパティの値は、コンテンツ領域、塗りつぶし領域、枠線領域を含む領域の幅と高さを表します.

grid layout

gridは英語の単語で、グリッドを意味します.(水平線と垂直線が交わる集合)
関数の座標平面のように、横方向と縦方向に線を作成し、その線を基準に要素を所望の位置に配置します.これがgrid layoutです.
まずgrid layoutを使用してメッシュを生成する要素にdisplay:gridを宣言します.
次にgrid-template-columns、grid-template-rowsプロパティを使用してメッシュを生成します.

div#wrapper{
	display:grid;
    grid-template-columns:300px 300px 300px;
    grid-templates-rows: 200px 200px;
}

上記cssを適用するとが得られる
写真に示すように、wrapperというid値領域に破線メッシュを作成し、div 1~div 5に順番に並べます.
列方向(垂直方向)は3領域(300 px 3)とその領域の境界線4点線、行方向(横方向)は2領域(200 px 2)とその領域の境界線3点線でメッシュを構成している.
grid-column、grid-rowプロパティを使用してgrid領域内のgrid要素を直接位置決めすることもできます.