レスポンシブwebデザインの適用とフォント設定。これでスマホ対応です。
長らくProjectNoteのテンプレートを放置してましたが、Googleが「モバイルフレンドリーじゃない」と表示しているので、テンプレートのcssと若干cgiを変更してレスポンシブwebデザインにしました。
スマホは従来の携帯電話と異なり普通のHTMLに対応しています。しかし表示の幅がPCに比べれば狭く、一般に縦長で表示して縦スクロールで見ると思います。最近のHTML+CSSはブラウザの表示幅に合わせて表示を変えてきます。
とりあえず横幅が狭い時はモバイル表示ということで文字を大きくします。
①横499px以下の場合、1列で表示。画像とブロック要素の幅を100%にします。
②横699px以下の場合、1列で表示。
③横700px以上の場合、右に本文、左にサイドバーを表示する2列のスタイル。
style.cssに①②③を追記しました。
cgiを変更して、metaタグでviewportを指定しました。→Responsive Web Design Viewport - W3Schools
divが入れ子になってて、クラスとかidに対して見た目の設定を色々設定してある所にレスポンシブの設定を追加するには、「横499以下の場合に画像の幅を100%で表示する」を !important宣言で最優先の指定すればいいよね。そして高さはautoにします。
Googleのモバイルフレンドリーテストは通った。
とりあえず対応したけど、PC用のページそのまま全文を載せているのでスクロールが長いなこれ。
逆に4Kとか大きなディスプレイだと余白が多くていかん。
■レスポンシブWebデザインのブレイクポイント、何ピクセルにすればいいの？
フォントは何も指定してなかった。主に自分用だし、各ブラウザの標準文字で見れば良いからだ。
でもまぁこの際なので変えておく。
とりあえず基本のフォントタイプはsans-serif。
WindowsならＭＳ Ｐゴシック、Windows7ならメイリオ、Windows8なら游ゴシック Medium、Macならヒラギノ角ゴ ProN。
環境によって入っているフォントが違うので使用するフォントが変わる。でもWebからダウンロードするフォントを使えば共通です。Googleフォントには色々登録されていてスタイルシートに記述するだけで使えます。
とりあえずLatoとNoto Sans JPを指定しました。
Windowsで游ゴシックの文字が細くて見にくくなることがあるようです。font-weightが200とか小さい場合「游ゴシック Light」を使うみたい。Macだと「游ゴシック Light」のフォントが無いので普通の「游ゴシック Medium」で表示してます。Windowsはわざわざ「游ゴシック Light」を用意してあるのに汚いって言われて…そんな。
■Responsive Web Design JP
■必読！5分でわかるレスポンシブWebデザインまとめ
■レスポンシブデザインとは｜今更きけない基礎知識とメリット・デメリット
■年寄りを困らせる「レスポンシブWebデザイン」
■Responsive Web Design Viewport - W3Schools
■モバイルフレンドリーテスト
■Googleフォント
■2020年まで使えるfont-familyおすすめゴシック体 - Qiita
■Font－familyのベストな書き方 2017年版
■【2017年版】これで間違いなし！font-familyのおすすめ設定
■Windows で游ゴシックが細字になってしまう件は誰が悪いのかについて CSS 仕様から考えてみる
■Windowsの游ゴシックをfont-weightを使わずにMacに合わせる方法
■Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？
■Windowsで游ゴシックが汚いのは、結局誰が悪いのか？
■CSSの游ゴシックで右往左往した話
■Chrome 56 でデフォルトのフォントがMS Pゴシックからメイリオに変更
スマホは従来の携帯電話と異なり普通のHTMLに対応しています。しかし表示の幅がPCに比べれば狭く、一般に縦長で表示して縦スクロールで見ると思います。最近のHTML+CSSはブラウザの表示幅に合わせて表示を変えてきます。
とりあえず横幅が狭い時はモバイル表示ということで文字を大きくします。
①横499px以下の場合、1列で表示。画像とブロック要素の幅を100%にします。
②横699px以下の場合、1列で表示。
③横700px以上の場合、右に本文、左にサイドバーを表示する2列のスタイル。
style.cssに①②③を追記しました。
cgiを変更して、metaタグでviewportを指定しました。→Responsive Web Design Viewport - W3Schools
divが入れ子になってて、クラスとかidに対して見た目の設定を色々設定してある所にレスポンシブの設定を追加するには、「横499以下の場合に画像の幅を100%で表示する」を !important宣言で最優先の指定すればいいよね。そして高さはautoにします。
Googleのモバイルフレンドリーテストは通った。
とりあえず対応したけど、PC用のページそのまま全文を載せているのでスクロールが長いなこれ。
逆に4Kとか大きなディスプレイだと余白が多くていかん。
■レスポンシブWebデザインのブレイクポイント、何ピクセルにすればいいの？
スマートフォンの解像度は736px（iPhone 6Plusを横持ちした時の横幅）以下におさまり、一方、一部の例外はあるものの、多くのタブレットは、 768px（iPadを縦持ちした時の横幅）以上であることが分かります。
「ブレイクポイントを1つだけ設定するなら、736pxより大きく、768px未満のところに持って来れば良いのでは」
フォントは何も指定してなかった。主に自分用だし、各ブラウザの標準文字で見れば良いからだ。
でもまぁこの際なので変えておく。
とりあえず基本のフォントタイプはsans-serif。
WindowsならＭＳ Ｐゴシック、Windows7ならメイリオ、Windows8なら游ゴシック Medium、Macならヒラギノ角ゴ ProN。
環境によって入っているフォントが違うので使用するフォントが変わる。でもWebからダウンロードするフォントを使えば共通です。Googleフォントには色々登録されていてスタイルシートに記述するだけで使えます。
とりあえずLatoとNoto Sans JPを指定しました。
Windowsで游ゴシックの文字が細くて見にくくなることがあるようです。font-weightが200とか小さい場合「游ゴシック Light」を使うみたい。Macだと「游ゴシック Light」のフォントが無いので普通の「游ゴシック Medium」で表示してます。Windowsはわざわざ「游ゴシック Light」を用意してあるのに汚いって言われて…そんな。
■Responsive Web Design JP
■必読！5分でわかるレスポンシブWebデザインまとめ
■レスポンシブデザインとは｜今更きけない基礎知識とメリット・デメリット
■年寄りを困らせる「レスポンシブWebデザイン」
■Responsive Web Design Viewport - W3Schools
■モバイルフレンドリーテスト
■Googleフォント
■2020年まで使えるfont-familyおすすめゴシック体 - Qiita
■Font－familyのベストな書き方 2017年版
■【2017年版】これで間違いなし！font-familyのおすすめ設定
■Windows で游ゴシックが細字になってしまう件は誰が悪いのかについて CSS 仕様から考えてみる
■Windowsの游ゴシックをfont-weightを使わずにMacに合わせる方法
■Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？
■Windowsで游ゴシックが汚いのは、結局誰が悪いのか？
■CSSの游ゴシックで右往左往した話
■Chrome 56 でデフォルトのフォントがMS Pゴシックからメイリオに変更
