10日から、メインページの一部をスマホ対応として、これまでスマホで縮小表示されていたものを見やすくしました。
以下がそのトップページです。
先月までは、ブラウザのバグもあってかなり見にくかったのがだいぶ改善されました。
その手法としては、スタイルシートを画面の幅によって切り替えるというもので、そういうのを「レスポンシブ・デザイン」と言うんだそうです。
具体的には、以下のような書き方になります。
@media screen and (max-width: 480px) {
p { font-size : 15px ; }
}
javascriptのIF文みたいな構文ですが、こんな書き方ができていたんですね。
スタイルシートの本を持っていますが、2004年頃買ったものなので、こんなのは載っていません。
さらにHTMLファイル側にも以下のmetaタグを入れないと機能しませんでした。
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes">
対応したのはまだ4ページだけですが、全部で70ページ余りあるので、全部直すのは先が長いです…。
以下がそのトップページです。
先月までは、ブラウザのバグもあってかなり見にくかったのがだいぶ改善されました。
その手法としては、スタイルシートを画面の幅によって切り替えるというもので、そういうのを「レスポンシブ・デザイン」と言うんだそうです。
具体的には、以下のような書き方になります。
@media screen and (max-width: 480px) {
p { font-size : 15px ; }
}
javascriptのIF文みたいな構文ですが、こんな書き方ができていたんですね。
スタイルシートの本を持っていますが、2004年頃買ったものなので、こんなのは載っていません。
さらにHTMLファイル側にも以下のmetaタグを入れないと機能しませんでした。
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes">
対応したのはまだ4ページだけですが、全部で70ページ余りあるので、全部直すのは先が長いです…。
コメント