LoginSignup
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@likapantrip

【CSS】CSSのプロパティについて

Last updated at Posted at 2025-03-19

記事概要

CSSのプロパティについて、まとめる。

まとめ(プロパティ)

colorプロパティ

値によって自由に文字の色(色の名前 or カラーコード)を指定することができるプロパティ

h1 {
  color: red;
}

h1 {
  color: #ff0000;
}

font-sizeプロパティ

文字の大きさを指定するプロパティ

.hoge {
  font-size: 50px;
}

font-weightプロパティ

フォントの太さを指定するプロパティ

.hoge {
  font-weight: bold;
}

.hoge2 {
  font-weight: 100;
}

heightプロパティ

HTML要素の高さを指定することができるプロパティ

widthプロパティ

HTML要素の幅を指定することができるプロパティ

.hoge {
  height: 150px;
  width: 150px;
}

background-colorプロパティ

背景色を指定することができるプロパティ

.hoge {
  background-color: lightgreen;
}

list-styleプロパティ

リストのスタイルを変更することができるプロパティ

値 装飾結果
square ■
none 黒点を表示しない 
.list-1{
  list-style: square;
}

.list-2{
  list-style: none;
}

サンプルコードのcss/list-style.htmlを参照

displayプロパティ

要素の種類(ブロックレベル要素、インライン要素)を変更することができるプロパティ

値との組み合わせ 装飾結果
display: block; 指定された要素はブロックレベル要素として表示される
display: inline; 指定された要素はインライン要素として表示される
display: inline-block; 指定された要素はインライン要素とブロックレベル要素の特性を併せ持つ
display: flex; 指定された要素の子要素は横並びになる
display: none; 指定された要素は非表示になる

Flexbox

親要素にdisplay: flex;を付与することで、子要素の並び順や要素同士の幅を詳細に決める調整方法の総称

justify-contentプロパティ

display: flex;と併せて設定し、子要素における主軸方向(横並び)の配置調整ができるプロパティ

/* 左寄せ(初期値と同じ) */
.justify-content-1{
  display: flex;
  justify-content: flex-start;
}

/* 右寄せ */
.justify-content-2{
  display: flex;
  justify-content: flex-end;
}

/* 中央寄せ */
.justify-content-3{
  display: flex;
  justify-content: center;
}

/* 両端が左右に寄り、等間隔 */
.justify-content-4{
  display: flex;
  justify-content: space-between;
}

/* 両端が左右に寄り、等間隔。両端の余白:要素間余白=1:2 */
.justify-content-5{
  display: flex;
  justify-content: space-around;
}

align-itemsプロパティ

display: flex;と併せて設定し、子要素における垂直方向(縦並び)の配置調整ができるプロパティ

/* 上揃え(初期値と同じ) */
.align-items-1{
  display: flex;
  align-items: flex-start;
}

/* 下揃え */
.align-items-2{
  display: flex;
  align-items: flex-end;
}

/* 中央揃え */
.align-items-3{
  display: flex;
  align-items: center;
}

flex-directionプロパティ

display: flex;と併せて設定し、子要素の主軸方向や並び順を変更するプロパティ

/* 左から右に並べる(初期値と同じ) */
.flex-direction-1{
  display: flex;
  flex-direction: row;
}

/* 右から左に並べる(並び順を変更) */
.flex-direction-2{
  display: flex;
  flex-direction: row-reverse;
}

/* 上から下に並べる(軸の方向を変更) */
.flex-direction-3{
  display: flex;
  flex-direction: column;
}

/* 下から上に並べる(軸の方向と並び順を変更) */
.flex-direction-4{
  display: flex;
  flex-direction: column-reverse;
}

サンプルコードのcss/index_display_flex.htmlを参照

display:block;

  • インライン要素をブロックレベル要素に変換できる
  • 縦に並べる事ができる
.display-block {
  display: block;
}

サンプルコードのcss/index_display_block.htmlを参照

borderプロパティ

要素の境界線の幅や色を変更できるプロパティ

.border-1 {
  border: 1px solid black;
}

.border-2 {
  border: 5px double red;
}

サンプルコードのcss/index_border.htmlを参照

border-styleプロパティ

要素の境界線のスタイルを指定できるプロパティ

.hoge {
  border-style: solid;
}

paddingプロパティ

要素の内側に余白を作成するプロパティ

/* [上下左右]の内側の余白をまとめて10pxに指定 */
.padding-1 {
  padding: 10px;
}

/* [上下][左右]の内側の余白をそれぞれ10px・20pxに指定 */
.padding-2 {
  padding: 10px 20px;
}

/* [上][左右][下]の内側の余白をそれぞれ10px・20px・30pxに指定 */
.padding-3 {
  padding: 10px 20px 30px;
}

/* [上][右][下][左]の内側の余白をそれぞれ10px・20px・30px・40pxに指定 */
.padding-4 {
  padding: 10px 20px 30px 40px;
}

サンプルコードのcss/index_padding.htmlを参照

marginプロパティ

要素の外側に余白を作成するプロパティ

/* [上下左右]の外側の余白をまとめて10pxに指定 */
.margin-1 {
  margin: 10px;
}

/* [上下][左右]の外側の余白をそれぞれ10px・20pxに指定 */
.margin-2 {
  margin: 10px 20px;
}

/* [上][左右][下]の外側の余白をそれぞれ10px・20px・30pxに指定 */
.margin-3 {
  margin: 10px 20px 30px;
}

/* [上][右][下][左]の外側の余白をそれぞれ10px・20px・30px・40pxに指定 */
.margin-4 {
  margin: 10px 20px 30px 40px;
}

/* 値ではなく'auto'を設定すると、外側の余白を均等に割り振る */
.margin-5 {
  margin: 10px auto;
}
  • 下記を用いることで、各一方向のみの指定可能
    • margin-topプロパティ
    • margin-bottomプロパティ
    • margin-leftプロパティ
    • margin-rightプロパティ

サンプルコードのcss/index_margin.htmlを参照

positionプロパティ

指定した要素の配置方法を決めることができるプロパティ

記述方法 装飾結果
position: relative; 現在の位置を基準に相対的な位置を決める
position: absolute; 特定の地点を基準に絶対的な位置を決める（デフォルトの基準はウィンドウ左上）
position: fixed; 要素を指定した位置に固定する
  • positionプロパティを指定した要素に、基準（上、下、左、右）の距離を指定することができる
    • topプロパティ
    • bottomプロパティ
    • leftプロパティ
    • rightプロパティ
/* 絶対位置(ブラウザの左上)を基準に変更 */
.position-1 {
  position: absolute;
  top: 0;
  left: 0;
}

/* 相対位置の基準に変更(子要素の基準が変わる) */
.position-2 {
  position: relative;
}

サンプルコードのcss/index_position-1.html css/index_position-2.html css/index_position-3.html css/index_position-4.htmlを参照

text-alignプロパティ

水平方向における要素の配置を指定するためのプロパティ
値にはleft（左寄せ） right（右寄せ） center（中央寄せ）などを設定できる

.hoge {
  text-align: right;
}

text-decorationプロパティ

テキストの装飾を指定するプロパティ

装飾結果
none テキストの装飾を行わない（a要素の初期装飾を無効化できる）
underline テキストに下線を引く
overline テキストに上線を引く
line-through テキストに取り消し線を引く

まとめ(プロパティで使用する単位)

px(ピクセル)

デジタル画面の最小の単位

/* 文字サイズが50pxとなる */
.hoge {
  font-size: 50px;
}

%(パーセント)

親要素のサイズを100%としたとき子要素のサイズを親要素に対して何%で設定するかを決められる

/* 親要素がwidth100pxの場合、widthは50pxとなる */
.hoge {
  width: 50%;
}

vh(ブイエイチ)

viewportの高さ（height）に対する割合のことを指す
1vhと指定した場合は、ブラウザで表示されている高さの1%になる

/* ブラウザで表示されている高さが1000pxの場合、100pxとなる */
.hoge {
  height: 10vh;
}

vw(ブイダブリュー)

viewportの幅（width）に対する割合のことを指す
1vwと指定した場合は、ブラウザで表示されている幅の1%になる

/* ブラウザで表示されている幅が1000pxの場合、100pxとなる */
.hoge {
  width: 10vw;
}

clac

  • 全体の高さや横幅から一定の値を差し引く
  • ()の中の計算結果が値となる
/* ブラウザで表示されている幅が1000pxの場合、980pxとなる */
.hoge {
  width: calc(100% - 20px);
}

ボックスモデル

ボックスは下記で構成されている

  • content：ボックス自体
  • padding：枠の内側にある余白
  • border：ボックスの枠
  • margin：枠の外側にある余白
.content-boxmodel {
  margin: 10px;
  border: 5px solid black;
  padding: 20px;
}

Image from Gyazo

※padding border marginは、ブロックレベル要素のみ設定でき、インライン要素には設定できない

サンプルコードのcss/index_boxmodel.htmlを参照

参考記事

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?