iPhone5が手元にやってきたので、試験的に一部のページをスマホでマトモに見えるようにしてみた。 iPadやAndroid端末は持ってないからどう見えるか知らない。
昔はデザインにテーブルを使いまくりました。
このサイトでも古いページの各章タイトルはテーブルで作られています。
時は流れ、CSSというものが登場し、デザインはCSSに任せるスタイルが主流になりました。
比較的新しいページは表じゃないテーブル、fontタグやstyle属性は使わずに書かれています。
各章のナビの部分も、です。
CSSのみ（スクリプトなし）でこれくらいのことは簡単にできてしまいます。
fontタグなんて使い方を忘れています。
あとは上下左右にabsolute配置したメニューを入れまくって、本文の幅が固定で画像だらけ、というページも見ますが、そういうのもイケてません。
特にPCだけでなく、PDF・スマホなどいろいろなデバイスで見やすいページにするには、伝えたい情報をきちんと整理して、内容と関係のない部分は最低限にするべきです。
CSSが出てきた頃から言われていることですが。
とにかく「スマホを縦にしたときに、横にはみ出さないように作る」、これに限ります。 はみだすとiPhoneを縦・横切り替えたときに表示が乱れます。
通常、横にはみ出した部分はビューポート（ウィンドウ）にくっついているスクロールバーでスクロールすることになりますが、
あとでCSSでoverflow: auto;かwhite-space: pre-wrapにすることで対応します。
テーブルも横長になりがちです。
縦長の構成に直せないか考えます。
どうしても横長になる場合、tableに直接overflow: auto;は指定できないので、tableのマージンを0にし、paddingを0にしたdivで外側を囲み、divにoverflow: auto;を指定します。
以下に例を示します。
スタイルシートはこうなっています。
.nr {
overflow: auto;
white-space: nowrap;
padding: 0px;
margin-left: 0.5em;
}
.nr table { margin: 0px; }
HTMLソースはこうです。
<div class="nr"> <table> <tr><td>横に長い<td>テーブルは<td>幅の狭い<td>デバイスだと<td>収まりきらないんですよね </table> </div>
classにnrが指定してあって改行されないので、とても横に長いテーブルになります。
結果は以下のようになります。 PCなどでウィンドウを小さくすると、テーブルの下に横スクロールバーが出ます。 iPhoneならテーブルを指で左右に動かせばスクロールするでしょう。
| 横に長い | テーブルは | 幅の狭い | デバイスだと | 収まりきらないんですよね |
ちなみに上に挙げたpreもoverflow: auto;が指定してあるので、同様にスクロールできるはずです。
max-width: 80%; height: auto;のような指定が楽チン。(27 Oct 2018)
表示されるときに横300ピクセル程度に押さえる必要があります。
とはいっても、画面の大きいメディアでは大きな画像を使った方がいいのは明白なので、CSSのメディアクエリを使って、画像サイズより幅が狭くなった場合は横幅をパーセント指定で縮小してしまいます。
そういう観点から言うと、画像の横幅がバラバラだとやりにくい。
完全に一致している必要はありませんが、同じくらいの横幅にそろえるとか、何種類か幅のカテゴリーを用意してきちんとclassを指定しておくとか、そういう工夫が必要です。
プログラムのソースを載せてると
Supercalifragilisticexperidocious
みたいなのに出会います。
これは
word-break: break-word;
とか
overflow-wrap: break-word;
を入れるか、強引に、もしくはソフトハイフン（­）を入れて、つまり、手でハイフネーションをおこなって、
Supercalifragilistic-experidocious
Supercalifragilisticexperidocious
のようにしておく必要があります。
後者はSupercalifragilisticとexperidociousの間に­を入れてあります。
CSS3のメディアクエリという機能を使います。 主にビューポートの横幅と、縦長か横長かの判定を使うことになるでしょう。
@media screen and (max-width: 450px) {
}
最大で450ピクセルまではこのブロックの中の指定が使われます。 このピクセル数はデバイスピクセルではなく、CSSピクセルで数えます。 450ピクセル以下ならばスマホが縦だろうが横だろうが、PCのブラウザだろうが適用されます。
@media screen and (orientation: landscape) {
}
@media screen and (orientation: portrait) {
}
前者は横長、後者は縦長です。 ランドスケープ、ポートレートは印刷や写真ではよく使われる言葉です。 ランドスケープ＝風景画なので横長。 ポートレート＝肖像画なので縦長。 これもPCブラウザでも適用されます。
@media screen and (-webkit-min-device-pixel-ratio: 2) {
}
デバイスピクセルとCSSピクセルの比が2以上のときに適用。 PCでも適用される・・・はずですが、今のところそういう環境はないはずなので、高解像度ディスプレイ搭載のスマホのみでしょう。 将来的にはPCにも対応するものが出てくるかもしれません。
実験的に適用してみたのがこれ → media-query.htm
CSSは同じ優先度の設定は後から指定したものが有効になるので、たとえば幅640ピクセルの場合はmax-width: 700pxまでは有効で、max-width: 600px以降は使用されないので、max-width: 700pxのバックグランドカラーが使用されます。
同様に、縦長だと黒文字、横長だと青文字になります。
デバイスピクセル比が2以上だと赤枠になります。
ブラウザの大きさをいろいろ変えて試してみると分かりますが、横幅と画面の向きはスマホだけでなく、PCブラウザでも同様の動きをします。
結局のところ、将来に渡ってPCとスマホを確実に切り替えるメディアクエリーは、今のところは「ない」と思ったほうがいいです。
逆に言うと、PC上でブラウザの幅を狭くして見れば、スマホでどう見えるかもだいたい分かる、ということです。
幅が狭い環境でも快適に見られるコンテンツか？ が重要。
<meta name="viewport" content="initial-scale=1.0">
<style type="text/css"><!--
body {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
-->
initial-scaleを入れておかないと、縦横を切り替えたときに画面の拡大率が変わってしまいます。
ビューポート設定にはwidthも指定しているものをよく見かけますが、横幅がどうなっても見やすくするのが目標なので入れません。
text-size-adjustを入れておかないと、テキストの拡大率が変わってしまいます。(27 Feb 2022)
<link rel="icon" type="image/vnd.microsoft.icon" href="http://.../xxx.ico"> <link rel="shortcut icon" href="http://.../xxx.ico"> <link rel="apple-touch-icon" href="http://.../xxx.png">
前2行はPCブラウザ用で、MSの.icoファイルを指定します。
.icoファイルはVisual Studioやフリーのリソースエディタで作れます。
最後のapple-touch-iconというのがスマホやiPad向けのアイコンで、iPadのアイコンサイズはiOS6までが144×144、iOS7は152×152だそうです。
ぴったりに作らなくても各デバイスで勝手に拡大・縮小してくれます。
なので、最大サイズのPNGを作って、絶対パスで指定します。
絶対パスで指定しないとAndroid端末で問題が起きるものがあるらしい。
shortcut iconというのは古いIE用だったと思いますが、そもそもrel="shortcut icon"と書いた場合、SGML的にはrel属性にshortcutとiconというふたつの値を指定した、という意味になるので、ちょっとオカシイのです。
ほんと某OSベンダーはこういうの多くて困る。
いまさらIEでもないでしょうから、この指定はそろそろ捨てていい頃なのかも知れません。
CSSでのフォント指定について考える（2014年）（DPT Transit）を参考に、実機でどうなるか見たことないけど適当に設定してみました。
PC上の場合、Win7から使えるようになったメイリオがタイトルなどに向いていると思いますが、本文には向かないと思うのです。 ヒント情報が貧弱なようで、アンチエイリアスをしないブラウザでの表示がきたないです。 H1・H2などの大きめなタイトルはメイリオで、あとは太字と共通。
本文はやはり明朝がいいのですが、MS明朝がきれいじゃない。 最近のOS XやWin8.1などでは游明朝・游ゴシックというフォントが共通して使えるようですので、これを使うのもよいでしょう。 ここでは本文は欧文がTimes New Roman、和文は游明朝・ヒラギノ明朝・MS Pゴシック・Serif、と指定しています。 SerifなのにまさかのMS Pゴシック（笑）。
太字はMSゴシックだけでは太く見えないので、どうしてもfont-weight: bold;を指定することになります。
そうすると他のフォントも道連れで太くなってしまうのですが仕方ないでしょう。
ここでは游ゴシック・ヒラギノ角ゴシック・sans-serifと指定しています。
Arialは太くなりすぎるので泣く泣く外しました。
Windows環境で放っておけば通常はMS Pゴシックになるので、MS Pゴシックは指定していません。
等幅は欧文がCourier New、あとはOsaka等幅、MSゴシック。
そんなんで、このページはこういう指定になっています。
h1, h2 {
font-family: Arial, "游ゴシック", YuGothic,
"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
"メイリオ", sans-serif;
font-weight: normal;
}
h3, h4, h5, h6, dt, b, strong, th {
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3",
"Hiragino Kaku Gothic ProN", sans-serif;
font-weight: bold;
}
body, table {
font-family: "Times New Roman", "游明朝", YuMincho,
"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
"ＭＳ Ｐゴシック", serif;
}
pre, code {
font-family: "Courier New", "Osaka−等幅", Osaka-mono,
"ＭＳ ゴシック", "MS Gothic", monospace;
font-size: 100%;
font-weight: normal;
}
<style type="text/css"><!--
.row {
text-align: center; line-height: 0;
}
.col {
display: inline-block; width: 10em;
text-align: left; line-height: 1.5;
vertical-align: top;
}
--></style>
<div class="row">
<div class="col">中身1</div>
<div class="col">中身2</div>
...
<div class="col">最後の中身</div>
<div class="col"></div><div class="col"></div><div class="col"></div>
<div class="col"></div><div class="col"></div><div class="col"></div>
</div>
原理的には中に入ってる箱を幅が固定のinline-blockにして並べてるだけです。
これだけでブラウザの横幅を変えると勝手に列数が変わります。
ただ、全体を中央に並べようとして外の箱にtext-align: center;を指定すると、最後の半端になった箱、例えば、要素が7個で縦2列のときに、最後のひとつだけ真ん中になってしまいます。
これを防ぐために後ろに適当に空箱を突っ込んでいます。
この例では6個突っ込んでいますが、こうすると6列までは半端になるのは空箱だけです。
中途半端な位置に出ても空箱なので見えません。
空箱が作る行の高さを0にするために外側の箱のline-heightを0にし、そうすると内側の箱のline-heightも0になってしまうので内側の箱では再設定します。
vertical-alignは空箱の上下にできる微妙な隙間をなくすために入れてあります。
このページがそうです。
ページ幅が広いうちは、ナビ部分がh1・h2などの中に出ます。
ddは左マージンを大きくしています。
幅が狭くなるとナビ部分がジャマになってタイトルが全部入らなくなることがあるので、display: none;でヘディングの中に入っているナビを消してしまいます。
その代わり、position: absolute;にしたナビが画面の右上に常に出るようにします。
ページトップに戻したときにh1とかぶらないようにh1に上マージンを設け、このマージンの上に戻るようにidはbodyではなくhtmlに付与しています。
いいのかこれで、っちゅう気もしますが、こうしないとマージンの下に戻ってしまうので。
ddは左マージンがジャマになるのでなくして、そうすると項目の区別が付けにくくなるので、dtの上マージンを広くしています。
preは横長になることが多いので、文字を小さくしてなるべく多くの文字がスクロールせずに見られるように。
他にもh1・h2の左右マージンも微妙に調整しています。
このページには画像はありませんが、VDMOSのパラメータでは画像の幅を80%で指定して、大きな画像が飛び出さないようにしています。
imgのwidthでピクセル数を半分にした値を設定する方法もありますが、画像によって値を変える必要がありますし、この方法ならビューポートがどんな幅になってもそれなりの大きさで表示してくれる、というメリットがあります。
VDMOSのパラメータで本文を変更したのは右上に固定のナビを出す部分だけです。 それ以外は全部CSSで済んでいます。 内容重視のシンプルなページなら、これだけでスマホ対応になる、ということです。
これで縦横を切り替えても表示は乱れないのですが・・・表示位置が飛ぶぞ、おい。
最近のiOSのSafariでは縦横を切り替えたときに表示がどこかへ行ってしまうことはなくなりました。
それと、ナビは:hover擬似クラスを使っていて、これはスマホではうまく動きません。
そこまで凝る必要はないか、ということで、そのままにしてあります。
縦・横を切り替えるとページ内の表示位置が移動してしまう。 → iOSの更新で勝手に直った
hover擬似クラスの扱い。
CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き （Webデザインレシピ）
@mediaのorientationはviewportの縦横がどっちが長いかであって、デバイスが縦か横かじゃないですよ （dskd）
いまさら聞けないRetina対応のための「ピクセル」の話 （Rriver）
-webkit-text-size-adjust: none を絶対に設定してはいけない理由 （てっく煮ブログ）
width=device-width, initial-scale=1についてぐちゃぐちゃと （Untitled）
Androidは「apple-touch-icon」でいろいろハマるので要注意 （TAM Technical Team Tips Note）
スマホ対策！faviconを設定するなら「ウェブクリップアイコン」も忘れずにね！ （LIG）
［iOS7〜］apple-touch-icon（Webクリップアイコン）のサイズ （別冊webメモ）
CSSでのフォント指定について考える（2014年） （DPT Transit）
Copyright (C) 2014-2022 akamoz.jp
$id: subckt.htm,v 1.1 2011/04/09 15:50:13 you exp $