Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

最速のレスポンシブWeb

More than 3 years have passed since last update.

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

下記の記事が長かったので最低限必要な部分だけテンプレートにまとめました。
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>

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

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

画面回転への対応

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

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

kenz_firespeed
Androidのアプリ開発を行っています。 お仕事お待ちしております。
https://firespeed.org
zozotech
70億人のファッションを技術の力で変えていく
https://tech.zozo.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away