| color | 文字の色 |
|---|---|
| font-size | 文字の大きさ |
| font-weight | 文字の太さ |
| font-family | 文字の字体（フォント）の指定 |
| text-align | 行揃え（左寄せ、中央揃え、右寄せなど） |
|---|---|
| text-decoration | 文字の装飾（下線、上線など） |
| line-height | 行間の高さ |
| letter-spacing | 文字間隔 |
| text-indent | 文章の１行目の字下げ（インデント）の設定 |
| width | 幅 |
|---|---|
| height | 高さ |
| margin | 外部余白（一括指定は時計回り） | margin:10px 8px 5px 8px; （上）（右）（下）（左） |
|---|---|---|
| [margin-top] [margin-right] [margin-bottom] [margin-left] | ||
| padding | 内部余白（一括指定は時計回り） | padding:10px 8px 5px 8px; （上）（右）（下）（左） |
| [padding-top] [padding-right] [padding-bottom] [padding-left] | ||
| border | 枠線（線種 太さ 色） | border: solid 1px #000000; |
| [solid：実線] [dashed：破線] [dotted：点線] など | ||
| border-radius | 角丸の指定 | |
| border-collapse | tableの各セルの枠線を重ねるかどうかを指定（tableタグに指定する） | border-collapse: collapse; （枠線を重ねる） |
| box-shadow | ぼかしの影を指定 | box-shadow: 3px 3px 5px #333; |
| box-sizing | ボックスサイズの算出方法を指定 | box-sizing: border-box; （paddingとborderを幅と高さに含める） |
| background-color | 背景色 | |
|---|---|---|
| background-image | 背景画像 | background-image: url(); background-image: url(),url(); 複数指定 |
| background-repeat | 背景画像の繰り返し指定 | background-repeat: no-repeat; background-repeat: no-repeat,repeat-x; 複数指定 |
| background-position | 背景画像の位置 | background-position: center top; background-position: center top,right bottom; 複数指定 |
| list-style-type | リストマークの種類を指定 | list-style-type:none; |
|---|
| opacity | 半透明の指定 | opacity: 0.7; |
|---|---|---|
| display | 表示形式 | display: block; |
| a:hover | マウスオーバー時のCSSを定義する | |
| cursor | カーソルの形 | |
| z-index | 要素の重なり順序を指定 | |
| float | 左または右に寄せて配置する。後に続く内容はその反対側に回り込む。 | |
flex-container
.flex-container{
display: flex;
}
全体の幅に合わせてitemをどのように配置するかを指定します。
containerのjustify-contentにspace-betweenを指定すると、左右は余白なしで残り余白を均等割りします。
.flex-container{
display: flex;
justify-content: space-between;
}
justify-content:
flex-start左寄せ（デフォルト）
flex-end右寄せ
center中央寄せ
space-between残り余白の均等割り
space-around左右余白 ＋ 均等割り
全体の幅からはみ出す時のitemの折り返しを指定します。
containerにflex-wrap: wrap;を指定すると、はみ出す場合折り返します。
.flex-container{
display: flex;
flex-wrap: wrap;
}
flex-wrap:
nowrap折り返し無し（デフォルト）
wrapはみ出す場合折り返す
wrap-reverse幅が狭くなると上へと折り返す
縦方向にitemをどのように配置するかを指定します。
containerのalign-itemsにcenterを指定すると、itemの中央揃えで配置されます。
.flex-container{
display: flex;
align-items: center;
}
.flex-container{
display: flex;
align-items: baseline;
}
align-items:
stretch（デフォルト）
flex-start上寄せ
flex-end下寄せ
center中央寄せ
baseline文字のベースラインに合わせる
.flex-container{
flex-direction: column-reverse;
}
.flex-item{
width: 200px;
}
flex-direction:
row横並び（デフォルト）
row-reverse横並びで順番反対
column縦並び
column-reverse縦並びで順番反対
.flex-container{
display: flex;
align-content:space-between;
flex-wrap: wrap;
}
align-content:
stretch（デフォルト）
flex-start上寄せ
flex-end下寄せ
center中央寄せ
space-between
space-around
.item1{
order: 1;
}
order:
0（デフォルト）
2数値で指定
.item1{
flex-grow: 1;
}
.item2{
flex-grow: 2;
}
flex-grow:
0（デフォルト）
2数値で指定
flex-shrink:
1（デフォルト）
2数値で指定
.item1{
flex-basis: 350px;
}
flex-basis:
auto（デフォルト）
350px数値で指定
.flex-item{
flex: 1 1 30%;
}
See the Pen flex by noce (@miuratta) on CodePen.
See the Pen flex by noce (@miuratta) on CodePen.
See the Pen flexbox by noce (@miuratta) on CodePen.
Copyright © 2025 miuratta note
Theme by Anders Noren — Up ↑
まず、単純に横並びにします。
flex-containerにdisplay: flex;を1行加えるだけで、floatを使うより簡単に横並びになります。