iOS（iPhone・iPad）のCSSハック

スマートフォンサイトやレスポンシブWebデザインでやっておくべきCSS設定

Safariの不思議なテキスト折り返し 半角スペースを に

このページ、加筆修正して表示を確認したところ

iPadで、意味不明なテキストの折り返しが見られた。
iPhoneはもちろん、MacのSafariでも同様だった。

これは、Safariのバグに違いない。
検索してみると、どうやら半角スペースが怪しい。

そこで試したのは、HTMLソースの修正

Google Noto Fonts
↓
Google Noto Fonts

つまり、素の半角スペース「 」を「 」に変更して、回避できた。

あやうく、「word-wrap」などで対応するところだった…

ということで、CSSハックではないが、Safari専用の対応。

リンクタップのときのハイライトカラーを無効に

スマホではリンクの、ユーザーへのアピールは気を遣う。

ちょっと変わった仕掛けをしたのに、グレーの背景色が現れて台無しになることもある。

そこで、メディアクエリのタブレット以下のところに、次のように書く。

a { -webkit-tap-highlight-color:rgba(0,0,0,0); }

これで、こちらの設定が活きるようになる。

Safari（Macを含む）は明朝（serif）がデフォルト font-familyでゴシック（sans-serif）に替える

Macを含むSafariでは、明朝（serif）がデフォルトなので、ゴシック（sans-serif）を設定する。

* { font-family: sans-serif; }

iOS用（MacのSafariやChromeも）にSan Franciscoフォントを指定する

MacもiPhoneやiPadも、最近はシステムフォントをSan Franciscoに変更している。

そこで、次のようにfont-familyを指定してみる。

* { font-family: -apple-system-body, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans Japanese", "游ゴシック  Medium", "Yu Gothic Medium", "メイリオ", meiryo, sans-serif; }

「-apple-system-body」はMacを含むSafari用、「-apple-system」ではiPadだけ、なぜか素の状態でもボールドになって浮き上がるから変更。
「BlinkMacSystemFont」はMacやiOSのChrome（Opera）用。
もちろん、AndroidやMacのFirefox（Helvetica Neue）は対象外。

iPhoneでは、半角英数の見栄えが多少よくなるので、コンバージョンもあがるかも（笑）

なお、もちろんWindowsにも関係ないが、とりあえず「"游ゴシック Medium", "Yu Gothic Medium"」「"メイリオ", meiryo」を指定して、最近のWindows事情にも配慮しておきたい。

参考にしたサイト・ページ

Noto Sans Japanese フォントをインストールしていない環境でも

もうiOSから離れてしまうが、Google・Androidを意識すれば「Noto Sans」。
たしかAndroidの標準フォントになっている。

実際、游ゴシックよりもNoto Sansのほうがヒラギノに近い、見栄えもいい。
ヒラギノのようなバカ高いフォントをWindowsにインストールしている環境も少ないし、Web作成側もヒラギノなしであれば、Google（Adobe）のNoto Sansを利用してみるといいだろう。

上記サイトで「Noto Sans CJK JP」を検索してダウンロードしてみる。

また、フォントをインストールしていない環境でも（大半のユーザーに向けて）、CSSに下記を書くか

@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');

headerに、CSSへのリンクを書くだけ。

<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">

もちろん、font-family設定も忘れない。

font-family:  "Noto Sans Japanese"

余計なことだが、ブラウザーのStylishなどでパソコン内のNoto Sansを利用するには

font-family: "Noto Sans CJK JP Regular"

このように書かないとダメなようだ。
（Windowsの問題かもしれないが）

ヒラギノ（Hiragino Sans）のW3とW6

スマートフォン、AppleのiPhone対応がメインなら、日本語はヒラギノを一番にしているサイトも多いだろう。

ところで、ヒラギノは「"Hiragino Sans", "Hiragino Kaku Gothic ProN"」と指定しているが、macOS El Capitanからは英語表記「Hiragino Sans」、日本語表記「ヒラギノ角ゴシック」になっているから。

変わったのはそれだけではない。
ヒラギノはデフォルトで「W6」になるようで、見出しタグの中ではさらにボールドになって、とてつもなく字が太くなる。

@font-face {
font-family: "Hiragino Sans";
src: local('HiraginoSans-W3');
font-weight: 300;
}

しんどいことだが、「@font-face」を設定して、ヒラギノはデフォルトで「W3」にして、見出しタグなどでは「W6」になっても二重でボールドにはならないようにする。

font-familyでは、日本語フォントはヒラギノを最初にする。

iOS（iPhone・iPad）はデバイスの縦横でフォントサイズが変わる -webkit-text-size-adjust

iOSのデバイス縦横でフォントサイズが変わるので、それを阻止。

body { -webkit-text-size-adjust: 100％; }

かつて書いていた「-webkit-text-size-adjust: none;」は、パソコン画面で不具合があるとのこと

タップターゲットの長押しポップアップを阻止 -webkit-touch-callout

タップターゲット（いわゆるリンク）を長押しすると出てくるポップアップ
これを阻止するには、

a { -webkit-touch-callout: none; }

他の多くのサイトとは違う操作感になるので、最近は止めている。
（なにより、自分たちさえとまどうことに（笑））

iOS（iPhone・iPad）のフォームボタンなどのデザイン変更 -webkit-appearance

Appleもフラットデザインにしようとしているのか、よく分からないが、フォームボタンなどは従来型の丸々となったままだ（笑）
これをなんとかしたいときは、その箇所に次のように設定する。

セレクタ { -webkit-appearance: none; }

サイト丸ごとなら

* { -webkit-appearance: none; }

iPad横でスワイプすると画面も動く overflow-x

不思議なことに、iPad横画面のときに、スワイプ（スクロール）させると上下だけでなく左右にも画面が動くサイトやページがある。

自サイトでそんなことが起こっていたら、ユーザーは鬱陶しくてたまらないので、次のようにCSSを設定する。

html, body { overflow-x: hidden; overflow-y: auto; }

不思議が重なるのだが、bodyだけではダメで、その上のhtmlまで設定しないと、効かないようだ。
また、下記のように設定すると、このSEO塾.comのファーストビューの画像のところもおかしくなる…

* { overflow-x: hidden; overflow-y: auto; }

iPad横で画面が切れる viewport

じつはこのサイトも、iPad横で右が少し切れている…

検索してみると、まず「viewport」をきっちり設定

<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />

しかし、テンプレートで設定済み…
ちなみに、開発元のイーティーネット社は匠なので、Android用では別の「viewport」に切り替えられる。
（リセットCSSなど、他の無料有料テンプレートでは無頓着なものにも、配慮が行き届いている…）

<meta name="viewport" content="width=device-width, initial-scale=0.66, minimum-scale=0.66, maximum-scale=2.0" />

さて話を戻して、iPad横で画面が切れるときの手当ては、「viewport」に画面サイズを指定、

<meta name="viewport" content="width=画面サイズ, …" />

そして、CSSで

html, body { width: 100%; }

このサイトでは、「viewport」に画面サイズを設定すると、かなりぐちゃぐちゃになる。
やはりダメだ。

他の改善法をご存じの方は、教えていただければありがたい。

Safari iOS（iPhone・iPad）の等幅フォント

まず、MacのSafariで等幅（monospace）を指定すると、デフォルトでは「Osaka-Mono」で表示されて、これが情けない感じになる…
このページなどのようにコードを半角英数でそれなりに分かりやすく表示させるには、「Courier New」がいい。
また、お気に入りはMicrosoftの「Consolas」。

そこで、等幅フォントの設定は次のようにしている。

code { font-family: "Consolas", "Courier New", monospace; }

といっても、これはMacのSafariだけ、iOS（iPhone・iPad）では等幅フォント指定のときは「Times New Roman」で表示されるらしい。

WP Code Highlight.js導入でcodeのフォントはリセット

ソースやコードの表示のために、WP Code Highlight.jsを採用したので、このcode用フォントConsolasは設定しなくなった。

フラットデザインのボックス box-sizing

フラットデザインではボックスの段組が基本になることが多いので、パソコンとタブレット横で4個、タブレット縦とスマートフォン横で2個、スマートフォン縦で1個などと、表示させたい。
そこで、marginやpaddingで悩まない、意図どおりのサイズにするために、下記などを追記する。

box-sizing: border-box;

さらに、フロートがらみのボックスでは、要所で次のようなしかけを

特定のボックス:after { content: ""; display: block; clear: both; }

今では、ベンダープレフィックス（-moz-box-sizing、-webkit-box-sizing:）は不要になっている

ボックスの外枠の角を丸める border-radius

iOSのSafariに限定されるわけではないが、見栄えとしてボックスなど四角の角を丸めたいと思うことがある。↓このように…

セレクタ {
border-radius: 10px;
}

「10px」のところは、お好きなものに変更を。

ここも、ベンダープレフィックスは不要になっている

iPhoneやiPadで横スクロールバー -webkit-scrollbar

テーブルなどは、スマホ対応で非常に厄介な代表格である。

テーブルがなるべくグダグダにならないように（セルが縦長になりすぎると気持ち悪い）、隠れた右側はスクロールすれば見えるようにするのも案だ。

無理やりの技に近いが、テーブルを次のように囲む。

<div class="scroll-box">
テーブル
</div>

そして、CSSでは次のように

.scroll-box { overflow-x:auto; }
.scroll-box::-webkit-scrollbar { height:8px; }
.scroll-box::-webkit-scrollbar-track { border-radius:8px; background:rgba(238,238,238,1); }
.scroll-box::-webkit-scrollbar-thumb { border-radius:8px; background:rgba(169,170,161,1) ; }

iPhoneで見ると↑このように横スクロールバーが出てくる。

この4つを設定しておけば、iOSのSafari画面が狭いときに最低限のスクロールバーが見えるようになる。
しかも、スクロールバーが不要なものでは表示されない。

例によって、「8px」のところは、お好きなものに。もちろん、3箇所とも同じ数値に。

Safari専用のCSSハック -webkit-min-device-pixel-ratio:0（::i-block-chrome,は現在無効）

Windows XPとInternet Explorer 6、その前のNetscape 4などで鍛えられたが

@media screen and (-webkit-min-device-pixel-ratio:0) {
	セレクタ { プロパティ:値 }
}

Safariや、とくにiOS（iPhone・iPad）だけCSSを効かせる方法である。

-webkit-なんちゃら

というものもあるが、これは、場合によってはChrome（Opera）も巻き込むので、Safariだけのピンポイントのときはメディアクエリのほうを使う。

また、今では有効ではないSafari CSSハックもある。

@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, セレクタ { プロパティ:値 }
}

「::i-block-chrome, 」があると、効かなくなっている。

Google Chrome（OperaなどのBlink）のCSSハック min-resolution: .001dpcm

またChromeも、SafariのWebKitと離縁して、Blinkで別進化しはじめたので、このChrome（OperaなどのBlink）だけCSSを効かせる必要も出てきたようだ。

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
	セレクタ { プロパティ:値 }
}

結局、IE / ネスケ時代のウェブ作成修行が活きることになる？

Windows 10のEdgeも心配…

なかなか情報が出回らないが、新しいWindowsも登場してかなり経つ。
新しいブラウザーのEdgeも、表示確認の必要があるのだが、そもそもWindows 10を導入する予定もない…

悩みの種は尽きない。
難儀なことだ。

間違い、勘違いがあれば、どうぞご指摘いただきたい。