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フォントの使い方
ユーザーがインストールしていなくても、そのフォントを表示することができる
「idとclassを使う」
htmlのタグにid=""
もしくは、class=""で個別にタグに指定する。
CSSでは
id＝#〇〇
class=.〇〇
で指定する
idはファイル内に同じ名称のidは1つのみ指定可能
classは同名のclassを複数指定可能
半角スペースで区切ると1つのタグ内に複数のid classを指定可能
適用される優先順位は id > class