忘れがちなCSSプロパティ

2020年10月11日

フロントエンド

今回はつい忘れてしまうCSSのプロパティについてまとめていきます。たまに使うときに毎回調べている気がするので備忘録と頭に入れ直すために記事として書いていきます。

position

まずはpositionについてまとめていきます。

positionで指定できるのはstaticとabsoluteとrelativeとfixedです。

staticは初期値になります。配置方法を指定しません。top、bottom、left、rightは適用されません。ほとんど指定することはないかなと思います。

fixedはスクロールしても固定表示になります。

absoluteは絶対位置への配置となります。絶対位置と言ってもよくわからないと思います。移動するときの基準がウィンドウまたは親要素になります。他の要素を無視して左上(top:0、left:0)の位置になります。何もせずにabsoluteを指定するとページの一番左上に行ってしまいますね。

relativeはpositionを記述する前に配置されていた場所から移動します。元々の位置から指定された数値分動く感じですね。

absoluteとrelativeを実際に使う時

absoluteとrelativeで自由に要素を配置するときには、大体親要素を基準として子要素を動かしたいという時が多いです。自由に配置できるabsoluteだけで動かそうとすると一番左端に行ってしまい、位置の調整にもかなり時間が掛かってしまいますよね。親要素を基準にするには、まず親要素にrelativeを記述する必要があります。その後に子要素にabsoluteを記述すると、親要素の左上を基準として、子要素を配置することができます。少し複雑なデザインのサイトなどでは必ず使うことになると思うので是非とも覚えておきたいところです。

とりあえず親要素にrelative、子要素にabsoluteを記述するということを頭に入れておきます。

background

実際の案件などになるとがっつり使うことになると思いますが、自主制作でサイトを作るとなるとブログやポートフォリオサイトになり、なかなか背景画像を使う場面が少なく、つい忘れがちなプロパティです。backgroundは背景に関する指定をまとめて行います。大体は背景画像を入れたい時に使用します。主に指定することになるbackground-image、background-position、background-repeat、background-sizeについてまとめていきます。

background-image

background-imageは背景画像のパスを指定します。以下のように指定します。imageフォルダ内のsample.pngという画像を指定していると仮定します。

background-image: url("../image/sample.png");

ディレクトリにもよりますが上記のように指定すれば問題ないです。複数指定する場合は

background-position

background-positionは要素のボックスを基準にX座標、Y座標を指定します。最初に指定した値がX軸、後に指定した値がY軸になります。指定できる値は以下になります。

X軸に指定する場合

  • center
  • left
  • right
  • %
  • px
  • em

Y軸に指定する場合

  • center
  • top
  • bottom
  • %
  • px
  • em

値を1つずつだけでなくrightを指定して右寄せにしてからpxや%で数値でそこから配置することなどもできます。右寄せにして数値で指定すると右からその数値分左側によります。例として以下のように指定すると要素を一番右に寄せて、そこから20%左に配置し、下に寄せてそこから30%上に配置します。

background-position: right 20% bottom  30%;

background-repeat

背景画像をどの方向に繰り返すかを指定するプロパティです。以下の値を指定できます。

  • repeat
    • 繰り返します
  • repeat-x
    • 横方向に繰り返します
  • repeat-y
    • 縦方向に繰り返します
  • no-repeat
    • 繰り返しません
  • space
    • 繰り返します。見切れてしまうときは空白で調整します。
  • round
    • 繰り返します。見切れてしまうときは画像を縮小・拡大します。

background-size

背景画像のサイズを指定するのに使用します。pxや%で指定する場合は幅と高さ2つ値を指定します。1つだけだと片方はautoになります。以下の値が指定できます。

  • auto
    • 自動で算出します(初期値)
  • cover
    • 縦横比はそのままで、要素を全て覆うように背景画像を拡大縮小する
  • contain
    • 縦横比はそのままで、要素に収まる最大の大きさで背景画像を拡大します。
  • px
  • %

ショートハンドでまとめて指定

これらのすべてのプロパティをbackgroundプロパティでまとめて指定できます。background:image position repeat/size;と指定します。記述例は以下になります。

background: url("../image/sample.png") right 30% bottom 90% no-repeat / cover;

box-shadow

影をきれいに描写できるbox-shadowプロパティについてです。指定はbox-shadow:x軸 y軸 ぼかしの距離 広がりの距離 影の色 inset;となります。insetは指定しなくても大丈夫です。

x軸はpxで指定します。正の値は右へ、負の値は左へ影が移動します。

y軸はpxで指定します。正の値は下へ、負の値は上へ影が移動します。

ぼかし距離は値が大きいほど影の端のぼかしが強くなります。値が0になると影の端がはっきりとします。負の値を指定することはできません。

広がりの距離は、正の値は影をに拡大、負の値は縮小します。

insetを指定すると影が内側につきます。

まとめ

最近使って忘れていたなと思うプロパティをまとめてみました。また、忘れがちなプロパティがあったらまとめ直そうと思います。

Pocket

related

Hexoを使ってみた

今回は、静的サイトジェネレーターのひとつであるHexoを使って日記的なサイトを作ってみたので簡単な紹介とHexoの使い方などまとめていこうと思います。制作したサイトのURLはこちらです。URL(htt

フロントエンド

2020.09.11

jQueryのanimate関数について

今回は、jQueryの学習の続きということでanimate()についてまとめていきます。 animate関数とは? まず、animate関数とは何なのかについてです。animate関数はjQueryで

フロントエンド

2020.04.17

Sassの基礎

前々回の記事でSassの環境を整えました( Sassの環境を整える ) 。今までは使うための準備でしたが今回は実際に使っていくための基本的な書き方を学習していきます!Sassにはたくさん書き方や応用で

フロントエンド

2020.05.31

jQueryのeachメソッドの使い方

jQueryでは複数の要素に対して繰り返し処理を行う場合にeach()を使うことができます。そのeach()を使いこなしたていきたいので今回しっかりまとめていきます! eachメソッドって何? そもそ

フロントエンド

2020.06.10

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き