2018年05月01日(2/2)
その中でも、■
3 スクロールバーの表示を前提にしないは、縦書き文字を、使う上でのネックになる箇所であります。
MacOSやChromeではスクローラブルな要素に対してもスクロールバーは非表示で、スクロールが始まったタイミングで初めてふわりと表示させる仕様になっています。
そのために、文章が、オバーフローしているか、タッチ操作しないと、判断出来ない、それを、CSSでスクロールバーをカスタマイズすることによってスクロールバーを表示するようにした。
スマートフォン対応サイトの作り方と6つの注意点【web抜粋】
■1 狭い横幅320pxでも表示できるように
スマートフォン端末も世代を経るごとに画面サイズの大きな製品が出てきました。しかし、横幅320px程度で表示される端末も多くあります(※1)。ブラウザの描画領域の幅が320pxしかなくても問題なく閲覧できるように作成しておきましょう。
■2 横幅を固定しない (=リキッドレイアウトで作成する)
横幅320pxの端末が多いとはいえ、横幅を320px固定にしてデザインすれば良いわけではありません。横320×縦480の端末を横向きにすれば横480×縦320になりますし、もっと広い横幅のスマートフォンも多数あります。どんな横幅でも対応できるよう、
リキッドレイアウト(=横幅のサイズを固定しないレイアウト)で作成
■
3 スクロールバーの表示を前提にしない
PC用ブラウザでは、スクロールが必要な場面ならスクロールバーは必ず表示されると考えて問題ありません。しかし、モバイル版ブラウザのスクロールバーは、常には表示されない。
■4 Flashは使えない
スマートフォン用ウェブページ内では、Flashは使えないと考えておきましょう。
■5 載せただけで装飾を変更するデザイン(hover)に注意
PC用ウェブページでは、マウスを載せたときにデザインを変更したり、サブメニューを表示したりするデザインがよく使われます。CSSのhover疑似クラスを使うだけなので実現も簡単です。
しかし、指による「タップ」で操作するスマートフォンでは、このデザインは表示できないと考えた方が良いでしょう。
■6 自動縮小機能の制御
スマートフォン向けの対策が施されていないウェブサイトをスマートフォン用ブラウザで閲覧すると、全体が縮小されて表示されます。これは、
「ブラウザの横幅がもっと広い」と仮定してレンダリングした結果を、スマートフォンの実際の横幅に合わせて縮小しているからです。
この縮小を防いだり、レンダリングする仮の横幅を指定したりするには、meta要素を使って「viewport」という値を指定の書式で記述します。