表示したいサイズの倍で画像を作成する。まとめコーディング前にレスポンシブ対応するか確認スマホのみであればhtmlはhtml5。cssはcss3がガシガシ使えます。レスポンシブ対応の場合はPCも表示しなければいけません。上書きしながら進めていかなければなりませんのでご注意ください。Queriesを使えるようにさせてからのスマホコーディングになります。Queriesはどうしようもないのでcss-mediaqueries.jsなど、ライブラリを導入してからコーディングに臨みましょう!他に対策あれば教えてください!(必死)スマホコーディングhtml5の基本設定viewportの設定スマホ向けに閲覧できるようviewport設定を行います。viewportはメタ情報なのでhtmlファイルのhead内に記載します。一般的なPCサイトを画面内に放り込んで表示するような形になるのでめっちゃコンテンツが小さい状態で表示されます。ちなみにPCのみの表示であればビューポートの設定は必要ありません。指定についての詳細は以下です。width表示する端末の画面幅で表示してくれます。「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つの設定については、設定時に注意が必要です。content="telephone=no">iphoneでは電話番号に自動でリンクがつきます。予期せぬ動きをするようでしたらとるようにしましょう。ウェブクリップアイコンPCではファビコンですが、スマホではウェブクリップアイコンとして設定してあげます。画像はpngで、rel属性で光沢の有無を設定できます。本気出すと指定だけで20を超えたりするので、要注意です。導入時に一旦確認できる端末は確認しておくとよいでしょう。基本は上記で、あとの指定は+αになります。対象はapple系の端末のみです。スマホであればiphoneシリーズ(4以降)ですね。高さ200pxの画像をimg要素で表示したとします。svgで表示があるかなと思います。順番に見ていきましょう!表示したいサイズの倍で画像を作成する。高さ200pxの画像をimg要素で表示しようと考えているとします。高さ400pxで作成します。高さ200pxに縮小して表示してあげるとちょうど実際に表示したいサイズの倍になり、綺麗に表示されるというものです。端末幅最大までとる場合は、想定している端末のうち、一番画面幅が大きいものの倍で作成しておくとよいでしょう。画面幅320pxの倍、横幅640pxで作成。現状デザイン作業時に320px想定で行うのが割と多いかと思いますので、不安でしたらお写真などは最低幅640px以上持たせて制作するとよいでしょう。あとは画像の容量とバランスを見ながら書き出してあげると良いと思います。svgで表示ベクターグラフィックで表示できるsvgは近年注目を浴びています。svgで表示する場合、いくつかの表示方法がありますが、使用時も注意が必要な箇所があります。あるのですが、ここでは意外にハマるポイント含めて紹介いたします。通常の画像と同じsrc属性へのパス指定で表示されます。(旧IEやandroid2.x系など、非対応ブラウザが存在します)pngその他のretina対応のように、表示したいサイズの2倍で書き出す必要はありません。●cssの背景で表示こちらも同様になります。インラインとしてhtmlで表示<svg></svg>タグで囲い、中に追記していきます。cssで指定し、見た目を変更することも可能です。●写真など複雑な図形はsvgにしない描画する点に対し、色の指定や座標位置が死ぬほど細くなり、めちゃめちゃ重くなります。使えないので、アイコンやロゴなど、単色、かつオブジェクトが細かすぎないものに当てると良いでしょう。●photoshop書き出しは要注意ラスタライズされたデータで書き出すと、dataURIschemeというもので書き出されます。この場合、img要素のsrc属性で通常の画像と同じく「〜〜/hoge.svg」のパス指定しても表示されませんdataURIschemeのものは以下のように直接インラインで書いてあげましょう。alt="ほげ">srcのパス部分は画像をエディタで開くと確認できます。※文字化けする場合があるのでご注意を。シェイプから書き出したものはillustratorで書き出したものと同じく、そのままパス指定で表示されます。フォントを使ったテキストをsvgで表示する際はシェイプに変換してから書き出しましょう。illustraotrであればアウトラインですね。これをしないとフォントがそのまま引き継がれ、「途中でアニメーションするしインラインとして入れよう」って変更かける時に書体が変わっちゃったりします。意外に落とし穴です(怖)。photoshopの場合、文字パレットについているbold機能を使うと、シェイプで書き出せません。筆者はこれで涙を飲んだ経験があります。他に注意点あったら教えてください(必死)!●IE8以下は表示されないレスポンシブ対応の時は注意しましょう。これも別途ライブラリを導入するか違う形式での対応で。●サーバーによってはサポートしていないApacheでも設定に追記が必要です。「ローカルでは表示されるけど、サーバーにあげたら表示されない!」って方はMIMEタイプに.svgとsvgをgzipで圧縮した.svgzを.htaccessなどに追記してあげましょう。定番の指定からなにこれ?、へぇ〜と思う小技指定をまとめてみました。100%;}widthやheightの幅スマートフォンはlandscape(横)、portrait(縦)など向きを変えて表示することができます。幅の指定は多くが%指定。上記を指定してあげるとwidthやheightの幅にpaddingとborderを含んでくれます。border-box;}タップした箇所の色付けタップした瞬間、タップ箇所の色が変わるようになります。rgba指定が可能ですので、透過などお好みで。0)で完全に消えますが、端末によって消えなかったりするかもしれませんからおつかいの際はご確認くださいませ。100%;}強制改行PCでもたまに当たったりしますが、半角英数字のみのURLなどは飛び出してしまいます。他にも変なところで改行されてしまったりするのを回避するためURLを表示する対象のセレクタにword-breakを当てましょう。hidden;}フォームのパーツをカスタムブラウザが自動で装飾してしまいますので、それをカットします。none;}またタップしてフォーカスが当たった時の指定も解除できます。none;}合わせてどうぞtableの弊害スマホサイトでは横幅がせまいため列が多くなると見づらくなってしまいます。tableタグは扱いに癖があります。scroll;を当てる方法です。フォントのサイズ指定はremがアツいremの単位で指定してやると、html、つまりルートに当てた数字をもとに計算された値が挿入されます。スマホで少し文字が小さいなと感じた時、htmlのフォントサイズを変更するだけで、サイト内のフォントサイズをremで指定している箇所すべてが相対指定で変更できます。//14px}スマホでのフォント最小サイズを知っておくブラウザ設定によって限界サイズが決められています。その限界値はブラウザによって異なりますが、現状10px以下はもはや下げられないと理解しておくとよさそうです。8pxまとめいかがでしたか?これ以外にもたくさんの設定やテクニックが潜んでいますので、ぜひ時間をみつけて情報収集に勤しんでくださいね。良い方法があったらぜひ教えてくださいね(必死)。ケイジャニストやまだこの記事が気に入ったら「いいね!」ブログを購読する更新時にプッシュ通知にてお知らせします。ケイジャニストやまだこんにちは。ゴリラから人間に転職しました。フロントエンドエンジニア、コーダー、マークアップエンジニア受け持つあたりを主な守備範囲としながら、デザイン業務も兼任(最近めっきり)しております。コミックイラストも得意です。