• MENU●●●●
  • サイドメニューを押しやらない固定するレスポンシブウェブレイアウト


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


    サイドメニューを押しやらない サイズ可変表示指定

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

     

    CSS指定を加えれば

     

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

     

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

     

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

     

    スマートフォンでの縦横

     

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

     

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

     

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

     

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

     

     

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

     

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

     

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

     

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

     

     

     

    ここで しかし?です

     

     

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

     

     

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

     

    横画面でも 何とも?

     

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

     

    スポンサーリンク

     

     

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

     

     

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

     

     

    ここで一言
    ipadサイズの縦画面でのみ とするなら メディアクエリ指定を
    670PXに指定すれば ipadでは全てパソコン画面になるのでは?
    わざわざ ipadサイズの縦画面のみ指定せずとも
    と 判断される方もおられますね

     

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

     

     

    表現は 2種類ございます

     

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

     

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

     

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

     

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

     

     

    今回はデフォルト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%; を指定しています

     

    100ではありませんね

     

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

     

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

     

     

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

     

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

     

     


     

    ipadの標準指定768PXでのみ反映させる

     

    ipadの標準指定768PXでのみ反映させる場合は
    縦画面のみということ

     

    二つの作業があります

     

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

     

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

     

    @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 シリウスレスポンシブデザインテンプレート公開
    シリウスカスタマイズ

    サイドメニューを押しやらない固定するレスポンシブウェブレイアウト関連解説
    サイトをレスポンシブウェブ化カスタマイズする今事情
    SIRIUS シリウスサイトをレスポンシブウェブ化としてカスタマイズする事は今や避けることは出来ない今事情があります..その訳は
    レスポンシブウェブデザイン設定事情を理解しよう
    シリウスへレスポンシブウェブデザインを設定するカスタマイズは 特有の構造でもあり 充分にCSSを理解する必要がございます 当サイトのレスポンシブウェブ事情をご確認下さい
    レスポンシブウェブデザイン変更前の説明
    SIRIUS シリウスサイトをレスポンシブデザインへ変更前のご注意ごとです デフォルトテンプレートカスタマイズをそのまま変更すると画面縮小の際 障害になるものがありますのでご説明します
    レスポンシブウェブデザインカスタマイズのレイアウト変更値
    シリウスへレスポンシブウェブデザインを導入後 リキッドレイアウト変更値は どの位置でどのように変化するか また レイアウトを複合化する2重構造をcss指定値カスタマイズを含めて複数解説します
    ヘッダー画像をレスポンシブウェブ構造で作動させる方法
    シリウスへレスポンシブウェブデザインを追加構築してもヘッダー画像だけがレスポンシブ化作動不能という場合は こちらのサイト解説を参考にしてください 取り合えずは伸縮致します
    ヘッダー画像をレスポンシブウェブでは切り替え表示する方法
    シリウスのヘッダー画像をレスポンシブウェブサイト構造追加後 スマートフォンで閲覧の際 別画像を表示する手順を」ご案内いたしております
    デフォルト一カラムレスポンシブウェブデザイン設定
    シリウスデフォルト一カラムテンプレートへレスポンシブウェブデザイン構築を追加する事は 2カラム同様簡単に設定ができます
    2カラムテンプレート レスポンシブデザイン設定方法
    SIRIUS シリウス2テンプレートへサイト内構成が 伸縮化変する全てのデバイスに対応可能なレスポンシブウェブデザインを設定追加するカスタマイズ方法のご案内です 作業は2分で終了
    3カラムテンプレート レスポンシブウェブデザイン追加方法
    SIRIUS シリウス3カラムテンプレートへレスポンシブウェブデザイン設定を追加するカスタマイズ手順をご案内しております... 検証済み 面倒はありませんよ
    2カラムのトップとカテゴリー以下のレイアウトを変えたレスポンシブ
    SIRIUS シリウスサイト2カラムをトップページとカテゴリー以下でレイアウトサイズを異なるスタイルで表現する2段階表示のレスポンシブデザインのカスタマイズの解説です
    トップページのみをレイアウト替えした際のカスタマイズ色々
    シリウスのトップページのみをレイアウト替えした際のサイドメニューは 構成次第でブログや大手サイトみたく色々なカスタマイズが表現出来ます
    レスポンシブサイトの見出しメニューを調整するカスタマイズ
    シリウスのレスポンシブウェブデザインサイトでは 機能を確認すると稼働後 見出しメニューにつなぎ目が見られますが 画像フォルダを編集すれば解消することが出来ます
    レスポンシブウェブデザイン公開ではiPhoneサイト設定も必要
    シリウスをレスポンシブウェブデザインとして公開するに至り iPhoneサイト設定も必要ということが判明しましたのでお知らせいたします
    レスポンシブウェブサイトにPC SP画面切り替えスイッチは不要
    SIRIUS シリウスレスポンシブウェブサイトにPC SP画面切り替えスイッチは必要か?ですが 今時代のスマートフォンではフィンガータッチで適正サイズに調整できるため不要と思われます
    レスポンシブウェブサイトへアドセンスを表示する際の注意ごと
    シリウスサイトをレスポンシブウェブデザインへと機能カスタマイズを追加した際 googleアドセンスをサイドのメニュー位置に置いたままではアドセンスのポリシーガイドラインに違反してしまうのです
    レスポンシブ構造ではサイドバーのアドセンス配置は処理が必要
    シリウスへのレスポンシブ構造追加ではサイドバーのアドセンス配置は スマホサイズでは広告が巻末に押しやられポリシー違反となります 対処法は指定処理が必要...詳細はサイトで
    レスポンシブウェブデザイン構造では画像の数値指定を必ずしましょう
    シリウスへレスポンシブウェブデザイン構造を設定したなら掲載する画像の事情により正常に表示されない場合があります 事情解説対処はこちらで.....
    パソコン スマートフォン画面でどちらも記事列を適合表示する指定
    シリウスレスポンシブ構造の記事列はパソコンと横サイズが異なるためスマートサイズだと自動で折り返されてしまいますが どちらも同様の記事列で表示することもできますが?  詳細はこちらで...
    iPhone ipadでサイト背景を固定化する仕様設定
    シリウスサイトの背景を固定化している場合でレスポンシブ化された際 iPhone ipadではサイト背景がスクロールしてしまう障害が発生します 対処法はサイトで......
    レスポンシブウェブデザイン構造でのフォントサイズ指定
    シリウスレスポンシブウェブデザイン構造でのフォントサイズは シリウス機能で16pxを指定していた場合 iPhoneサイトでは自動で縮小されてしまいます 見やすくする対応は?
    レスポンシブウェブデザインに適合する画像サイズ
    シリウスレスポンシブウェブデザインではスマートフォン パソコンの各画面では 掲載画像がどのように変化するのか?各端末に適合するサイズは?いろんな解釈がありますね
    大きな縦サイズヘッダー画像はレスポンシブサイトでは読み込みが遅い
    シリウスレスポンシブサイトでは大きな縦画像サイズのヘッダー画像を設置している場合 スマートフォンでは出現スピードの読み込みが遅くなります
    端末により記事コンテンツを切り替え表示する
    シリウスサイトをスマートフォンサイトでは記事列を横幅内に収めて または多少のコンテンツを替えて パソコンサイトと異なるコンテンツに切り替えて表示するカスタマイズ方法の詳細
    スマートフォン PCコンテンツ切り替え時のシリウス機能操作
    SIRIUS シリウススマホ PCデバイスでの切り替えコンテンツについて 初期指定の反映スタイル 付け加えたカスタマイズ説明による反映確認の詳細です
    スマートフォン パソコンサイトで画像を切り替え表示指定する
    当サイトのシリウスレスポンシブウェブデザイン構造ではスマートフォン パソコンサイト画面で画像の表示非表示の切り替え または異なる画像を表示することが指定出来ます
    スマートフォンサイトではスライダー画像は必要か?
    SIRIUS シリウスパソコンサイトでは綺麗に表示されるスライダー画像ですがスマートフォン閲覧サイトでは表示が必要ののでしょうか?
    トップページ全体をワイドヘッダー画像で表示したい?の勘違い
    SIRIUS シリウステンプレートへトップページ全体をワイドヘッダー画像で表示したい?といわれる方がおりますが ウェブ初期時の勘違い?ではないでしょうか とりあえずの講釈はこちらで....
    レスポンシブウェブ構造でのワイドPC画面対応背景画像設定方法
    シリウスのレスポンシブサイトに編集された背景画像を配置する際は ワイドサイズのウルトラPC画面でも 自動拡張されるようclass指定で設定を追加します
    スマートフォンでは、固定のグローバルは出現させない
    SIRIUS シリウスサイトでグローバルナビゲーションのスクロール固定化を指定している場合、スマホ閲覧の際、邪魔になるので出現しないよう指示しましょう
    iphone設定からレスポンシブデザインへ移行する際の注意事
    SIRIUS シリウスのiphone設定からレスポンシブデザインへ移行する際は、指定の解除およびサーバーファイルのiphone削除が必要です
    ヘッダー画像のレスポンシブウェブデザイン構造、追加記載方法
    SIRIUS シリウスレスポンシブ導入テンプレートでは、ヘッダー画像を縮小させる、またはスマートフォンサイトでは小さな画像に切り替えるとかの考え方も合わせ含めた対処方法

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト