解像度によるレスポンシブの設定について

css/responsive-pc.cssでは、1110pxで各パーツの幅を決める部分が740pxに設定されています。
各パーツとは、#header-in,#navi-in,#body-in,#footer-inです。

つまり、画面幅が1110px以下になった場合はこれらパーツが740pxになるため、その中にある要素はそのサイズになります。

ここで逆に質問ですが、750pxでタブレット表示になったとして、サイドバーは通常300pxあり、#mainも740pxでそれらの間のスペースを含むと、最低でも1070px程度はないと横並びになりません。サイトバーがカラム落ちしてしまうことになります。ここら(横並び)も維持したいという場合と、横スクロールが発生しても良いという場合があるかと思うんですがどう考えられますか？

もし多少横並びが発生しても良いというのであれば、カスタマイザーの「レイアウト(全体・リスト)」で「タブレットはモバイル表示 」のチェックを外せば良い感じになるかも知れません。

横並びを維持して#mainの幅を狭めたいと言う場合はメディアクエリで各パーツの幅を変更していく感じになるかと思います。ただしいくつもメディアクエリを書くのは効率が悪いので、ブレイクポイントを決める必要があります。つまり、画面幅がいくつの時は#mainのサイズはいくつかみたいな感じです。

例えば、画面幅が1070px以上は各パーツが1070pxはひとつ考えられると思います。ボーダー幅があるのでbox-sizing:border-boxを入れたりしないといけないかも知れませんけれども。
ではそれより画面幅が小さい時どうするかですが、言われている750pxをブレイクポイントにした場合は、

@media screen and (max-width: 750px){
  #header-in, #navi-in, #body-in, #footer-in{
    width: 100%
  }
  //その他諸々のセレクタとプロパティ
}

で、750pxよりも小さくなった時には初めて画面幅いっぱいに使うことができます。問題点は1070pxと750pxの間をどうするかです。横スクロールが発生しても良いのであれば、間の画面幅の時の設定を特にしなくても#header-in, #navi-in, #body-in, #footer-inは1070pxになってますから表示はされます。横スクロールが発生しないようにするとなると、cssのみではちょっと面倒すぎてアレなのでjQuery等で#mainの幅を計算させるほうがサックリ実装できます。

常にjQueryを使うと負荷になるので、なるべく限定的に使ったほうが良いようにも思います。なので、どの部分(画面幅)でjQueryを使うべきかを考えないといけません。

まぁなんでこんなややこしいことを言うかと言いますと、結局デバイスの解像度は色々あって、たいていのPCでは1024pxは表示できるサイズなわけです。たいていはいけるんですが、カナさんのように利用される環境によってたいていの範囲から外れることもあります。
こういったイレギュラーはデバイス間でもありまして、例えばipadと何かしら他のアンドロイドのタブレットなどでも表示できる解像度は異なりますし、縦読みの時と横読みの時とでは画面サイズが変わりますから同じデバイスなのに表示が異なるということもあるわけです。まぁPCでもブラウザ幅をリサイズすれば同じことですけれども。

これら全てに画面ピッタリと合わせて表示することは不可能ではないにしても色々と面倒なので、メディアクエリのブレイクポイントの設定で、それ以下の画面サイズや、それ以上それ以下の画面サイズなどとしておおまかによく使われるであろうブレイクポイントでサイズを設定してあるわけです。

これを何かしらの環境に合わせると、他の人にとってはなんでこのサイズなんだ？と言う事になるかも知れません。横900pxまで表示できるタブレットがあったとして、カナさんの設定のブログを見た場合、ずっとサイドバーが画面外にあって横スクロールしないと表示されないという状況になるということです。
Simplicityでは1110pxあれば、サイドバーとメイン部分が横並び、それ以外はサイドバーが下に落ちると言う仕組みになってますよね。これは世間で言うタブレットのサイズが1024pxぐらいまで表示できるという点からは理にかなってます。
もしそれ以上表示できるタブレットなら、PC表示で良いわけですし。それ以下ならタブレットの表示と言うことですので。

こういうことから、もし変更するとすれば、画面幅が750px以下の時は各パーツ100%表示でそれ以上はブレイクポイント事の各パーツ幅と言う設定を行う必要があると言う感じになります。ここはcssだけではなくjQueryも使う感じでイケるだろうと思います。

参考: PCのブラウザで幅を狭めても右カラムが落ちないようにする方法について

うちのサイトではscssのメディアクエリの話ですが、もう少し柔軟なブレイクポイントについて説明もしてます。
参考: SASS(SCSS)を利用する メディアクエリのアイデア

750pxで100%表示で本当に良いかを再度考えてみて下さい。750px以上1070pxの間の#mainの幅がどうしても解決できないという場合は解決方法を何かしら考えてみたいと思います。

Hidekichi様

ご丁寧な説明ありがとうございます。
非常に勉強になります。

仰られている通りにどの画面でも気持よく見せれたらとは思うのですが
様々な端末があるので何かしらの折り合いはつけないといけないとは考えております。

個人的には、
タブレットでの画面の際は、横スクロールが発生しても良いと考えております。

そのため、PCとPCと以外という感じです。

しかし、PCにてブラウザのサイズを小さく（900pix程度）した際に
タブレットの画面でtoggleを表示したくない考えております。
その場合でもPCの解像度大きい版で表示したいです。

ご提案頂いた
＞カスタマイザーの「レイアウト(全体・リスト)」で「タブレットはモバイル表示 」のチェックを外せば良い感じになるかも知れません。

を試してみたのですが、toggleが出てしまい思っているようにはなりませんでした。
申し訳ありません。

右上のハンバーガーメニューは1110pxで表示非表示となっています。
なので、これの表示非表示は、メディアクエリで制御できます。
グローバルメニューも同様です。

ということで、いわゆる1110pxよりも幅が狭くなるとタブレットサイズになると思われるので、responsive-pc.cssをバックアップしておいてから、中に書いてある1110pxを750pxとか任意の変えたいサイズに変更すればその画面サイズの時にタブレットの表示になるかと思います。

子テーマで非表示になる要素は表示にしたり等をすることでも可能ですが、メニューあたりがとても面倒なので、必ず元に戻せるようにバックアップをとってから、responsive-pc.cssを改変するのが速いかと思います。
もちろん親テーマのスタイルの変更になるので、アップデートのたびに変更を続けなければなりません。

変更されたresponsive-pc.cssを子テーマに移しても良いかと思いますが、移したことを忘れていたりすると、これもアップデート時に思った通りにならないなどというトラブルになる場合があるので気をつけて下さい。

別のトピックでも幅の狭いスタイルを言われていたのがあったので、サンプルを作りました。

サンプル:

ただし、言われているモバイルメニュー、グローバルメニューについては触れていませんので、ひとまず#mainと#sidebarを横並びにするというのと、750pxでタブレット表示にすると言う感じです。

あ、閉じタグ忘れてた。

サンプルのアップデートをしました。

Hidekichi様

サンプルのイメージが想像していたものとなります、ありがとうございます。

しかし、親テーマの方を見たのですがresponsive-pc.cssがございませんでした。
あるのは、Simplicity2.0.3: responsive.cssでした。

これは、2.0系だから無いのでしょうか？

responsive-pc.cssはcssフォルダの中です。

もしこのサンプルで問題ないのであれば、responsive-pc.cssを直接いじらずともできます。まぁイジっても同じようなことなんですけども。

サンプルでは、親テーマstyle.cssとresponsive-pc.cssを読み込んであります。なので、css欄に書かれているのはscssなんですけれども、子テーマstyle.cssに書いたのと同じことになっているかと思います。
codepenではscssを実行時にcssに直して実行しているのでscssがそのまんま動作しますが、基本的にはscssはcssに変換してから使います。

css欄の右側にview conpiledボタンがありますが、これを押すとcssに変換されます。
変換されたcssを子テーマstyle.cssにコピペすればまぁおそらくサンプルと同じ動作になるのではなかろうかと思います。htmlとjsは必要ありません(ないと動作しない部分があったので同じ動作になるように追記しただけです)。

html部分については、トップリスト・アーカイブリストなどはまんま問題ないかと思いますが、記事ページがどのように表示されるかは想定してませんし、フッターの中のウィジェット等も考慮してないので、そこらは任意変更していって下さい。

部分的に問題がある場合は、適用したcssが反映されているサイトのアドレスを公開してもらえると、何を直せばよいのかをさっくり答えられると思います。

また子テーマstyle.cssにコピペする際には、コピペする部分に

/* 幅修正 20160121 */

などとコメントを入れて、いつ何をするために導入したスタイルかを書いておくと良いかと思います。

× conpiled
◯ compiled

Hidekichi様

ありがとうございます。
無事、思い通りのレイアウトになりました。