ウィンドウ幅に応じて枠の表示、非表示を切り替える - CSS メディアクエリを利用 - CSS
ウィンドウ幅に応じて枠の表示、非表示を切り替えるコードを紹介します。
概要
CSSのメディアクエリを利用すると、Webブラウザのウィンドウ幅に応じて、枠の表示や非表示を切り替えられます。
この記事では、CSSのメディアクエリを利用してWebブラウザのウィンドウ幅に応じて表示する枠を切り替えるコードを紹介します。
書式
@media screen and (max-width: [デバイス、ウィンドウの幅]) {
[CSSの記述]
}
Webブラウザのウィンドウ幅が指定した幅より狭くなると、@mediaで記述したメディアクエリのブロック部分
{ } が有効になります。
@media screen and (min-width: [デバイス、ウィンドウの幅]) {
[CSSの記述]
}
Webブラウザのウィンドウ幅が指定した幅より広くなると、@mediaで記述したメディアクエリのブロック部分
{ } が有効になります。
例1:ウィンドウ幅が狭まると非表示になる枠
コード
以下のHTML,CSSファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="window-width-max.css" />
</head>
<body>
<h1>ウィンドウ幅に応じた枠の表示、非表示切り替えデモ</h1>
<div class="OuterFrame">
<div class="Frame1">枠1です。<br />ABCDEFG<br />123456</div>
<div class="Frame2">枠2です。<br />ABCDEFG<br />123456</div>
<div class="Frame3">枠3です。<br />ABCDEFG<br />123456</div>
</div>
</body>
</html>
.OuterFrame {
border:1px solid #0094ff;
display:flex;
}
.Frame1 {
margin:8px 8px 8px 8px;
border: 1px solid #b20000;
background-color:#f5d2d2;
flex:1;
}
.Frame2 {
margin: 8px 8px 8px 8px;
border: 1px solid #c15000;
background-color: #efcbb1;
flex: 1;
}
.Frame3 {
margin: 8px 8px 8px 8px;
border: 1px solid #d8b700;
background-color: #e0d9b5;
flex: 1;
}
@media screen and (max-width:600px) {
.Frame2 {
display: none;
}
}
@media screen and (max-width:960px) {
.Frame3 {
display:none;
}
}
解説
HTML, CSSはFlexによる3段組みのページです。Flexについては
こちらの記事を参照してください。
以下がメディアクエリのCSSのコードです。Frame2はウィンドウ幅が600ピクセル以下になるとブロック内の記述が有効になり、枠が非表示になります。
@media screen and (max-width:600px) {
.Frame2 {
display: none;
}
}
Frame3はウィンドウ幅が960ピクセル以下になるとブロック内の記述が有効になり、枠が非表示になります。
@media screen and (max-width:960px) {
.Frame3 {
display:none;
}
}
実行結果
HTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ウィンドウの幅を狭めます。960ピクセル以下になると、一番右の[枠3]が非表示になります。
さらにウィンドウ幅を狭めます。
ウィンドウ幅が600ピクセル以下になると、[枠2]の枠が非表示になります。
Webブラウザのウィンドウ幅に応じて枠の表示を切り替えられました。
例2:ウィンドウ幅が狭まると表示される枠
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="window-width-min.css" />
</head>
<body>
<h1>ウィンドウ幅に応じた枠の表示、非表示切り替えデモ</h1>
<div class="OuterFrame">
<div class="Frame1">枠Aです。<br />ABCDEFG<br />123456</div>
<div class="Frame2">枠Bです。<br />ABCDEFG<br />123456</div>
<div class="Frame3">枠Cです。<br />ABCDEFG<br />123456</div>
</div>
</body>
</html>
.OuterFrame {
border:1px solid #b20000;
display:flex;
}
.Frame1 {
margin:8px 8px 8px 8px;
border: 1px solid #0018d1;
background-color:#d3d8ff;
flex:1;
}
.Frame2 {
margin: 8px 8px 8px 8px;
border: 1px solid #0080ca;
background-color: #b5e0f8;
flex: 1;
}
.Frame3 {
margin: 8px 8px 8px 8px;
border: 1px solid #00e0a9;
background-color: #c1f3e7;
flex: 1;
}
@media screen and (min-width:760px) {
.Frame2 {
display: none;
}
}
@media screen and (min-width:960px) {
.Frame3 {
display:none;
}
}
解説
先の例と同様に、HTML, CSSはFlexによる3段組みのページです。
以下がメディアクエリのCSSのコードです。
Frame2はウィンドウ幅が760ピクセル以上になるとブロック内が有効になり、枠が非表示になります。
@media screen and (min-width:760px) {
.Frame2 {
display: none;
}
}
Frame3はウィンドウ幅が960ピクセル以上になるとブロック内が有効になり、枠が非表示になります。
@media screen and (min-width:960px) {
.Frame3 {
display:none;
}
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。ウィンドウ幅が広いため、枠は一つしか表示されていない状態です。
ウィンドウの幅を狭めます。960ピクセル以下になると、[枠C]がページに表示される状態になります。
さらに枠を狭め、ウィンドウの横幅が760ピクセル以下になると、[枠B]がページに表示されます。
ウィンドウの横幅に合わせて枠の表示、非表示の切り替えを実装できました。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
