CSSの基礎とレスポンシブ対応のまとめ
yutoFlexboxとは
Webページのレイアウトを組む際、「要素を横並びにしたい」「中央に揃えたい」といったシチュエーションは頻繁に登場します。そこでFlexbox（Flexible Box Layout Module）を用いることでflex(柔軟)なレイアウトを作成することが出来ます。
ざっくり言うと...
- 横並びにする
- 縦並びにする
- 位置を調整する
ことが出来ます。
では、最初に基本的な使い方から見ていきましょう！
これよりhtmlは以下のようなコードで説明していきます。
(divは黒い枠、ulは緑のブロック)
<div class="container">
<ul class="list">
<li>
<p>1</p>
</li>
</ul>
<ul class="list">
<li>
<p>2</p>
</li>
</ul>
<ul class="list">
<li>
<p>3</p>
</li>
</ul>
</div>
display: flex
「display: flex」はFlexboxレイアウトを適応させることが出来るようになります。
.container{
display : flex;
}
親要素のdivにdisplay: flex;を指定すると親要素はflexコンテナ、直下にある子要素ulはflexアイテムになります。
flex-direction
「flex-direction」は子要素の並ぶ向きを指定することが出来ます。
（「display: flex」を記述するとflex-directionはrowに自動的に設定されるため、子要素が右から左に横並びになります。）
row
.container{
display : flex;
flex-direction: row;
}
子要素が右から左に横並びになります。
column
.container{
display : flex;
flex-direction: column;
子要素が上から下に縦並びになります。
flex-wrap
「flex-wrap」は、フレックスアイテムがコンテナ内に収まりきらない場合の折り返しの動作を指定します。
.container {
display: flex;
flex-wrap: wrap;
}
justify-content
justify-content は、Flexアイテムを 主軸（デフォルトでは横方向）に沿って配置する方法を指定します。例えば中央寄せや、左右両端への配置、アイテム間にスペースを設ける場合などに使用します。
.container {
display: flex;
justify-content: center;
}
| 値 | 説明 |
|---|---|
flex-start |
主軸の開始位置（左）にアイテムを揃える（デフォルト） |
flex-end |
主軸の終了位置（右）にアイテムを揃える |
center |
アイテムを主軸の中央に配置する |
space-between |
最初と最後のアイテムを端に寄せ、残りのアイテム間に均等なスペースを配置する |
space-around |
各アイテムの前後に均等なスペースを配置（端のスペースは半分になる） |
align-items
align-items プロパティは、Flexアイテムを クロス軸（デフォルトでは縦方向）に沿って配置する方法を指定します。これにより、アイテムの縦方向の配置（上揃え、中央揃え、下揃えなど）を調整できます。
.container {
display: flex;
align-items: center;
}
| 値 | 説明 |
|---|---|
flex-start |
アイテムを交差軸の開始位置（上）に揃える |
flex-end |
アイテムを交差軸の終了位置（下）に揃える |
center |
アイテムを交差軸の中央に配置する |
最後に
よく使われるものを中心にまとめてみました。
少しでも力になれたら幸いです。
参考URL：
yutohoverってなに？
hoverを使うことでカーソルを特定の要素に置いたとき、それに応じてcssのサイズや大きさ、色を変えることが出来ます。
使い方
/* 通常時のボタンスタイル */
.button {
background-color: #3498db;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}
/* hover時のボタンスタイル */
.button:hover {
background-color: #2980b9;
}
一つのクラスに対して通常時のcssとhover時のcssを記述して使います。
注意点
マウスの時だけhoverスタイルを適応する
:hover擬似クラスは、タッチデバイスではタッチ後もスタイルが残ってしまう可能性があるため注意する必要があります。
クリック可能な要素にだけホバースタイルを当てる
hoverはユーザーが「クリックしたら何かが起こる」ことを示すためのランドマークとなります。
「href」属性を使ったリンクや「button」「input」などのクリック可能な要素にhoverを使うことをお勧めします。
最後に
もっと知りたい方は、こちらもチェックしてみてください。
参考URL：
yutoレスポンシブデザインとは？
レスポンシブデザイン（RWD）は端末・機器のサイズによって自動的に画面サイズを合わせるデザイン手法のことです。
メディアクエリー
メディアクエリーを活用したレスポンシブデザインでは、まずスマートフォンなどの画面幅が狭いデバイス向けにスタイルを設計し、その後、画面サイズに応じてスタイルを追加・調整していきます。
このように「小さい画面を基準」にデザインを構築し、画面が広くなるにつれて装飾やレイアウトを発展させていく考え方は、モバイルファーストデザインと呼ばれています。
@media (max-width: 750px) {
.hero {
margin-top: 60px;
padding: 40px 20px;
}
.hero-container {
justify-content: flex-start;
}
.hero-texts {
gap: 20px;
}
}
Flexbox
Flexboxは、親要素（flexコンテナ）に配置された子要素（flexアイテム）を、画面サイズに応じて自動的に並び替えたり、整列させたりできるため、ウィンドウサイズが変わってもレイアウトが崩れにくい構造が作れます。
メディアクエリと組み合わせることで、狭い画面では縦並びに切り替えることも可能です。
.hero-container {
display: flex;
justify-content: space-between;
align-items: center;
}
@media (max-width: 750px) {
.hero-container {
flex-direction: column;
align-items: flex-start;
}
}
最後に
こちらも参考にしてください。
参考URL：