13,002
回編集
「CSS - レイアウト」の版間の差分
ナビゲーションに移動
検索に移動
→float
(→float) |
(→float) |
||
| 129行目: | 129行目: | ||
<br> | <br> | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
/* リセットとベーススタイル */ | |||
* { | |||
margin: 0; | |||
padding: 0; | |||
box-sizing: border-box; | |||
} | |||
body { | |||
font-family: Arial, sans-serif; | |||
line-height: 1.6; | |||
} | |||
.container { | |||
width: 90%; | |||
max-width: 1200px; | |||
margin: 0 auto; | |||
padding: 20px; | |||
} | |||
/* 左カラム */ | |||
.left-content { | .left-content { | ||
float: left; | float: left; | ||
width: 50%; | width: 50%; | ||
min-height: 400px; | |||
padding: 20px; | |||
background-color: #f0f0f0; | |||
} | } | ||
/* 右カラム */ | |||
.right-content { | .right-content { | ||
float: right; | float: right; | ||
width: 50%; | width: 50%; | ||
min-height: 400px; | |||
padding: 20px; | |||
background-color: #e0e0e0; | |||
} | } | ||
</syntaxhighlight> | |||
<br> | |||
<syntaxhighlight lang="html"> | |||
<!DOCTYPE html> | |||
<html lang="ja"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<!-- モバイルデバイスでのWebサイトの表示方法を制御する設定 | |||
width=device-widthは、ページの幅をデバイスの画面幅に合わせることを指示する。 | |||
これにより、スマートフォンやタブレットでWebサイトを閲覧する場合に、デバイスの実際の画面幅に応じて適切にコンテンツが表示される。 | |||
initial-scale=1.0は、ページが最初に読み込まれた場合の拡大率を設定する。 | |||
1.0は等倍表示を意味する。 | |||
これにより、ユーザが最初にページを開いた時に、適切なサイズで表示される。 | |||
このメタタグが無い場合、モバイルデバイスではデスクトップ用のレイアウトが縮小表示されて、テキストが非常に小さくなったり、ユーザが手動で拡大する必要が生じたりする可能性がある。 | |||
特にレスポンシブデザインのWebサイトを作成する場合、このviewportの設定は必須といえる。 | |||
モバイルフレンドリーなWebサイトを実現するための基本的な設定として広く使用される。 | |||
--> | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
<title>Float Layout</title> | |||
<link rel="stylesheet" href="styles.css"> | |||
</head> | |||
<body> | |||
<div class="container"> | |||
<div class="left-content"> | |||
<h2>左カラム</h2> | |||
<p>左側のコンテンツがここに入る</p> | |||
</div> | |||
<div class="right-content"> | |||
<h2>右カラム</h2> | |||
<p>右側のコンテンツがここに入る</p> | |||
</div> | |||
<div class="clearfix"></div> | |||
</div> | |||
</body> | |||
</html> | |||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | <br> | ||
| 144行目: | 209行目: | ||
<u>これを解決するために、clearfixと呼ばれる手法を使用する。</u><br> | <u>これを解決するために、clearfixと呼ばれる手法を使用する。</u><br> | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
/* floatのクリア */ | |||
.clearfix::after { | .clearfix::after { | ||
content: ""; | content: ""; | ||
| 154行目: | 220行目: | ||
メディアクエリを使用してスマートフォン等の画面幅が狭いデバイスでは、float設定を解除し、縦並びに変更するのが一般的である。<br> | メディアクエリを使用してスマートフォン等の画面幅が狭いデバイスでは、float設定を解除し、縦並びに変更するのが一般的である。<br> | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
/* レスポンシブデザイン */ | |||
@media screen and (max-width: 768px) { | @media screen and (max-width: 768px) { | ||
.left-content, | .left-content, | ||
| 159行目: | 226行目: | ||
float: none; | float: none; | ||
width: 100%; | width: 100%; | ||
margin-bottom: 20px; | |||
} | } | ||
} | } | ||