今日はCSSのプロパティをまとめていきます!
背景やデザインに関するプロパティ
display ボタンにしたい文字をボックス化する
このタイトルの説明は使い方の一例です。この値を入力するとブロックとして扱われるので、高さや値を指定することができます。
background-radius 角を丸くする
値はpx、%、em、vwで、左上から時計回りの順で記述する。
background-image 背景画像を指定
書式は background-image: url(画像ファイルへのパス);
これで適用すると、画像がタイル状にリピートされて表示するので解除したい場合はbackground-repeatを使用します。
background-repeat 背景画像の繰り返し指定
縦方向だけ繰り返す、横方向だけ繰り返すなどの指定方法がある。
値はrepeat、repeat-x、repeat-y、no-repeat
background-position 背景画像の表示位置を指定
デフォルトは左上を基準にして画像が配置される。
値は横、縦の順に半角スペースで区切って記述する。
上下左右とも中心に置きたい場合は
background-position: center center;
とします。
background-attachment 背景のスクロール指定
スクロールするのと同時に背景がついてくるのかそれとも所定の位置で留まるのかなどを指定する
値はfixed(ついてくる)、scroll(留まる)
background-size 背景画像の大きさ指定
cover…縦横比を維持したまま領域を完全に覆うサイズに拡大縮小してくれる
border-spacing セルとセルのボーダーの距離指定
table要素で表をつくり、borderを使用して枠線を作った場合、隣り合うセルのボーダーが重なって太くなってしまったり二重になってしまったりする。
これをpx、%、em、vwで間隔の値を指定します。つまり0にするとぴったりくっつきます。
border-collapse 隣り合うボーダーを結合
もしくは分離を指定することができます。
collapse…重ねる(結合)
separate…分離(隙間を開ける)
ちなみに英語でcollapseは崩壊という意味です!ボーダーを崩壊させるということですね。
opacity 要素の透明度を指定
0.0~1.0の数値で指定します。1.0に近づくほど不透明になります。
明日は埋め込みや問い合わせフォームかな?つづく…