以前このブログで、画面サイズやデバイスサイズによってスタイルの適用を分岐させることの出来る[メディアクエリ]での、僕なりの使い方をご紹介(というのもおこがましい内容ですが・・)させていただきました。
この前、新規にWEBサイトを制作する機会があって、早速メディアクエリを設置したのですが、うまく動作しない・・・というか効いてない!

スタイルシートがメディアクエリを使っていないときと同じで、上から順番に適用されているだけではありませんか。

これは何事ぞ・・・あれメディアクエリってmetaタグに何か書くんだっけ・・・としばらく試行錯誤してしまいましたが、解決策は何の事はない。
というわけで今回僕が陥った問題の解決策(というほどのものでもない!)を記しておきます。

最初に書いたのはこんな感じ・・・

<style type="text/css" media="all">
/*===============================================
●iphone7 plus
===============================================*/
@media screen and (max-device-width: 414px){
#top-contents {
margin-top: 0px;
}
.sidebar {
width: 100%;
}
}
/*===============================================
●PC
===============================================*/
@media screen and (min-device-width: 415px){
#top-contents {
margin-top: 320px;
}
.sidebar {
width: 31.66%;
}
}
/*******以下共通スタイル********/
.mh-sidebar {
float: left;
margin-top: 320px;
}
</style>

デバイスによってマージンや要素の幅を変えたかったんですね。

でもうまく動作しません!
メタタグいじったり色々したけれど、答えは簡単でした。

<style type="text/css" media="all">
<!--
/*===============================================
●iphone7 plus
===============================================*/
@media screen and (max-device-width: 414px){
#top-contents {
margin-top: 0px;
}
.sidebar {
width: 100%;
}
}
/*===============================================
●PC
===============================================*/
@media screen and (min-device-width: 415px){
#top-contents {
margin-top: 320px;
}
.sidebar {
width: 31.66%;
}
}
/*******以下共通スタイル********/
.mh-sidebar {
float: left;
margin-top: 320px;
}
-->
</style>

styleタグが、システムによってページに表記されないように、内側をコメントで囲むルール。
時々忘れちゃってました。
てか使わなくても大丈夫だし・・・。

今回の場合はwordpressで書いていたときだったので、環境によっては影響がない場合もあるかもしれません。

こんなつまらんことか!と怒ることなかれ。
この記事であーだこーだやってる時間が10分でも短縮できるデザイナーがいることを願いつつ。

ではまた。。

Comments are closed.

  • エスエスアイ・ラボはISMSを取得しています。
  • エスエスアイ・ラボはVMwareの認定パートナー企業です。

Copyright © 2011 SSI Laboratory Inc. All Rights Reserved.