デフォルトのレスポンシブ構造では　スマートフォンサイズ
もしくはipadサイズで閲覧の際は　メディアクエリの指定値に当てはまれば
サイドのメニューが後方へ押しやられてしまいますが

 

ＣＳＳ指定を加えれば

 

その位置に固定することが出来ます

 

サイトのサイドメニュー動かさないということですね

 

そのレイアウトは　大手のサイトなどでは使われる手法で

 

スマートフォンでの縦横

 

ipadの縦横画面で　確認してみると

 

どちらでも　大きくレイアウトが変わらないのですが

 

見やすいと！なるのですね

 

ネット上ではリキッドレイアウトと言われているようですが
レスポンシブウェブとなんら変わらんようです？

 

 

また　パソコン画面では当然パソコン用画面が表示されますね

 

ですが　レスポンシブ構造を加えている場合　

 

レイアウトはほぼ同じようなものですが

 

縦横ともぴたりと収まるのです

 

 

 

ここで　しかし？です

 

 

スマートフォンでサイドメニューを横位置に置いたレイアウトで
画面を見ても　見やすいですか？

 

 

スマートフォンでの縦画面で　サイドメニューがある場合は見ずらい

 

横画面でも　何とも？

 

それでもよいという方は　手順は含めておりますので以下ご確認ください

 

スポンサーリンク

 

 

スマートフォンサイズでは　通常レスポンシブで良い方は
以下に詳細を含めております

 

 

ipadサイズの縦画面のみ　通常レスポンシブではスペースが
空き過ぎるので反映させる
それ以上の画面ではパソコンサイズ

 

 

ここで一言
ipadサイズの縦画面でのみ　とするなら　メディアクエリ指定を
６７０ＰＸに指定すれば　ｉｐａｄでは全てパソコン画面になるのでは？
わざわざ　ipadサイズの縦画面のみ指定せずとも
と　判断される方もおられますね

 

ですが　不指定ではパソコン画面ですが　指定をすれば
レスポンシブ化されているので　多少ですが見やすいです
表現が難しいんですが　導入確認は即座にご確認できますので
自己判断としてください

 

 

表現は　２種類ございます

 

導入しましたらシリウスプレビューでご確認いただけますが

 

記事列コンテンツレイアウトに従い縮小
サイドメニューも同一で横幅縮小する

 

もう一つは　サイドメニューの横幅はそのまま
記事列のみ縮小ですが　

 

サイドメニューを縮小しないため　ある程度狭まると
記事が見にくくなり　さらに下方へ押しやられます

 

 

今回はデフォルト2カラム　サイドメニューは右位置で進めます

 

---

 

以下のレスポンシブコードは当サイト関連
シリウス2カラムテンプレート　レスポンシブデザイン設定方法
で　公開されているデフォルトです

 

 

変更箇所は　コードの以下に記載

 

@media(max-width:698px){

 

#container{
width: 100%;
}

 

#main {
width:100%;
padding:1% 1%;
}

 

#main {
float: left;
width: 100%;
}

 

#contents {
padding-right: 10px;
padding-left: 10px;
}

 

 

img{
max-width: 100%;
height: 100%;
width: auto;
　　display:block;
}

 

h3{
max-width: 95%;
height: 100%;
width: auto;
}

 

#header {
height: <% headerHeight %>;
background-image: url(img/header.jpg);
overflow:hidden;
background-repeat: no-repeat;
background-position: left top;
width:100%;
border-bottom:solid 1px #EBEBEB;

 

}

 

#header h2 ,#header .title {
width: 95%;
font-size: 26px;
line-height: 36px;
position: relative;
left: 2%;
top: 60px;
}

 

#topmenu {
background-repeat: repeat-x;
height: 48px;
line-height: 42px;
width: 100%;
position: absolute;
margin: 0px;
padding: 0px;
background-image: url(img/topmenu.jpg);
background-position: left top;
font-size: 13px;
}

 

#menu {
float: left;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
}

 

#searchbox {
position: absolute;
top: 33px;
width: 100%;
padding-right: 5px;
padding-left: 5px;
text-align: right;
line-height: 20px;
height: 20px;
font-size:12px;
padding-top: 4px;
}
}

 

 

改行

 

記事列　サイドメニュー同時縮小で指定する際の改行箇所は
以下の3か所です　

 

 

 

#contents {
padding-right: 0px;
padding-left:0 px;
overflow: hidden;　追加行
}

 

10px;を0px;にします
でないとスペース空きすぎ

 

 

 

 

#main {
float:left;
width: 70%;
}

 

width: 70%;　記事の横領域を指定

 

 

#menu {
width: 27%;
float: right;
position: relative;　追加行
}

 

メニューの横サイズ領域を指定

 

 

 

 

main でwidth: 70%;
menu でwidth: 27%; を指定しています

 

１００ではありませんね

 

なぜかというと　メニューのサイド　記事列のサイドには

 

padding　空きスペース指定があるのでmenu でwidth: 27%

 

 

領域指定できつすぎる指定をすると　メニューは枠内で居場所がなくなり
右横の下へ押しやられます
30%; にすると押しやられます

 

3つの改行でスマートフォン縦横画面ではレスポンシブ画面表示となります

 

 

---

 

ｉｐａｄの標準指定７６８ＰＸでのみ反映させる

 

ｉｐａｄの標準指定７６８ＰＸでのみ反映させる場合は
縦画面のみということ

 

二つの作業があります

 

一つ目
スマートフォン縦横レスポンシブ表示項目の

 

メディアクエリ指定は　オリジナルを使用して上記掲載の改行前のもの

 

@media(max-width:698px){
698pxのみ670に書き換えます

 

省略
}
}

 

二つ目

 

次に
上記メディアクエリの下に　再度メディアクエリを指定します
min-width:671pxからmax-width:768pxまでの間で反映する指定

 

@media screen and (min-width: 671px) and (max-width: 768px) {
デフォルトレスポンシブコードを置いて　上記例に従い
書き換えてください

 

省略
}
}

 

 

以上にすれば　スマートフォンでは縦横とも初期のレスポンシブ

 

ipadで見れば縦画面は右にサイドメニューありのレスポンシブ

 

横画面ではパソコン画面となります

 

---

 

参考

 

スマートフォン縦画面ではサイドメニューを表示させない
下方へ押しやる

 

横画面ではサイドメニューを表示するという場合は

 

範囲を指定したメディアクエリを

 

@media screen and (min-width: 300px) and (max-width: 697px) {

 

ほどで　指定すれば可能です

 

 

ただし　iPhone ipadとも　端末により横サイズは異なり

 

ユーザーの環境により反映は違いがみられます

 

 

---

 

 

サイドメニューの横幅を縮小しない　固定サイズ指定

 

サイドメニューの横幅を縮小しない場合は

 

以下に書き換えてご確認ください

 

#main {
float:left;
width: 50%;か　または60%;どちらかを指定
}

 

#menu {
width: 180px;
float: right;
position: relative;
}

 

 

サイズを%ではなく
width: 180px;で指定

 

ただし　上記スタイルの場合　メディアクエリの指定値内で
media(max-width:698px){

 

その範囲以下で　配置場所がきつくなると
サイドメニューは　下方へ押し出されます

 

50%　50%の画面比率までは確認できておりますが
それ以下ではレイアウト障害になります

 

この手法はサイト幅が1000以上のサイトで　固定メニューは
ipad768PXまでにすべ気かなと理解してますが？

 

ipad768PX以下ですと　メニューがお邪魔みたい！

 

 

また　関連した作動状況が発見されれば追記いたします

 

 

サイドメニューを押しやらない固定するレスポンシブウェブレイアウト
SIRIUS　シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ