新年早々スマホコーディングの「html/css」についてもう一度おさらいしてみる。

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37

新年早々スマホコーディングの「html/css」についてもう一度おさらいしてみる。

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

あけましておめでとうございます！
普段はフロントエンジニア兼webデザイナーとして日々精進している山田、いえ
GORILLA-Yこと、ただのゴリラです。
本年もGrowGroup株式会社をどうぞよろしくお願いいたします！

さて今回はスマホコーディングについてもう一度おさらいということで記事を書きました！

普段web上で色んなサイトを見ていたり、プラグインなどを眺めていると
「そんなのあったの？」なんて指定に気づいたり、「よく見かけるけどあんまわかってない」なんて
状況、よくありますよね。

これは専門書を読んで学んでいくだけだと、その中に無い指定について自分で探求するのをやめてしまうから起こってしまう悲劇だと個人的に思っています。
新しいものを取り入れていくためにも、ここらで「htmlとcssのスマホ対応これだけはやっとけ/これはある程度わかっとけ」を一度まとめておこうと思ったわけですね。ハイ。

ってか備忘録ですね。ハイ。

ですので「知ってるよ」って方は華麗にスルーして他の記事を読んでください♪
https://grow-group.jp/blog/

それでは復習がてら、行ってみましょー！！！！！！

コーディング前にレスポンシブ対応するか確認

スマホのみであればhtmlはhtml5。cssはcss3がガシガシ使えます。
しかし、レスポンシブ対応の場合はPCも表示しなければいけません。
この場合、cssのMedia Queriesを使い、端末の幅を軸に当てるcssを切り替えて、
上書きしながら進めていかなければなりませんのでご注意ください。

またIE9以下の対応がある場合はhtml5、Media Queriesを使えるようにさせてからのスマホコーディングになります。
html5側は認識されない新しい要素(headerやfooterなど)ではなく、div要素に対してcssを当てていくことである程度解決できますが、
Media Queriesはどうしようもないのでcss-mediaqueries.jsなど、ライブラリを導入してからコーディングに臨みましょう！
他に対策あれば教えてください！(必死)

スマホコーディングhtml5の基本設定

viewportの設定

スマホ向けに閲覧できるようviewport設定を行います。
viewportはメタ情報なのでhtmlファイルのhead内に記載します。

<meta name="viewport" content="width=device-width,initial-scale=1">

※これを記述しない場合(ビューポート設定を行わない場合)、
一般的なPCサイトを画面内に放り込んで表示するような形になるので
めっちゃコンテンツが小さい状態で表示されます。
ちなみにPCのみの表示であればビューポートの設定は必要ありません。

指定についての詳細は以下です。

width

表示する端末の画面幅で表示してくれます。
※「スマホの画面幅　＝　windowサイズ」
「device-width」で端末の画面幅で表示してねという指定になります。

initial-scale

初期のズーム倍率です。
「1」としてあげることで暗黙的に等倍にて、端末の画面幅で表示する倍率になります。

基本はこれでOKですが、他にも指定ができます。

user-scalable

ピンチ(ズーム)できるかできないかです。1がyesで0がnoです。

minimum-scale

ピンチ(ズーム)したときの最小倍率を設定できます。

maximum-scale

ピンチ(ズーム)したときの最大倍率を設定できます。

Google先生はviewportの設定についてwidth=device-width,initial-scale=1を推奨しています。
拡大・縮小できなくしたり、極端な倍率でのズーム許可はユーザーのためにならないと考えているからです。
特に注意が必要なのが「minimum-scale」です。デフォルトの0.25ですとほぼ読めないですから、設定する場合は1くらいにしておくのがちょうど良いかもしれません。
いずれにしろ後者で紹介した3つの設定については、設定時に注意が必要です。

電話番号に自動でリンクがつかないようにする

<meta name="format-detection" content="telephone=no">

iphoneでは電話番号に自動でリンクがつきます。タップすると電話がかかりますが、
予期せぬ動きをするようでしたらとるようにしましょう。

ウェブクリップアイコン

PCではファビコンですが、スマホではウェブクリップアイコンとして設定してあげます。
画像はpngで、rel属性で光沢の有無を設定できます。

//光沢あり
<link rel="apple-touch-icon" href="画像のパス" />
//光沢なし
<link rel="apple-touch-icon-precomposed" href="画像のパス" />

ただブラウザによってかなりサイズや書き方が違っており、
本気出すと指定だけで20を超えたりするので、要注意です。
導入時に一旦確認できる端末は確認しておくとよいでしょう。
基本は上記で、あとの指定は+αになります。

画像のRetinaディスプレイ対応

対象はapple系の端末のみです。スマホであればiphoneシリーズ(4以降)ですね。
もうそんな古いの使っている人はいないですかね...

Retinaディプレイ対応とは？

例えば横300px × 高さ200pxの画像をimg要素で表示したとします。
その際通常のモニタであれば綺麗に表示されるのですが、高解像度ディスプレイである
Retinaディスプレイの場合、これがぼやけて表示されてしまうので、別途対応が必要になることを指します

解決方法

現状広く使われているテクニックとして、
１表示したいサイズの倍で画像を作成する
2　svgで表示

があるかなと思います。
順番に見ていきましょう！

表示したいサイズの倍で画像を作成する。

具体例としては
横300px × 高さ200pxの画像をimg要素で表示しようと考えているとします。
で、実際の画像は600px × 高さ400pxで作成します。
で、実際に表示する際、css等で横300px × 高さ200pxに縮小して表示してあげると
ちょうど実際に表示したいサイズの倍になり、綺麗に表示されるというものです。

端末幅最大までとる場合は、想定している端末のうち、一番画面幅が大きいものの倍で作成しておくとよいでしょう。
（例）iphone5 であれば画面幅320pxの倍、横幅640pxで作成。

現状デザイン作業時に320px想定で行うのが割と多いかと思いますので、不安でしたらお写真などは最低幅640px以上持たせて制作するとよいでしょう。
あとは画像の容量とバランスを見ながら書き出してあげると良いと思います。

svgで表示

ベクターグラフィックで表示できるsvgは近年注目を浴びています。
svgで表示する場合、いくつかの表示方法がありますが、使用時も注意が必要な箇所があります。
結構あるのですが、ここでは意外にハマるポイント含めて紹介いたします。

●img要素で表示

通常の画像と同じsrc属性へのパス指定で表示されます。（旧IEやandroid2.x系など、非対応ブラウザが存在します）
pngその他のretina対応のように、表示したいサイズの2倍で書き出す必要はありません。

●cssの背景で表示

こちらも同様になります。

インラインとしてhtmlで表示

<svg></svg>タグで囲い、中に追記していきます。
cssで指定し、見た目を変更することも可能です。

注意点

●写真など複雑な図形はsvgにしない

描画する点に対し、色の指定や座標位置が死ぬほど細くなり、めちゃめちゃ重くなります。
とても使えないので、アイコンやロゴなど、単色、かつオブジェクトが細かすぎないものに当てると良いでしょう。

●photoshop書き出しは要注意

ラスタライズされたデータで書き出すと、dataURIschemeというもので書き出されます。
この場合、img要素のsrc属性で通常の画像と同じく「〜〜/hoge.svg」のパス指定しても表示されません
dataURIschemeのものは以下のように直接インラインで書いてあげましょう。

<img src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhIAAACjBAAAAAA/r0WbAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhAQwUKAQnZZWQAAABKElEQVR42u3QMQ0AMAzAsPLHNlA7qmDYDhtBlDmseR3wDSfiRJyIE3EiTsSJOBEn4kSciBNxIk7EiTgRJ+JEnIgTcSJOxIk4ESfiRJyIE3EiTsSJOBEn4kSciBNxIk7EiTgRJ+JEnIgTcSJOxIk4ESfiRJyIE3EiTsSJOBEn4kSciBNxIk7EiTgRJ+JEnIgTcSJOxIk4ESfiRJyIE3EiTsSJOBEn4kSciBNxIk7EiTgRJ+JEnIgTcSJOxIk4ESfiRJyIE3EiTsSJOBEn4kSciBNxIk7EiTgRJ+JEnIgTcSJOxIk4ESfiRJyIE3EiTsSJOBEn4kSciBNxIk7EiTgRJ+JEnIgTcSJOxIk4ESfiRJyIE3EiTsSJOBEn4kSciBNxIk7EiTgRJ3IBSN983yGW0RsAAAAASUVORK5CYII=" alt="ほげ">

srcのパス部分は画像をエディタで開くと確認できます。
※文字化けする場合があるのでご注意を。

シェイプから書き出したものはillustratorで書き出したものと同じく、そのままパス指定で表示されます。

また、フォントを使ったテキストをsvgで表示する際はシェイプに変換してから書き出しましょう。
illustraotrであればアウトラインですね。
これをしないとフォントがそのまま引き継がれ、「途中でアニメーションするしインラインとして入れよう」って変更かける時に書体が変わっちゃったりします。
意外に落とし穴です(怖)。注意しましょう。

またphotoshopの場合、文字パレットについているbold機能を使うと、シェイプで書き出せません。
要注意です。筆者はこれで涙を飲んだ経験があります。
他に注意点あったら教えてください（必死）！

●IE8以下は表示されない

レスポンシブ対応の時は注意しましょう。これも別途ライブラリを導入するか違う形式での対応で。

●サーバーによってはサポートしていない

Apacheでも設定に追記が必要です。「ローカルでは表示されるけど、サーバーにあげたら表示されない！」って方は
MIMEタイプに.svgとsvgをgzipで圧縮した.svgzを.htaccessなどに追記してあげましょう。


  AddType image/svg+xml .svg
  AddType image/svg+xml .svgz
  AddEncoding gzip .svgz

スマホコーディングのcss3でよく使う指定

定番の指定からなにこれ？、へぇ〜と思う小技指定をまとめてみました。
これを知っていれば本番に超便利！

img、iframeのmax-width

大きすぎると画面からはみ出してしまうので、
設定しておきましょう


img,iframe {
  max-width: 100%;
}

widthやheightの幅

スマートフォンはlandscape(横)、portrait(縦)など向きを変えて表示することができます。
なので幅の指定は多くが%指定。上記を指定してあげるとwidthやheightの幅に
paddingとborderを含んでくれます。便利。


* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

タップした箇所の色付け

タップした瞬間、タップ箇所の色が変わるようになります。
rgba指定が可能ですので、透過などお好みで。
rgba(0, 0, 0, 0)で完全に消えますが、端末によって消えなかったりするかもしれませんから
おつかいの際はご確認くださいませ。


* {
-webkit-tap-highlight-color: rgba(0, 0, 0 ,0.5)
}

スマホを横にした時の文字サイズの変動に対応

スマホを横にした時に解像度の変更で文字サイズが変わってしまうのを防ぎます


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

強制改行

PCでもたまに当たったりしますが、半角英数字のみのURLなどは飛び出してしまいます。
他にも変なところで改行されてしまったりするのを回避するため
URLを表示する対象のセレクタにword-breakを当てましょう。


.hoge {
  word-break: break-all;
}

横にした後、縦にしたときに横スクロールが出てしまう場合

大枠にoverflowをかけましょう


.wrap {
  overflow: hidden;
}

フォームのパーツをカスタム

ブラウザが自動で装飾してしまいますので、それをカットします。


.wrap {
 -webkit-appearance: none;
}

またタップしてフォーカスが当たった時の指定も解除できます。


.wrap {
 -webkit-appearance: none;
 outline: none;
}

合わせてどうぞ

tableの弊害

スマホサイトでは横幅がせまいため列が多くなると見づらくなってしまいます。
しかもtableタグは扱いに癖があります。
いろんな対策ありますが、一番手っ取り早いのが
divで囲ってあげたあとoverflow: scroll;を当てる方法です。

フォントのサイズ指定はremがアツい

remの単位で指定してやると、html、つまりルートに当てた数字をもとに計算された値が挿入されます。
スマホで少し文字が小さいなと感じた時、htmlのフォントサイズを変更するだけで、
サイト内のフォントサイズをremで指定している箇所すべてが相対指定で変更できます。


html {
  font-size: 62.5%; //10px
}

body {
  font-size: 1rem; //10px
}

h1 {
  font-size: 1.4rem; //14px
}

スマホでのフォント最小サイズを知っておく

ブラウザ設定によって限界サイズが決められています。
その限界値はブラウザによって異なりますが、現状10px以下はもはや下げられないと理解しておくとよさそうです。

・Google Chrome = 10px
・iOS= 9px
・android= 8px

まとめ

いかがでしたか？
これ以外にもたくさんの設定やテクニックが潜んでいますので、
ぜひ時間をみつけて情報収集に勤しんでくださいね。
また、良い方法があったらぜひ教えてくださいね(必死)。

それではみなさん、

「よいコーディングを！」

ゴリラ素材は安定の素材工場さんより