HTML&CSS②
HTML&CSS②
～HTML～
<header></header>と<footer></footer>
ヘッダーとフッターはクラスが予め用意してある。
CSSで使うときは「.」が不要。
～CSS~
背景画像を指定…background-image
background-image : url(xxx.png);
背景画像の大きさを指定…background-size
contain…縦横比を崩したり画像を切り取ったりせずに画像ができるだけ大きくなるように拡大縮小
cover…縦横比が維持され、画像ができるだけ大きくなるように拡大縮小する。要素と縦横比が違う場合は上下または左右が切り取られる
auto…縦横比が維持されるように拡大縮小される
要素の位置を指定する…margin:auto
上下には指定できない。必ずwidthとセットで指定する
要素を透過する…opacity
0.0(透明)～不透明(1.0)の間で値を指定する。
子要素に適用したくない場合は「background」プロパティを使用し、rgba値で指定する。
文字の間隔を指定する…letter-spacing
インライン要素、ブロック要素、インラインブロック要素の変更…display
displayプロパティにblock,inline-block,inlineを指定することで要素を変更できる。
要素の角を丸める…border-radius
半径を指定すると角が丸くなる
テキスト等のインライン要素・インラインブロック要素の配置を指定する…text-align
leftで左寄せ、centerで中央揃え、rightで右寄せ、justifyで両端揃え
※ブロック要素の場合はmargin: 0 auto を使用する
アニメーションを付ける…transition
変化の対象や変化にかかる時間などを指定できる。
変化の対象にはプロパティが指定できる。allを指定すると全てのプロパティに適用される。hoverと組み合わせると便利。
行の高さを指定する…line-height
値が大きいほど行間が大きくなる。
要素の高さと同じ値にすると文字がちょうど中央に配置される。
文字の太さを指定する…font-weight
normal,boldを指定できる。<h1>～<h6>はデフォルトがboldになっている。
相対的な大きさの指定…％を使用
width,heightを使用する際に親要素に対する％を指定することで相対的な大きさの指定が可能になる
要素を重ねる…position:absolute(relative)
基準とする位置をtop,left(right,bottom)を使用して要素の位置の指定をすることで、要素を重ねることが可能になる。
疑似クラスと併用することで、特定の条件上で要素の位置を変更する際にも使用する。
・サイトの左上を基準とする…absolute
・指定した要素を基準とする…relative(親要素に記述、位置は子要素に記述する)
画面上に要素を固定する…position:fixed
スクロールしてもヘッダーは動かないで欲しい等の場合は、position:fixedを使用することで指定した位置に固定することが出来る。top,left,right,bottomを使用して位置を指定する
要素の重なりの順序を指定する…z-index
重なった要素中、この値が大きいほど上に表示される。
必ずpositionプロパティと併用し、整数値で指定する
ボックスに影をつける…box-shadow
box-shadow:水平方向位置 垂直方向位置 色 の順番で指定する
消すときはnoneを指定する
カーソルの形を変える…cursor
以下のリンクを参照に様々なカーソルの形を指定することができる
～疑似クラス～
カーソルが乗った時の状態を指定する…hover
セレクタ:hoverで指定出来る。例）div:hover{..;.}
このようなセレクタに付加するキーワードのことを【疑似クラス】という。
要素がクリックされている間の状態を指定する…active
セレクタ:activeで要素がクリックされている間だけCSSを適用できる
～アイコン～
使用方法
１，CSSを読み込む
２，<span>タブにfaクラスとfa-アイコン名クラスを指定する
