メディアクエリでスタイルシートを振り分ける

テーマのカスタマイズです。 jQueryでモバイル用スタイルシートに振り分けて~なら簡単なのですが このテーマは@mediaで振り分けられています。

このCSS、全く使ったことがないので覚書メモ

目的

今回は「見出しh2の位置をスマホ表示時画面に収めたい」です。

テーマの見出しは非常にシンプルで下線もアイコンも色もなく大きさのみなので、文章が長い私にとってちょっと見えにくいことに。

で、昨日こんな感じの見出しに変えたのですが

↑見えてますかね? 角を丸くすると短く見えるのでmargin-leftでマイナスして左に寄せました。 よく見る左に色がついた見出しとかも本文より少し左に出てますよね。

スマホでの表示

いまやスマホユーザーのアクセスが半数を占める状態で無視できないスマホ表示 Screenshot_2014-11-24-18-24-46 ぶったぎられてる!

ソース見てもわからんのだけど、おそらくモバイル表示は左端の余白部分をカットでマイナスではみ出てる部分が表示されないということだろうね。 私の知恵ではmargin以外左にはみ出させる方法がわからなかったので モバイル表示とPC表示切り替えればいいじゃんと思いついたわけです。 そんなモン、諦めて別の飛び出してない見出しにすればいいじゃんという話ですが、自己満足ですね。

確認

このテーマでの「ブレークポイント」は min-width: 479px (スマホ横置き) min-width: 767px (タブレット) min-width: 1023px (タブレット横置き) min-width: 1260px (13インチPC) min-width: 1360px (15インチPC)

と非常に細かい なんで上三つが1ピクセル小さく設定されてるのかわからんけど (最小値だから?より大きい~ってことだよね?じゃあ480px以下の記述はどこに?) はっきりいってこんな細かく設定されている所いじれない。内容見てもわからない 高解像度なスマホやら携帯やらがたくさんあるのに@mediaでの振り分けは正解なのか?とか思いつつ (Xperiaではサイドバーが下にくるモバイル表示がされてるので480px以上扱い?でもwidth400pxに設定した枠がはみ出ていたので360かな) (レスポンシブ表示を確かめるサイトで320pxだと見出しの表示がそもそも反映してない)

実装していく

んですが・・・・ ぐぐってよく出てくる @media screen and (min-width: 480px) and (max-width: 767px) っていう、480px以上767px以下っていうのを設定しても無意味

最初本体css通りにmin-width: 479pxとmin-width: 767pxにそれぞれはみ出てないCSSにして、はみ出たCSSは普通に記述しても動かず・・・・ えっもしかして本体に設定してある通りに全部指定していかないと無理? と思ったのですが、スマホをどうこうと指定するのではなく PCでは~という表示 ようはmin-width: 980pxではみ出た見出し指定 @media以降の普通の部分にはみ出てない指定 するとなんとか動いたようです。設定は980以上でいいのかなあ?1024pxにすべきか?それともそれ以上??iOSは解像度高めだよね。

/* 980px以上用*/
@media screen and (min-width: 980px) {
.entry-content h2{
    margin-left:-10px;
    padding: 10px 0px 10px 10px;
    border: 2px solid #c8db93;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #fff;}
}

.entry-content h2{
    padding: 10px 0px 10px 10px;
    border: 2px solid #c8db93;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #fff;}
}

確認

うちにiPadないからiPadはシュミレーションしたけど、もしスマホ表示なのにメディアクエリのCSSが適用されてたら?シュミレーターではそうなる。

スマホ端末はOK Xperiaもおっけー! iPhone4S、201Kはフッターのfeedlyボタンだけ下にずれてたけど表示はXperiaとまったく同じモバイル表示。はみ出ないCSS適用。

Nexus7 2014-11-24 13.35.13 たて おっけー

2014-11-24 13.35.32 よこ 同じ表示でサイドバーは出ない。

ドコモのタブレット02Fは10インチだけど縦はサイドバー無しでNexus7と同じ。 Screenshot_2014-11-24-22-54-54 横にしたらサイドバーが出た

iPadで見た時が心配。 Xcodeのシュミレーターで見てみてまた考えよう。 ぶったぎられてたらmax-widthでやってみるかな?

参考にしたサイト

レスポンシブwebデザインで制作する時のポイント │ Design Spice レスポンシブWebデザインのサイトを作るときのMedia Queriesの順番を考えてみた | A40 レスポンシブWebデザインはviewportとメディアクエリーからはじめろ! | 株式会社Bark to Imagine デザインリニューアルとレスポンシブデザインのメモ書き。 | Handy Web Design

Web上で動くシュミレーター

Responsimulator - Test websites on iPhone and iPad Browserling - Live interactive cross-browser testing Demonstrating Responsive Design Responsive Design Testing RWDTT:レスポンシブ・ウェブデザイン テスト・ツール Responsive Design Testing across Mobile and Desktop Browsers - iOS, Android, OS X, Windows iPad Peek / iPhone Peek