今日、ﾈｯﾄ検索が当たり前で、何か分からないことがあれば、検索ｻｲﾄで簡単に調べることができる便利な世の中になりました。
近年では、ｽﾏﾎでの検索件数がﾊﾟｿｺﾝを上回っているようで、ｸﾞｰｸﾞﾙの検索順位の評価基準がｽﾏﾎｻｲﾄに重点を置くという「ﾓﾊﾞｲﾙﾌｧｰｽﾄｲﾝﾃﾞｯｸｽ」が導入されています。同じｺﾝﾃﾝﾂでもｽﾏﾎでどれだけ見やすいｻｲﾄを作るかが問われています。
従来、ｽﾏﾎ用ｻｲﾄはﾊﾟｿｺﾝ用ｻｲﾄとは別に作成することが多く、結構手間がかかる仕事でした。そこで登場したのが、「ﾚｽﾎﾟﾝｼﾌﾞｳｪﾌﾞﾃﾞｻﾞｲﾝ」によるｽﾏﾎ用ｻｲﾄとﾊﾟｿｺﾝ用ｻｲﾄの切り替えです。
同じｻｲﾄ(ｿｰｽｺｰﾄﾞ)でも画面ｻｲｽﾞによって、ﾃﾞｻﾞｲﾝを切り替えることができるしくみです。これを実現するのが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)画面ｻｲｽﾞは機種(ﾊﾟｿｺﾝ、ｽﾏﾎ、ﾀﾌﾞﾚｯﾄ等)によりいろいろありますので、ﾀｰｹﾞｯﾄ機種により最適値を設定してください。