css3 を使用したレイアウトパターンの勉強をして、その実践の一環でこのブログの css の見直しを行いました
また、スマホ対応できるように css を変更しました
ここでのスマホ対応とは、標準のスマホ用ページではなく、スマホで PC 用ページを表示した時に意図した通りに表示できることを意味します
変更前後の比較
PC 用ページとスマホ対応ページそれぞれでの表示サンプルを並べてみます
変更内容の多くはスマホ対応のためのものであり、PC から見た場合はほとんど違いが分からないレベルかと思います
PC 用ページで最も変化があったと言えるのはサイドメニューの余白設定かなと思います
PC 用ページ
スマホ対応ページ
変更しようとした理由
ここのブログの機能でスマホで表示した時はスマホ用ページが表示されるのですが、PC と同じように表示することもできます
PC 用ページは自分で編集した css が使用できるのですがスマホ用ページは使用できないため、自分で編集した css で表示させることが前提の装飾やレイアウトなどがスマホ用ページでは崩れてしまったり意図した通りに表示できないという不満がありました
しかし、スマホから PC 用ページを表示すると、サイドバーと記事部分の両方がスマホの幅に収まるように全体が縮小されてしまい、拡大しなければ文字が読めないこと、縦スクロールだけしたいのに横スクロールしてしまうこと、などこれまた不満がありました
そこで、スマホ対応を意識して css を見直そうと考えた訳です
変更内容
スマホ対応の内容
デバイスの種類を検知している訳ではなく、単純にブラウザで表示している幅を見て一定の幅より狭くなったらスマホ対応の css が有効になる、という方式を採用しています
スマホ対応ページでは、最初はサイドメニューを非表示にすることも考えましたが、最終的には PC 用ページと比べてサイドメニューの幅を広げて記事の下に配置するようにしました
幅を広げたのは、記事部分との幅が違いすぎたのでその差を低減するため、縦スクロール量が多すぎたのでそれを低減するため、スマホでサイドメニューのリンクをタップする時にリンク同士の余白を大きくとるため、といった理由があります
サイドメニューの枠の中身の部分も、PC 用ページでは縦に並んでいたものを、スマホ対応ページでは横並びに変更するなどしています
PC 用ページでの変更内容
スマホ対応の結果として PC 用ページに影響が出た、というのが正直なところ
ブログの幅は固定だったのを、ブラウザサイズに合わせて可変としました（ただし、最大幅はこれまでの固定幅だった値に設定しています）
html、css ともに PC 用ページとスマホ対応ページとで共通のファイルを使用するため、可変幅にすることは必須でした
PC 用ページのサイドメニュー幅自体はこれまでと同じですが、スマホ対応の影響で枠内の余白が少なくなっています
あと、コメント部分の幅も調整しました
その他の変更
自分で編集した css と言っても、これまではその大部分はデフォルトのまま使用していました
今回、css ファイルを全体的に眺めていて、全く同じ記述が複数個所にあることが気になったので、効果が重複するものについては無意味になっている部分を削除しました
200 行くらい減ったので、それだけ重複があったと……
0 件のコメント:
コメントを投稿