Macを含むSafari向けと、iOS(iPhone・iPad)特有のCSSハック 15個。iPhone縦横でフォントが変わるのを阻止。Safari CSSハックで::i-block-chrome,は現在無効なので注意!
モバイルファースト / マテリアルデザイン / JSON-LD
WebP/ 4K DPR3 レスポンシブイメージ
gridレイアウト / flexboxコンテンツ / レガシーWeb終焉!
モダンWebの証明! comからjpへ
スマートフォンサイトやレスポンシブWebデザインでやっておくべきCSS設定
このページ、加筆修正して表示を確認したところ
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); }
これで、こちらの設定が活きるようになる。
Macを含むSafariでは、明朝(serif)がデフォルトなので、ゴシック(sans-serif)を設定する。
* { font-family: sans-serif; }
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事情にも配慮しておきたい。
参考にしたサイト・ページ
もう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の問題かもしれないが)
スマートフォン、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のデバイス縦横でフォントサイズが変わるので、それを阻止。
body { -webkit-text-size-adjust: 100%; }
かつて書いていた「-webkit-text-size-adjust: none;」は、パソコン画面で不具合があるとのこと
タップターゲット(いわゆるリンク)を長押しすると出てくるポップアップ
これを阻止するには、
a { -webkit-touch-callout: none; }
他の多くのサイトとは違う操作感になるので、最近は止めている。
(なにより、自分たちさえとまどうことに(笑))
Appleもフラットデザインにしようとしているのか、よく分からないが、フォームボタンなどは従来型の丸々となったままだ(笑)
これをなんとかしたいときは、その箇所に次のように設定する。
セレクタ { -webkit-appearance: none; }
サイト丸ごとなら
* { -webkit-appearance: none; }
不思議なことに、iPad横画面のときに、スワイプ(スクロール)させると上下だけでなく左右にも画面が動くサイトやページがある。
自サイトでそんなことが起こっていたら、ユーザーは鬱陶しくてたまらないので、次のようにCSSを設定する。
html, body { overflow-x: hidden; overflow-y: auto; }
不思議が重なるのだが、bodyだけではダメで、その上のhtmlまで設定しないと、効かないようだ。
また、下記のように設定すると、このSEO塾.comのファーストビューの画像のところもおかしくなる…
* { overflow-x: hidden; overflow-y: auto; }
じつはこのサイトも、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」に画面サイズを設定すると、かなりぐちゃぐちゃになる。
やはりダメだ。
他の改善法をご存じの方は、教えていただければありがたい。
まず、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用フォントConsolasは設定しなくなった。
フラットデザインではボックスの段組が基本になることが多いので、パソコンとタブレット横で4個、タブレット縦とスマートフォン横で2個、スマートフォン縦で1個などと、表示させたい。
そこで、marginやpaddingで悩まない、意図どおりのサイズにするために、下記などを追記する。
box-sizing: border-box;
さらに、フロートがらみのボックスでは、要所で次のようなしかけを
特定のボックス:after { content: ""; display: block; clear: both; }
今では、ベンダープレフィックス(-moz-box-sizing、-webkit-box-sizing:)は不要になっている
iOSのSafariに限定されるわけではないが、見栄えとしてボックスなど四角の角を丸めたいと思うことがある。↓このように…
セレクタ {
border-radius: 10px;
}
「10px」のところは、お好きなものに変更を。
ここも、ベンダープレフィックスは不要になっている
テーブルなどは、スマホ対応で非常に厄介な代表格である。
テーブルがなるべくグダグダにならないように(セルが縦長になりすぎると気持ち悪い)、隠れた右側はスクロールすれば見えるようにするのも案だ。
無理やりの技に近いが、テーブルを次のように囲む。
<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箇所とも同じ数値に。
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, 」があると、効かなくなっている。
またChromeも、SafariのWebKitと離縁して、Blinkで別進化しはじめたので、このChrome(OperaなどのBlink)だけCSSを効かせる必要も出てきたようだ。
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
セレクタ { プロパティ:値 }
}
結局、IE / ネスケ時代のウェブ作成修行が活きることになる?
なかなか情報が出回らないが、新しいWindowsも登場してかなり経つ。
新しいブラウザーのEdgeも、表示確認の必要があるのだが、そもそもWindows 10を導入する予定もない…
悩みの種は尽きない。
難儀なことだ。
間違い、勘違いがあれば、どうぞご指摘いただきたい。
販売サイトは、クレジットカードで(Amazon、Microsoftなども採用しているStripeを採用)
銀行振込にも対応しています(安全性・信頼性のため Stripe の口座を利用しています)
オンラインからでもATMからでも振り込むとすぐに、マイページでダウンロードできるようになります