TOP 投稿 過去ログ 管理用 RSS RDF

レスポンシブwebデザインの適用とフォント設定。これでスマホ対応です。

URL:http://bit.ly/2mRd8eY
長らくProjectNoteのテンプレートを放置してましたが、Googleが「モバイルフレンドリーじゃない」と表示しているので、テンプレートのcssと若干cgiを変更してレスポンシブwebデザインにしました。

スマホは従来の携帯電話と異なり普通のHTMLに対応しています。しかし表示の幅がPCに比べれば狭く、一般に縦長で表示して縦スクロールで見ると思います。最近のHTML+CSSはブラウザの表示幅に合わせて表示を変えてきます。
とりあえず横幅が狭い時はモバイル表示ということで文字を大きくします。
@横499px以下の場合、1列で表示。画像とブロック要素の幅を100%にします。
A横699px以下の場合、1列で表示。
B横700px以上の場合、右に本文、左にサイドバーを表示する2列のスタイル。
style.cssに@ABを追記しました。
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ならMS Pゴシック、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ゴシックからメイリオに変更

コメント

かすぱ [2017年03月30日(木) 14時52分03秒]
投稿データに概要みたいな項目を追加して、一覧ではそれだけを表示したら1ページのテキスト少なく収まると思う。
「詳細を見る」というボタンを用意して、クリックしたらそれが開くとか、個別のページだと概要と詳細が両方表示されているとか。
かすぱ [2017年03月30日(木) 15時28分11秒]
WordPressにはmoreタグ(続きを読む)があります。本文中にコメントでmoreを入れておき、一覧・検索ページ等ではmoreまでのテキストを表示して「続きを読む」リンクを設置する。個別のページではmoreを含めて表示、場合によっては区切り線に置き換えたりとか。
かすぱ [2017年03月30日(木) 15時33分59秒]
スタイルシートの文字の大きさと細さをいじってたら、リモートが繋がらなくなったので終了。続きはお家に帰ってからです。
かすぱ [2017年04月05日(水) 15時13分08秒]
メモリーとスワップが一杯になってリモート接続が繋がらなかったようです。再起動すると直った。起動してしばらく繋がらない。
一覧(indexとindex1〜index9)では@moreまで表示Aコメント非表示にしたらスマホ表示で捗るかも。
Name: Mail: Pickup:
MSG: