スマートフォン専用サイトを一から作る第2回

スマートフォン専用サイトのcss

今回はスマートフォン専用サイトのcss記述における注意点を学習する。

デザイン面の注意点

スマートフォン専用をデザインする際、注意すべき点として下記が挙げられる。

640px幅を前提に作る。
Androidはフォントが機種によって異なるため、指定を諦める。
bolder(太文字)は指定できない。text-shadowを用いる。
jQueryは使わず、css3での演出を中心にする
html5,css3の非対応ブラウザが存在しないため、対処の記述は不要

フォント指定

body {
  font-family:"Hiragino Kaku Gothic ProN",Helvetica,san-serif;
}

フォントはiOS用の指定だけとなり、今のところ常に上記だけ指定しておけばよい。

文字サイズ自動調整off

body {
  -webkit-text-size-adjust:none;
}

webkit-text-size-adjust: none;の記述で、bodyに対し文字サイズ自動調整(古いiPhoneにあった機能)をoffにする。

新要素をブロックレベル要素に

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary{ 
  display:block;
}

これらのタグはinline要素なので、blockに変える。リセットの一種として常に書くようにする。

titleをブラウザ上に表示

<li class="thumbnail"><a href="penguin.html" title="ペンギンのイラスト" >

.thumbnail a:after{
  content:attr(title);
}

aのtitle属性をブラウザに表示させる。cssだけでブラウザに表示させる文字を指定できるため、用途が広いテクニック。PC用とスマートフォン用で別の.cssを使う場合が主な用途である。

文章が長い場合に省略させる

h1{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

文章が長い場合に省略させる。常に3文でワンセット。スマートフォンの狭い画面を有効活用するために重要かつ頻出の記述。スタイルの崩れも予防できる。見出しで良く使われる。

感想

スマートフォンサイト特有の記述テクニックは数多くあり、今後も学習が必要だ。PCサイトではデータ量の大きな動画を背景にしたようなサイトも見られる一方、スマートフォン用サイトの世界ではデータ量や処理の軽量が進んでいる。この点でWeb業界は転換期にいると考えられる。棲み分けが進むのか、あるいはモバイルファーストの勢いはPCサイトを陳腐化させるのか、動向に注視していきたい。

考え、感じる、Web制作。

Web制作の学習や情報についての記事が中心です。