鉄道模型製作所のロゴ

CSSによるスマホサイトとパソコンサイトの切替。ITへの扉(入門編) No.12

2020年8月1日カテゴリー: ITへの扉

今日、ネット検索が当たり前で、何か分からないことがあれば、検索サイトで簡単に調べることができる便利な世の中になりました。
近年では、スマホでの検索件数がパソコンを上回っているようで、グーグルの検索順位の評価基準がスマホサイトに重点を置くという「モバイルファーストインデックス」が導入されています。同じコンテンツでもスマホでどれだけ見やすいサイトを作るかが問われています。
従来、スマホ用サイトはパソコン用サイトとは別に作成することが多く、結構手間がかかる仕事でした。そこで登場したのが、「レスポンシブウェブデザイン」によるスマホ用サイトとパソコン用サイトの切り替えです。
同じサイト(ソースコード)でも画面サイズによって、デザインを切り替えることができるしくみです。これを実現するのがCSS(※1)です。
今回、簡単なデモサイトを作り、サーバーにアップしましたので、下記URLにアクセスしてください。

https://railroad-model.jp/yamarin/test2.html

そして、ブラウザの幅をマウスで変更してみてください。そうすると、デザインが切り替わりますね。これがレスポンシブウェブデザインです。
ソースコードのうちHTMLの部分は131号と同じですので省略し、CSSの部分のみをリスト1に示します。

リスト1 test2.htmlソースコード抜粋
<style type=”text/css”>
/*↓スマホ用のCSS*/
h1{
width:100%;
font-size:20px;
}
p.p1{
font-size:16px;
float:left;
width:100%;
margin:0px;
background:#ff0000;
}
/*↑スマホ用CSS*/
@media screen and (min-width:768px){
/*↓パソコン用CSS*/
h1{
font-size:12px;
}
p.p1{
font-size:12px;
width:750px;
background:#00ff00;
}
}
/*↑パソコン用CSS*/

「/*↓スマホ用CSS*/」(※2)と「/*↑スマホ用CSS*/」で囲まれた部分がスマホ用のCSSで、「/*↓パソコン用CSS*/」と「/*↑パソコン用CSS*/」で囲まれた部分がパソコン用のCSSとなっています。この両者切替えを、ソースコードの真ん中あたりの「@media screen and (min-width:768px)」で判断しています。768px(ピクセル)は画面サイズで、768px(※3)を境にして、これより大きいときはパソコン用、これより小さいときは、スマホ用のCSSが適用されます。
試しに、ソースコードをパソコンに保存したあと、CSSを変更し、ローカル環境で実際のブラウザでの見え方を実感してみてください(※1)。

 

(※1)131号参照
(※2)/*と*/で囲まれた部分をコメントといい、CSSの動作とは関係なく自由にメモを記述できます。
(※3)画面サイズは機種(パソコン、スマホ、タブレット等)によりいろいろありますので、ターゲット機種により最適値を設定してください。