menu
menu

キーワード検索

 

前月(6月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 5 ↑) 【jQuery】jQueryでドロップダウンメニュー
  3. ( 2 ↓) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 8 ↑) 【CSS】レスポンシブデザインのブレークポイントは⁉
  5. ( 3 ↓) 【Mac】Macのユーザー名とアカウント名を変更する
  6. ( 6 - ) 【CSS】スマホサイト向け横にスクロールするナビゲーション
  7. ( 7 - ) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 9 ↑) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  9. ( - ↑) 【PHP】PHPでシンプルなメールフォーム
  10. (10 - ) 【HTML5】スマホサイトの作成・基本編
このエントリーをはてなブックマークに追加

【レイアウト決定版】レスポンシブデザインにも表示切り替えボタンを付ける⁉️

【レイアウト決定版】レスポンシブデザインにも表示切り替えボタンを付ける⁉️

こんにちは(・∀・)

前回投稿した【決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️でご紹介しましたレスポンシブデザインレイアウトに、PCとモバイルサイトを行き来できるボタンを付けてみました。

レスポンシブデザインで表示できれば十分だとは思いますが...

「PCとモバイルの表示を切り替えられるボタンも付けたい...」なんてオーダーをいただいた場合、このJavaScriptで対応できます。

確かにスマホで見てるときに「このページPCサイトで見たいのになぁ」ってときってあるかも...

ブレークポイント

CSSのブレークポイントは前回と同じ10個です。

PCとモバイルの切り替えは835pxにしました。

この辺はお好みで調整してください。

 

それでは最初にサンプルをご覧ください。

Result

サンプルデモはこちら
スマホでのご確認はこちらをどうぞ
QRコード

ファイル構成

  1. index.html
  2. style.css
  3. style-sp.css
  4. style-pc.css
  5. switch-css.js

1. index.html
2. style.css...基本的な部分と画面サイズ320pxまでの設定
3. style-sp.css...835px以下の設定
3. style-pc.css...835px以上の設定
3. switch-css.js...画面サイズで切り替えるJavaScript

 

それではコードを見ていきます。

HTML内のボタンを設置したい場所に次のコードを記述。

HTML

<div id="switchbtn"></div>

 

CSSは基本デザインと320px以下のstyle.css、モバイル用のstyle-sp.cssとPC用のstyle-pc.cssになります。

前回投稿と内容は同じですが、3つにファイルを分けました。

CSS

/*--style.css-----------------------------------------------------*/
基本デザインと320px以下のレイアウト用

ここは省略

/*--style-sp.css--------------------------------------------------*/
@charset "utf-8";
@media (min-width: 321px) {
  .sample-demo h3:after {
  content: "321px〜360px";
  }
/* ** */}
@media (min-width: 361px) {
  .sample-demo h3:after {
  content: "361px〜375px";
  }
/* ** */}
@media (min-width: 376px) {
  .sample-demo h3:after {
  content: "376px〜412px";
  }
/* ** */}
@media (min-width: 413px) {
  .sample-demo h3:after {
  content: "413px〜414px";
  }
/* ** */}
@media (min-width: 415px) {
  .sample-demo h3:after {
  content: "415px〜834px";
  }
/* ** */}
/*--style-pc.css--------------------------------------------------*/
@charset "utf-8";
@media (min-width: 835px) {
  .sample-demo h3:after {
  content: "835px〜959px";
  }
/* ** */}
@media (min-width: 960px) {
  .sample-demo h3:after {
  content: "960px〜1023px";
  }
/* ** */}
@media (min-width: 1024px) {
  .sample-demo h3:after {
  background: #9fb7d4;
  content: "1024px〜1059px";
  }
/* ** */}
@media (min-width: 1060px) {
  .sample-demo h3:after {
  background: #e2ad22;
  content: "1060px〜1199px";
  }
/* ** */}
@media (min-width: 1200px) {
  .sample-demo h3:after {
  content: "1200px〜";
  }
/* ** */}

 

JavaScriptの構成はクッキー、画面サイズで振り分ける本体、切り替えボタンの三つです。

JavaScript

/*--cookie--------------------------------------------------------*/
function  setCookie(value) {
document.cookie = 'switch'+'='+value+'; expires='+'date.toGMTString(); path=/';
window.location.reload(true);
}
var cookie = document.cookie+';';
var cookies = cookie.indexOf('switch');
if(cookies != -1) {
var elm = cookie.indexOf('=',cookies);
var items = cookie.indexOf(';',elm);
var sv = cookie.substring(elm+1, items);
} else {
sv = 0;
}
/*--switch-css---------------------------------------------------*/
function switchCSS(){
var t = document.getElementsByTagName('body')[0];
var dir ="";//パス
var sp = '<link rel="stylesheet" href="'+dir+'style-sp.css">';
var pc = '<link rel="stylesheet" href="'+dir+'style-pc.css">';
var swidth = window.innerWidth;
var cwidth = 835;
if(sv == ""){//null
  if(swidth <= cwidth){//null sp
t.insertAdjacentHTML('beforeend', sp);
  } else {//null pc
t.insertAdjacentHTML('beforeend', pc);
  }
} else if(sv == 0) {//pc
t.insertAdjacentHTML('beforeend', pc);
} else if(sv == 1) {//sp
t.insertAdjacentHTML('beforeend', sp);
}
}
window.addEventListener('DOMContentLoaded',switchCSS,false);
window.addEventListener('resize',switchCSS,false);
/*--switch-btn---------------------------------------------------*/
function switchBtn(){
var t = document.getElementById('switchbtn');
var spBtn = 'PC | <a href="javascript:void(0)" id="spBtn">モバイル</a>';
var pcBtn = '<a href="javascript:void(0)" id="pcBtn">PC</a> | モバイル';
var swidth = window.innerWidth;
var cwidth = 835;
if(sv == ""){//null
  if(swidth <= cwidth){//null sp
t.innerHTML = pcBtn;
document.getElementById('pcBtn').addEventListener('click',function(){
setCookie(0)},false);
  } else {//null pc
t.innerHTML = spBtn;
document.getElementById('spBtn').addEventListener('click',function(){
setCookie(1)},false);
  }
} else if(sv == 0) {//pc
t.innerHTML = spBtn;
document.getElementById('spBtn').addEventListener('click',function(){
setCookie(1)},false);
} else if(sv == 1) {//sp
t.innerHTML = pcBtn;
document.getElementById('pcBtn').addEventListener('click',function(){
setCookie(0)},false);
}
}
window.addEventListener('DOMContentLoaded',switchBtn,false);
window.addEventListener('resize',switchBtn,false);

 

今回、画面サイズで切り替えるようにしましたが、ユーザーエージェントで切り替える方法に変えることも可能です。

にほんブログ村 IT技術ブログへ

レスポンシブデザインにプラスしてPCとモバイルを切り替えるボタンが付いていると使う側としては便利かもしれませんね。

関連リンク

【決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️
【CSS】レスポンシブデザインのブレークポイントは⁉️

  • CSS3 JavaScript ブレークポイント メディアクエリ レスポンシブデザイン
このエントリーをはてなブックマークに追加