CSSのメディアクエリで画面サイズに応じて列幅を変更する方法
画面サイズに応じて列幅を動的に変更したい場合、CSSのメディアクエリ（@media）を使用するのが最も一般的で効果的な方法です。メディアクエリを活用すれば、ブラウザの幅に応じて異なるスタイルを適用でき、レスポンシブデザインを簡単に実現できます。
実装例
以下のコードでは、画面幅が700px以下になったタイミングで、列の幅を50%から100%へと変更しています。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
width: 50%;
background-color: lightblue;
height: 200px;
font-size: 18px;
}
@media only screen and (max-width: 700px) {
body {
margin: 0;
padding: 0;
}
.sample {
width: 100%;
}
}
</style>
</head>
<body>
<h1>Changing column width based on screen size</h1>
<div class="sample">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod, maiores!</div>
<h3>Resize the browser window to 700px and below to see the above div width change to 100%</h3>
</body>
</html>
コードの解説
- .sampleクラス：通常時は幅50%で表示されます。背景色は水色（lightblue）、高さは200px、フォントサイズは18pxに設定されています。
- @media only screen and (max-width: 700px)：画面幅が700px以下の場合にのみ適用されるスタイルです。この条件内で.sampleの幅を100%に変更することで、スマートフォンなどの狭い画面でもコンテンツが画面全体に広がり、読みやすさが向上します。
出力結果
上記のコードを実行すると、次のような表示になります。
ブラウザウィンドウの幅を700px以下にリサイズすると、div要素の幅が自動的に100%へと変化します。
動作確認のポイント
ブラウザウィンドウの幅を700px以下まで縮小してみてください。上記のdiv要素の幅が50%から100%に切り替わる様子を確認できます。このようにメディアクエリを使うことで、デバイスの画面サイズに合わせた柔軟なレイアウト調整が可能になります。
-
CSSのメディアクエリを使って画面サイズに応じてレイアウトを切り替える方法
CSSで画面サイズに基づいてレイアウトを動的に変更したい場合、メディアクエリ（@media）を使用します。メディアクエリを使うことで、デバイスの画面幅に応じて要素の幅や配置を柔軟に切り替えられ、レスポンシブデザインを実現できます。以下は、4つのカラムを持つレイアウトが、画面サイズに応じて自動的に変化するサンプルコードです。コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1&q
-
CSSで放射状グラデーションのサイズを指定する方法
CSSで放射状グラデーションのサイズを制御するには、radial-gradient() 関数を使用します。この関数は、背景画像として放射状グラデーションを定義するもので、第1引数にサイズ（形状と大きさ）を、その後に位置やカラーストップを指定します。基本的な書き方以下の例のように、関数の最初のパラメータとして希望するサイズを設定します。background-image: radial-gradient(40% 50px at center, rgb(30, 255, 0), rgb(0, 195, 255), rgb(128, 0, 32));サイズに指定できる値グラデーションのサイズには、以下