読者です 読者をやめる 読者になる 読者になる

十を聞いて一を知る

要領の悪い高専生がプログラミングをします。

メディアクエリを使ってPCにだけCSSを適用させてみる

デザイン 2016年度春休み連載

こんばんは。
自動化は無かったことになってます。またモチベが上がったら続けます。


さて、今日はちょっとデザインをいじります


前回、本文が表示されるところのwidthをいじったんですけれども、そのときはこんな感じで、ただ#wrapperに幅を指定しているだけなので、スマホで見るとはみ出ちゃうんですね。

#wrapper {
  width: 750px;
}

こんな感じで。
f:id:taira1999120:20170312001510p:plain
ですので、上のような指定は、一定の幅があるデバイスにだけ対応させたいわけです。

そういう時に使えるのがメディアクエリ
こういう風に書けばいいそうです。

@media screen and (min-width: 980px) {
  ここにCSSを指定
} /* パソコン表示 */

@media screen and (min-width: 768px) and (max-width: 979px) {
  ここにCSSを指定
} /* タブレット端末表示 */

@media screen and (max-width: 479px) {
  ここにCSSを指定
} /* スマホ表示 */

(引用 「メディアクエリ」CSSだけでパソコン・タブレット端末・スマホ表示を切り替える

両端に200pxぐらいはpaddingが欲しいかなと思ったので、以下のようにしました。

@media screen and (min-width: 1150px) {
    #wrapper {
        width: 750px;
    }
}

ここで注意することがあります。

上のコードはCSSファイルの一番最後に書いてください。

そうしないと、条件に当てはまるデバイスには上のコードの内容(幅指定)しか適用されなくなります。

それでは、確認してみます。
f:id:taira1999120:20170312001544p:plain
できてますね。

以上です。