【CSS】位置や幅を決める時に使われるプロパティをまとめてみた

CSS

2021.08.262020.04.24

こんにちは朱夏です。

今回は、CSSで位置や幅を決める時に使われるプロパティについてまとめてみました。

朱夏

位置や幅を決めるプロパティをまとめて覚えておいたら今後の役に立ちそう。

CSSではよく使われるプロパティなので、しっかりまとめて意味を理解していきたいと思います。

それではいってみましょう。

[もくじ]
上下左右の位置
縦幅、横幅
あとがき

上下左右の位置に使う用語は以下になります。

上：top
下：bottom
左：left
右：right

例えば「top: 10px; left: 10px;」と指定した場合、対象の要素を「上から10px、左から10px」の位置に配置します。

どの部分が起点になるのか？
Q：要素を「上から10px、左から10px」に配置する場合、要素のどこの部分が「上から10px、左から10px」なのでしょうか？A：初期値の場合、要素の左上が起点となっています。

top、bottom、left、right　は、要素の上下左右、ディスプレイの上下左右など、基準となるものを意識して設定する事がポイントになります。

また、他のプロパティと組み合わせて使う場合もあります。
「border」の場合、枠線の上部(border-top)、下部(border-bottom)、左部(border-left)、右部(border-right)をそれぞれ部分的に設定する時に使われます。

縦幅、横幅に使うプロパティは以下になります。

縦幅：height
横幅：wight

一般的には、縦幅の事を「高さ」、横幅の事を「幅」と呼ばれます。

画像を扱うimgやdivなどの要素のサイズを指定するのによく使われます。

また、要素の最大値や最小値を指定してサイズをある程度可変にする方法もあります。
参考リンクは以下になります。

というわけで、位置や幅を指定する時のプロパティをまとめてみました。

CSSでデザインをする時に必ず一度は使うことになるほど基本的なプロパティになるので、覚えておくと効果的だと思います。

今回はここまでです。
次回もよろしくお願いします。