CSSのプロパティまとめ-レイアウト作成編
頭の整理のために、CSSにはどのようなプロパティがあるのかということをまとめました。
割と詳しく説明しますので、CSSの理解に不安がある人は参考になるはずです。
今回は、レイアウトに関するプロパティについてまとめていきます。
中央揃え
何かの要素を中央揃えにしたいと思った場合、どのプロパティを使うべきか悩みませんか？
中央揃えするためのプロパティはいくつかありますが、正しく選択しないと中央揃えが上手くいきません。
ただ、きちんと整理して理解していれば、そのような悩みもなくなるかと思います。
実際に、中央揃えに使えるプロパティを表にまとめると次のようになります。
| 方法 | 説明 |
|---|---|
| text-align: center | 子要素のインラインコンテンツとインラインブロックコンテンツを中央揃えにできる(テキストも対象) |
| margin: 0 auto | 自身が横幅の指定があるブロックコンテンツの場合、中央揃えをすることができる |
| justify-content: center | フレックスボックスの子要素を中央揃えにすることができる(flex-directionの値によってalign-itemsと役割が変わる) |
また、上下中央揃えについても解説していきます。
| 方法 | 説明 |
|---|---|
| position: absolute + margin:auto + top: 0 + bottom:0 | 高さが指定できるブロックコンテンツを中央揃えにできる |
| position: absolute; + top: 50% +transform: translateY(-50%); | 高さが指定できないブロックコンテンツを中央揃えにできる |
| align-items: center | フレックス要素を中央揃えにできる(flex-directionの値によってalign-itemsと役割が変わる) |
基本的にはflexを使ってれば問題ないです。
テーブルのレイアウト操作
テーブル要素はそのまま表示しても、思ったような表示にならないかと思います。
やはり、テーブルと言えば、きちんとborderがついてるようなものをイメージしますよね？
実際に以下のような指定をすることで、テーブルらしいデザインを作成することができます。
th,td {
border: solid 1px;/* broderを指定 */
}
table {
border-collapse: collapse;/* セルのborderを重ねる */
}
th {
width: 300px;/* 幅指定 */
height: 80px;/* 高さ指定 */
}
tr:nth-child(odd) {
background-color: #ddd;/* 背景色をゼブラ柄にする */
}
th要素などは、幅を指定しないと要素ごとにズレてしまう可能性があります。
なので、このように指定することで、そのズレを無くすことができます。
また、固定値を設定せずとも、table-layout:fixedを指定するだけでズレの問題は解決します。
float
floatは、左右に要素を寄せたい場合に使うことができます。
ただ、元々このプロパティは要素を寄せるためのプロパティではありませんでした。
なので、この使い方をすると、理解しづらい副作用を起こしてしまいます。
そのため、現在ではあまり使用されていないです。
特に理由がないのであれば、floatは使わないのが良いかと思います。
なので、今回はfloatの説明を割愛させていただきます。
position
positionプロパティを使うことで、要素の位置をより具体的に指定することができます。
プロパティ値としては、以下があります。
| プロパティ値 | 説明 |
|---|---|
| static | デフォルトの表示 |
| relative | デフォルトの位置に対して位置を指定できる |
| absolute | position: static;以外を指定した親要素を基準に位置を指定できる。高さがなくなる(floatと同じような状態になる) |
| fixed | ウィンドウに対しての固定の位置に指定できる。こちらも高さがなくなる |
| sticky | 途中までstaticで表示され、スクロールに合わせてfixedに切り替わる |
また、様々な要素の位置を変えると、要素同士が重なりあってしまうことがあります。
その場合は、z-indexプロパティを指定することで、どの要素を表示するかを選べます。
具体的には、重なりあった要素にpositionのrelativeかabsoluteが指定されている場合は、z-idnexの数値が高い方を表示します。
フレックスボックス
現在、最も人気の高いレイアウトのプロパティは、このフレックスボックスになります。
これを使うことで、かなり自由度高く、かつ簡単にレイアウトを作成することができます。
このフレックスボックスは、一次元的なレイアウトを作るためのプロパティとなります。
こちらは、親要素のフレックスコンテナと、子要素のフレックスアイテムから構成されます。
フレックスコンテナは、フレックスのレイアウトを作成するための箱になります。
コンテナに様々なプロパティを指定することで、様々なレイアウトに沿ってフレックスアイテムを表示させることができます。
また、フレックスアイテムにも様々なプロパティを設定することができ、アイテムの幅などを指定できます。
フレックスコンテナ
まず、フレックスコンテナに、display:flexを指定することでフレックスボックスを生成できます。
フレックスボックス内では、全てのアイテムをインライン上に表示することができます。
子要素の向き
まず、flex-directionで子要素の向きを指定することができます。
このプロパティがとる値は次のとおりです。
- row:横並び(デフォルト)
- column:縦並び
- row-reverse:横並びかつアイテムを逆向きで並べる
- column-reverse:縦並びかつアイテムを逆向きで並べる
子要素の折り返し
通常では、フレックスボックス内のアイテムは改行されずに、一列上に表示されます。
けれど、flex-wrapプロパティを使って、改行を制御することができます。
このプロパティがとる値は次のとおりです。
- nowrap:改行はされない(デフォルト)
- wrap:横幅を越えるタイミングで改行される
- wrap-reverse:改行されるかつ下からアイテムを並べる
また、flex-directionとflex-wrapを同時に設定できる、flex-flowというショートハンドプロパティもあります。
水平方向の位置
justify-contentというプロパティを使って、アイテムの水平方向の位置を制御することができます。
このプロパティがとる値は次のとおりです。
- flex-start:左揃え(デフォルト)
- flex-end:右揃え
- center:中央揃え
- space-between: 最初と最後の要素を両端に置き、それ以外は等幅に設置する
- space-around:横幅いっぱいに等幅に設置される
ただ、flex-directionの値によって中央寄せの向きが変わるので、注意が必要です。
垂直方向の位置
align-itemsというプロパティを使って、アイテムの垂直方向の位置を制御することができます。
このプロパティがとる値は次のとおりです。
- stretch: 親要素の高さになる(デフォルト)
- flex-start: 上揃え
- flex-end: 下揃え
- center: 中央揃え
- baseline:ベースラインで揃える
また、align-contentで、アイテムが複数行になった場合の位置も制御できます。
このプロパティがとる値は次のとおりです。
- strech,felx-start,flex-end,centerはそのままの意味
- space-between,space-aroundもjustify-contentと同じ用法
フレックスアイテム
次は、子要素のフレックスアイテムにつけるプロパティを解説していきます。
順番
orderプロパティを使って、アイテムの順序を制御できます。
初期値は0で、マイナスの数値も設定できます。
横幅
flex-growプロパティで、親要素が余った時に他の要素と比べてどのくらい伸びるかを指定できます。
初期値は0で、マイナスの値は設定できないです。
逆に、縮めたい場合はflex-shrinkを指定します。
また、flex-basisでpxや%などの具体的な横幅も指定できます。
align-self
子要素にもalign-selfという、親要素のalign-itemsと同じ効果のプロパティが存在します。
プロパティ値はalign-itemsと同じです。
両方設定されている場合は、align-selfの方が優先されます。
Grid Layout
次に、Grid Layoutについて説明していきます。
こちらは、二次元的なレイアウトを作成するためのプロパティになります。
こちらも、コンテナとアイテムから構成されます。
ただ、基本的にCSSを設定するのはコンテナだけになります。
今回は基本的なことだけを解説しますので、詳しいことは実務で使いながら都度調べればOKです。
横幅の指定
まず、gird-template-columnsプロパティを使って、子要素の横幅を設定することができます。
こちらは、pxなどで設定ができ、指定した数だけ横並びになります。
なので、下のように指定した場合は、3つのアイテムが120pxずつ横並びになります。
.grid-container{
display: grid;
grid-template-columns: 120px 120px 120px;
}
また、この時frという単位を使うことができ、この値を指定した場合は比率で横幅を指定できます。
例えば、以下のように指定した場合は、子要素の横幅は親要素の横幅と同じになるように、1:1:1で表示されます。
.grid-container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
縦幅の指定
グリッドには、横幅も指定することができます。
横幅は、gird-template-rowsで指定できます。
使い方は、grid-template-columnsと同じような感じです。
ちなみに、grid-template-columnsとやgird-template-rowsで指定する時、アイテムの数が多すぎると記述が面倒になるかと思います。
そんな時は、repeat関数を使うことができます。
具体的な使い方としては、repeat(繰り返す数,要素の幅)で指定できます。
アイテムの間隔
アイテム同士の間隔は、gapというプロパティで設定できます。
これはブロックボックスのmarginのような機能となります。
ちなみ、grid-column-gapで縦同士のアイテムに対して、grid-row-gapで横同士のアイテムに対してのgapだけを指定できます。
column-width
最後にcolumn-widthというものを解説します。
このプロパティを使うことで、段組レイアウトを作成することができます。
こちらも、コンテナとアイテムから構成されます。
基本的に、コンテナのみプロパティを設定していきます。
アイテムには、heightなどの固有の高さなどを指定します。
段組の数
column-countを指定することで段組の数を指定することができます。
段の幅
column-widthで段の幅を指定することができます。
また、これら2つのプロパティはcolumnプロパティで同時に設定することもできます。
段の間隔
grid layoutのgapと同じように、column-gapプロパティで段と段の間隔を指定できます。
段の枠
column-ruleプロパティを使用して段間に線を追加します。
これは、borderと同じ機能になります。
borderと同様に、column-rule-color、column-rule-style、column-rule-widthなどを使って、細かく指定することもできます。
まとめ
今回は、CSSによるレイアウトの作成方法について解説してきました。
この記事を参考にすれば、様々なレイアウトを実現できるはずです。
ぜひ、参考にしてください。
また、CSSプロパティまとめのアニメーション編も執筆中なので、そちもお待ちいだければと思います。
宣伝
0からエンジニアになるためのノウハウをブログで発信しています。
また、YouTubeでの動画解説も始めました。 YouTubeのvideoIDが不正です
インスタの発信も細々とやっています。
興味がある方は、ぜひリンクをクリックして確認してみてください！
Discussion