とりあえずこれだけやっとく

下記の記事が長かったので最低限必要な部分だけテンプレートにまとめました。
http://qiita.com/kenz_firespeed/items/5cab42ad323913957935
PCとスマートフォンで使うときに変な挙動がでないようにする最低限抑えておきたいHTMLとCSSです。
見栄え的なものは適用していないのでご自由につくってください

レスポンシブというとついついブートストラップみたいなテンプレートに頼りがちですが、巨大なテンプレートを導入して手に負えなくなるよりは最初はシンプルなところから始めてみては如何でしょう？

HTMLのテンプレート

<!DOCTYPE html>
<html>
  <head>
    <title>TITLE</title>
    <link rel="stylesheet" href="style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <meta charset="UTF-8" />
  </head>
  <body>
    <header>
      <nav>
        <a href="">page</a><a href="">page</a><a href="">page</a>
      </nav>
    </header>
    <h1>全体見出し</h1>
    <main>
      <article>
        <h2>記事の見出し</h2>
        <p>記事の内容</p>
      </article>
    </main>
    <footer><small>著作権的なこと</small></footer>
  </body>
</html>

cssのテンプレート

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

a{
  display: inline-block;
  padding: 0.3em;
  margin: 0.3em;
}

最低限の解説

詳しい解説は元記事を見てほしいけれど、最低限の部分だけ

<link rel="stylesheet" href="style.css" />

見た目に関する部分は無条件でcssにするんだ

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

モバイル対応サイトであることをスマートフォンに伝えて余計な処理をさせない

<meta charset="UTF-8" />

今から作るならUTF-8で作ろう

    <header>
      <nav>
        <a href="">page</a><a href="">page</a><a href="">page</a>
      </nav>
    </header>

headerやnavといった意味を表すタグはレスポンシブ抜きにしてあとからコードをいじるときに見やすくなるので積極的につかおう。
メニューをulでまとめるのは昔流行ったけれど今となってはあまりやる価値ないと思う。

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

画面回転への対応

a{
  display: inline-block;
  padding: 0.3em;
  margin: 0.3em;
}

タッチパネルではテキストのリンクを押しにくいのでinline-blockにしてpaddingを設定することでタップ領域を確保している。
リンクが隣りあった時に隙間を開けるためにmarginもいれる。

最速のレスポンシブWeb

とりあえずこれだけやっとく

HTMLのテンプレート

cssのテンプレート

最低限の解説