###### tags: `CSS`
# CSSのレイアウト
よくあるものや，今回のホームページ制作で使うスタイリングの方法をいろいろ紹介します．
以下のように，適当な名前の新しいフォルダと`index.html`，`style.css` を作成してください．
HTMLファイルは以下を記述してください．
```htmlembedded
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>スタイリングの練習</title>
</head>
<body>
</body>
</html>
```
JavaScriptが出てくることがありますが，無視してください．
## もくじ
- [display プロパティ](#display-プロパティ)
- [position プロパティ](#position-プロパティ)
- [border 関係](#border-関係)
- [overflow プロパティ](overflow-プロパティ)
- [min-・max-](#min-・max-)
- [Flexボックス](#Flexボックス)
## display プロパティ
要素を`ブロック要素`と`インライン要素`のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば `フローレイアウト`，`グリッド`，`フレックス`などを設定する.
要素の内側と外側の表示種別を設定します．外側の型は要素のフローレイアウトへの参加方法を設定し，内側の型は子要素のレイアウトを設定する．
<iframe height="400" style="width: 100%;margin-bottom:10px" scrolling="no" title="display" src="https://codepen.io/yosse95ai-the-decoder/embed/mdXQjyZ?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/mdXQjyZ">
display</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
> リファレンス：https://developer.mozilla.org/ja/docs/Web/CSS/display
### ブロック要素
文書の書字方向の中で，段落として一つが他の物の後に表示される．
### インライン要素
インライン要素はインライン方向，つまり文書の書字方向に従って，文の中で言葉が表示される方向に表示される.
### フローレイアウト
`通常フロー` とも呼ばれ，フロー(flow)は流れのという意味．
HTMLで記述された順番に，ブロック要素は縦の方向に配置し，インライン要素は横の方向に配置する．
レイアウトが指定される前のレイアウト．デフォルトのレイアウトだと理解してもいいかもしれない．
グリッドレイアウトやフレックスレイアウトは，このフローレイアウトを変更すること．
> リファレンス：[【HTML&CSS】私的レイアウト入門講義](https://right-tech.net/post/html-css/private-layout-lecture)
### グリッド
グリッドレイアウトモデルでは，ページを大きな領域に分割することや，HTML のプリミティブから構成されたコントロールの部品間の，寸法，位置，レイヤーに関する関係を定義することに優れている．
> リファレンス：[CSS グリッドレイアウト](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout)
### フレックス
フレックスレイアウトモデルでは，フレックスコンテナーの子は任意の方向にレイアウトすることができ，また使われていない空間を埋めるために伸長したり，あるいは親のあふれることを避けるために収縮したりと，そのサイズを「伸縮」することができる．
子の水平方向と垂直方向の両方の整列を，容易に操作することが可能．
今回のホームページ制作では，主にフレックスレイアウトを用います．
> リファレンス：[CSS フレックスボックスレイアウト](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)
さらに詳しく使うのは，もう少し後で．
## position プロパティ
文書内で要素がどのように配置されるかを設定する．
`top`, `right`, `bottom`, `left` の各プロパティが，配置された要素の最終的な位置を決める．
<iframe height="350" style="width: 100%;margin-bottom:10px" scrolling="no" title="Untitled" src="https://codepen.io/yosse95ai-the-decoder/embed/Jjpemqv?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/Jjpemqv">
Untitled</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
> リファレンス：https://developer.mozilla.org/ja/docs/Web/CSS/position
### static
要素は文書の通常のフローに従って配置される．`top`, `right`, `bottom`, `left`，`z-index` プロパティは効果がなく，これはデフォルト値です．
### absolute
要素は文書の通常のフローから除外され，ページレイアウト内に要素のための空間は作成されない．
直近の配置されている祖先があれば，それに対して相対配置され，そうでなければ初期の包含ブロックに対して相対配置される．最終的な位置は `top`, `right`, `bottom`, `left` の値によって決定される．
絶対位置指定ボックスのマージンは，他の要素のマージンと相殺されない．
### relative
要素は文書の通常のフローに従って配置され，`top`, `right`, `bottom`, `left` の値に基づいて自分自身からの **相対オフセット** で配置される．オフセットは他の要素の配置には影響を与えない．
### fixed
要素は文書の通常のフローから除外され，ページレイアウト内に要素のための空間は作成されない．ビューポートによって定められた初期の包含ブロックに対して相対配置される．
この値は，常に新しい重ね合わせコンテキストを作成し，印刷文書の場合，要素は各ページの同じ位置に配置される．
### sticky
要素は文書の通常のフローに従って配置され，直近のスクロールする祖先および包含ブロック (直近のブロックレベル祖先，表関連要素を含む) に対して `top`, `right`, `bottom`, `left` の値に基づいて相対配置される．
オフセットは他の要素の配置には影響を与えない．
詳しくは，「[positionプロパティを身に着けよう！stickyの仕様と使い方を解説！](https://www.asobou.co.jp/blog/web/css-sticky)」
## border 関係
### border
一括指定プロパティで，要素の境界を設定する．
- border
- border-width：境界線の幅
- border-style：境界線のスタイル
- border-color：境界線の色
<iframe height="300" style="width: 100%;" scrolling="no" title="border" src="https://codepen.io/yosse95ai-the-decoder/embed/jOZQdEo?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/jOZQdEo">
border</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
### border-radius
要素の境界の外側の角を丸める．
半径の長さを指定していることを意識してみるといいかもしれない．
- border-radius
- border-top-left-radius ：左上
- border-top-right-radius ：右上
- border-bottom-right-radius：右下
- border-bottom-left-radius ：左下
<iframe height="343" style="width: 100%;margin-bottom:10px;" scrolling="no" title="border-radius" src="https://codepen.io/yosse95ai-the-decoder/embed/abqQXEw?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/abqQXEw">
border-radius</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
<div style="width:100%; display: flex;">
<div style="width:50%; display: flex;
align-items: center; flex-direction: column;">
<img src="https://i.imgur.com/P4NLXhD.png" width="100%">
<p>
.style2 の場合
</p>
</div>
<div style="width:50%; display: flex;
align-items: center; flex-direction: column;">
<img src="https://i.imgur.com/0HEKAep.png" width="100%">
<p>
.style5 の場合
</p>
</div>
</div>
## overflow プロパティ
要素のオーバーフロー時，要素の内容が多すぎてブロック整形コンテキストに収まらない場合の望ましい動作を両方向について設定する．
- overflow
- overflow-x
- overflow-y
<iframe height="396" style="width: 100%;" scrolling="no" title="overflow" src="https://codepen.io/yosse95ai-the-decoder/embed/oNEQryR?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/oNEQryR">
overflow</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
## min-・max-
### width
- max-width：要素の最大幅
- min-width：要素の最小幅
画面のリサイズなどによって要素の幅が変わるとき，その最大最小値を設定する．
<iframe height="389" style="width: 100%;" scrolling="no" title="min-max-width" src="https://codepen.io/yosse95ai-the-decoder/embed/VwQVJOY?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/VwQVJOY">
min-max-width</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
### height
- max-height：要素の最大高
- min-height：要素の最小高
画面のリサイズなどによって要素の高さが変わるとき，その最大最小値を設定する．
<iframe height="550" style="width: 100%;" scrolling="no" title="min-max-height" src="https://codepen.io/yosse95ai-the-decoder/embed/poaQXXL?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/poaQXXL">
min-max-height</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
## Flexボックス
Flexbox レイアウトは親要素の `displayプロパティ` の値に `flex` または `inline-flex` を指定することで定義される．
<iframe height="720" style="width: 100%;margin-bottom:10px;" scrolling="no" title="flexbox" src="https://codepen.io/yosse95ai-the-decoder/embed/NWyeKvZ?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/NWyeKvZ">
flexbox</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
### flex-wrap プロパティ
フレックスアイテムを単一行に押し込むか，あるいは複数行に折り返してもよいかを指定する．
折り返しを許可する場合は，行を積み重ねる方向の制御も可能です．
> リファレンス：https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap
### flex-direction プロパティ
主軸の方向や向き (通常または逆方向) を定義することにより，フレックスコンテナー内でフレックスアイテムを配置する方法を設定する．
> リファレンス：https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction
### align-items プロパティ
フレックスボックスでは，交差軸方向のアイテムの配置を制御する．
グリッドレイアウトでは，グリッド領域におけるアイテムのブロック軸方向の配置を制御する．
> リファレンス：https://developer.mozilla.org/ja/docs/Web/CSS/align-items
### justify-content プロパティ
フレックスコンテナーの主軸およびグリッドコンテナーのインライン軸に沿って，中身のアイテムの間や周囲に間隔を配置する方法を定義する．
> リファレンス：https://developer.mozilla.org/ja/docs/Web/CSS/justify-content
### align-content プロパティ
フレックスボックスの交差軸 (縦方向) またはグリッドのブロック軸方向の内部のアイテムの間または周囲の空間の配分方法を設定する．
> リファレンス：https://developer.mozilla.org/ja/docs/Web/CSS/align-content
### flex プロパティ
フレックスアイテムをフレックスコンテナーの領域に収めるために，どのように伸長・収縮させるかを指定する．
- flex
- flex-grow：フレックスアイテムの主軸方向の寸法のフレックス伸長係数
- flex-shrink：フレックスアイテムの縮小係数
- flex-basis：フレックスアイテムの主要部分の初期の寸法
<iframe height="421" style="width: 100%;margin-bottom:10px;" scrolling="no" title="flex" src="https://codepen.io/yosse95ai-the-decoder/embed/YzedzQb?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/YzedzQb">
flex</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
> リファレンス：https://developer.mozilla.org/ja/docs/Web/CSS/flex
>
> CSSのflexboxをゲーム感覚で学べるサイト：https://flexboxfroggy.com/#ja
## まとめ
ここまでで，いろいろなレイアウト方法を紹介してきました．
gridレイアウトについて興味のある方は，自身で学んでみてください！
いよいよホームページ制作です！
Sign in with Wallet
Connect another wallet