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?

【初心者向け】レスポンシブなサイトを作るときに気をつけたい3つのポイント

More than 3 years have passed since last update.

0 レスポンシブサイトってなんかむずそう

様々な画面サイズやスマホ対応のウェブページって作るの難しそうって思いますよね。

もちろん私も難しいと思っていたのですが、以外と要点だけを抑えたら簡単に作れたので、そのときに気をつけたポイントをメモしたいと思います(`・ω・´)

ここには要点しかないのでくわしく知りたい人はググりましょう( 厂˙ω˙ )厂

土日の暇なときにでも見ていただけたら嬉しいかもしれません(´・ω・`)

1 widthをpx指定しないほうがいい

同じPCで見てても見る人によってデザインが崩れる原因は何か
  => 基本的にはデバイスごとの画面サイズの違いである

mac 11インチ、13インチ、15インチ でもサイズは違うし。
windowsのディスプレイサイズもいっぱいあるし。。。。
iPadとかで見てもサイズ違う!!!

解決法 => %指定しましょう

デザイナーさん曰く、(なるべく) widthをpx指定しないほうが良いとのこと。
但し、heightに関してはデバイスごとで崩れることはないのでpx指定して良いそうです。

main.css
/* 横全画面に要素を配置したい時はこちら */
.wide{
    width:100%;
    height: 100px;
    background-color: antiquewhite;
}

/* 常に中央に配置したい場合はこのようにmargin autoを利用するとよいとコメントをいただきました、ありがとうございます */
.center {
    margin: 0 auto;
    background-color: aqua;
    width: 90%;
}

2 marginとpaddingにも気をつけること

CSSのblock要素にはデフォルトでmarginが設定されています。

もちろんpx指定されており、5つの要素を20%で設置すれば100%だ!

と思い5つ同じ要素を配置した時に崩れます。

まずはじめに、CSSにこれを設定することでページ内の変な余白を消してくれたり。
予期しない動きを抑えてくれたりします

main.css
*{
    margin :0px;
    padding: 0px;
}

自分でmarginやpaddingを設定するときにもpxが良いのか、そこにpxを利用して良いのかを考えて配置したほうが良さげですね。
実際はあまり使いませんが、marginも%指定するとずれないかもしれませぬ(´・ω・`)

と思ったのですが!!

margin :auto を使いましょう

twitter上でご指摘をいただき、調べた結果、左右中央に要素を配置できると記述されておりこちらを使ったほうが良さげでした。

main.css
.parts{
    margin: auto;
    width:20%;
    float: left;
    background-color: gray;
}

3 スマホ対応したい!

いくらページを%で指定したからとはいえ
スマホにまで対応できるわけではないです(`・ω・´)

1)例えばpartsというPC時に横に5つ要素が並んでいるものがあったとします。
2)スマホで見ると横に5個だと狭すぎる!! 横に2個ならぶ感じがいい!

そんなときはメディアクエリを使います

main.html
<div class="center">
    <div class="parts">20%</div>
    <div class="parts">20%</div>
    <div class="parts">20%</div>
    <div class="parts">20%</div>
    <div class="parts">20%</div>
</div>
main.css
.parts{
    width:20%;
    float: left;
    background-color: gray;
}

/* 画面サイズが480以下(スマホ)のときに適応されるCSS */
/* 変更点だけを書けばおk !! */
@media screen and (max-width:480px) { 
    .parts{
        width:50%;
    }
}

これは画面サイズの最大が480px以下しかない!! そんな場合のCSSの記述方式です。

@media screen and (max-width:480px) {
 この間にかいたCSSは画面サイズが小さくなったときに適応されるので
 いわゆるサイトがレスポンシブとかいうものになります
}

詳しくはこちらをごらんください。
http://sole-color-blog.com/blog/php/71/

スマホ対応をするならview port設定もお忘れなく

スマホで見たときにめっちゃいい感じにしてくれるやつです、お守りだと思って何も考えずに入れましょう。

main.css
<meta name=viewport content="width=device-width, initial-scale=1">

これを入れても横幅が足りない!!というときは
initial-scale=1 を 
initial-scale=0.9 とか少しずつ減らすとナイスな感じになるかもです。

=>しかしこの値を変更するとそのあと様々な部分で表示ズレを起こす危険性があるため、ちゃんと理解した上で値を変更するようにしましょう 。
今は良くてもあとではまるパターンのやつですね。。
[hakuho01さんにご指摘いただきました、ありがとうございます]

詳しく知りたい人はこちらを参照です。
http://qiita.com/ryounagaoka/items/045b2808a5ed43f96607

番外編 超簡単なレスポンシブテンプレート

最低限のレスポンシブを実装したhtmlです、是非自分のPC上に
main.html
main.css
の2つのファイルを作り、ブラウザで開いて、ブラウザの横幅を広くしたり小さくしてみたりしてください
多分レスポンシブしてくれると思います

main.html
<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="main.css">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>なるべくずれないHTML</title>
</head>
<body>
    <div class="wide">
        なんかタイトル的なやつ
    </div>
    <div class="center">
        <div class="parts">20%</div>
        <div class="parts">20%</div>
        <div class="parts">20%</div>
        <div class="parts">20%</div>
        <div class="parts">20%</div>
    </div>
</body>
</html>
main.css
*{
    margin :0px;
    padding: 0px;
}
.wide{
    width:100%;
    height: 100px;
    background-color: antiquewhite;
}

/* 中央に配置したいならmargin:autoを利用すると良いとコメントをいただきました */
.center {
    margin: 0 auto;
    background-color: aqua;
    width: 90%;
}


.parts{
    width:20%;
    float: left;
    background-color: gray;
}

/* 画面サイズが480以下(スマホ)のときに適応されるCSS */
/* 変更点だけを書けばおk !! */
@media screen and (max-width:480px) { 
    .parts{
        width:50%;
    }
}
basicinc
マーケティングとテクノロジーで社会のあらゆる問題を解決する集団
https://tech.basicinc.jp/
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