スマートフォンとPCでHTMLページの枠の表示・非表示を切り替える - メディアクエリを利用 - CSS
CSSメディアクエリー(CSS Media Query)を利用してスPCで表示した場合には枠が表示され、
スマートフォンでページを閲覧した際には枠が非表示になるコードを紹介します。
概要
CSSメディアクエリーを利用し、Webブラウザの横幅が狭い場合にdisplayプロパティをnoneに設定すると、スマートフォンで枠を非表示にできます。
補足
基本は
こちらの記事で紹介しいている、
Webブラウザのウィンドウ幅に応じてコンテンツの表示、非表示を切り替える方式と同じです。
書式
@media screen and (max-width: [デバイスの幅]){
[スタイル記述]
}
実装例:スマートフォンで非表示になる枠
コード
下記のHTML、CSSを記述します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="stylesheet" href="smartphone-invisible.css" />
</head>
<body>
<h1>スマートフォンで非表示になる枠のデモ。</h1>
<div class="Frame1">この枠はスマートフォンでは表示されません。</div>
<div class="Frame2">
どのデバイスでも表示されるテキストです。<br />
ABCDEFG<br />
</div>
<div></div>
</body>
</html>
.Frame1{
border : solid 1px #ff6a00;
background-color:#ffe798;
padding:16px 8px 16px 8px;
}
.Frame2 {
border: solid 1px #00c3bd;
margin: 8px 0 0 0;
}
@media screen and (max-width: 480px) {
.Frame1 {
display: none;
}
}
解説
以下のコードにより、画面幅が480ピクセル以下のWebブラウザでは、Frame1クラスの表示が非表示になります。
@media screen and (max-width: 480px){
.Frame1{
display:none;
}
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
Webブラウザで[F12]キーを押して開発者ツールを起動します。スマートフォンのシミュレーターでページを表示します。
下図の表示結果になります。黄色の枠が非表示になりました。
スマートフォン表示の場合に非表示なる枠を作成できました。
実装例:スマートフォンのみで表示される枠
先の動作とは逆にスマートフォンのみで表示される枠のコードです。
コード
下記のHTML、CSSを記述します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="stylesheet" href="smartphone-visible.css" />
</head>
<body>
<h1>スマートフォンで表示になる枠のデモ。</h1>
<div class="Frame1">この枠はスマートフォンのみ表示されます。</div>
<div class="Frame2">
どのデバイスでも表示されるテキストです。<br />
ABCDEFG<br />
</div>
<div></div>
</body>
</html>
.Frame1 {
border: solid 1px #75007a;
background-color: #f9d1ff;
padding: 16px 8px 16px 8px;
display: none;
}
.Frame2 {
border: solid 1px #0f9700;
margin: 8px 0 0 0;
}
@media screen and (max-width: 400px) {
.Frame1 {
display: block;
}
}
解説
以下のコードにより、画面幅が480ピクセル以下のWebブラウザでは、Frame1クラスの表示が表示になります。
@media screen and (max-width: 480px){
.Frame1{
display: block;
}
}
デフォルトの状態では、
display: none; の設定により非表示状態となります。
.Frame1 {
border: solid 1px #75007a;
background-color: #f9d1ff;
padding: 16px 8px 16px 8px;
display: none;
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
Webブラウザで[F12]キーを押して開発者ツールを起動します。スマートフォンのシミュレーターでページを表示します。
下図の表示結果になります。ピンク色の枠が表示されます。
スマートフォン表示の場合にのみ表示される枠を作成できました。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
