プログラミング

プログラミングノート no.5

今日はCSSのプロパティをまとめていきます!

背景やデザインに関するプロパティ

display ボタンにしたい文字をボックス化する

このタイトルの説明は使い方の一例です。この値を入力するとブロックとして扱われるので、高さや値を指定することができます。

background-radius 角を丸くする

値はpx、%、em、vwで、左上から時計回りの順で記述する。

background-image 背景画像を指定

書式は background-image: url(画像ファイルへのパス);

これで適用すると、画像がタイル状にリピートされて表示するので解除したい場合はbackground-repeatを使用します。

background-repeat 背景画像の繰り返し指定

縦方向だけ繰り返す、横方向だけ繰り返すなどの指定方法がある。

値はrepeatrepeat-xrepeat-yno-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に近づくほど不透明になります。

明日は埋め込みや問い合わせフォームかな?つづく…

ABOUT ME
KAZEPA
1994年名古屋生まれ横浜育ち大阪在住。 3歳からダンスと共に育ち、中高バレーボール部、大学は東海大学体育学部で割とアクティブに過ごす。そして現在はエンターテイナー兼クリエイターとして人生を楽しんでいる。