スマホサイトの制作

レスポンシブ

基本設計

コーディング

HTML5&CSS3などのセマンティックマークアップを使用

  • header
  • nav
  • section
  • article
  • aside
  • footer

補足として
挿絵や図表などを囲むfigureタグや
著作権情報、注釈などを囲むsmallタグも使います。


文章・テキスト
  • フォントサイズ(font-size)：14〜16px
  • 行間(line-hight):1.4~1.6
  • 左右の余白(padding):10pxずつ


メタタグにviewport指定
<meta name="viewport" content="width=device-width">

様々なデバイスに対応出来るようにcontentをwidth=device-widthにする。

aリンクに電話アプリを起動。
<a href="tel:電話番号">

電話番号（ハイフンなし）記述で自動的にスマホの電話アプリが起動。
記述番号へかけられる。