「CSS」カテゴリーアーカイブ

レスポンシブのviewportをクリックで切り替える方法。viewportを動的に制御する

viewportをボタンのクリックで切り替える方法

レスポンシブデザインの簡単な説明は
レスポンシブ(スマホ用とPC用で自動的に変える方法)で実装するを参照の事。

レスポンシブデザインとは、簡単に言うとメディアの幅によって、CSSの挙動を制御すること。
 
今まではiPadだったらこのページ、iPhoneだったらこのページという風に、スマホサイト、タブレットサイト、PCサイトを別々に用意していた。
&nbsp
 
しかし、これではiPhoneでデカい画面のスマホが出てきたらどうするの?
小さいブラウザウィンドウで見ているPCはバカでかいPC用ページで表示、という問題には対応できない。

そこで、端末が何かにかかわらず、メディアの幅(ブラウザ・スマホ画面の幅)によって見え方を変えようというわけだ。

で、レスポンシブ(スマホ用とPC用で自動的に変える方法)で実装するの後半にも書いてある通り、メディアアンカーを使っていく。
でも、スマホでもPCサイトに切り替えたい!というニーズもある。

こういった場合には、レスポンシブサイトに対応した、PCサイト/スマホサイトの切り替えスイッチが欲しい。

 

レスポンシブに置いて、PC/スマホの切り替えとはつまり?

CSSの中に、「画面が600ピクセル以上の場合はこれ、600ピクセル以下の場合はこれ」と記述しているので、これを切り替えるためには、メディアの幅が変わったと思わせればいい。
 
用意するものは3つ。

jquery-1.5.min.js
switch.screen.js
jquery.cookie.js
 
こちらから右クリックで保存したり、ダウンロードすることもできるし、どこかから探してきてくれてもOK。
なお、jqueryは1.5以外でも結構動作する。
 
 

準備とアップロード

 
まず、switch.screen.jsの3行目
 

$(“head”).append(“<meta name=’viewport’ content=”
+($.cookie(“switchScreen”) == 1 ?
“‘width=951, initial-scale=1.0′” :
“‘width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0′”)
+” />”);

$(document).ready(function() {
$(“#btnPC, #btnSP”).click(function() {
$.cookie(“switchScreen”, $(this).attr(“id”) == “btnPC” ? 1 : 0);
location.reload();
return false;
});
});

 
“‘width=951, … の部分をメディアアンカーの幅に合わせる。
 
上記の例の場合、「メディア(スマホの画面)の幅を951pxとして考えてね」ということなので、仮に小さいスマホであっても、レスポンシブのPCサイトのスタイルシートが適用される。
 
 
そしてサーバーの適当な位置へアップロード。
 
下記、コード例では、jsフォルダへアップロードした場合の記述。
 

HTMLのソース

<head>…</head>の間に、下記コードをコピペ。
 

<head>

<script type=”text/javascript” src=”js/jquery-1.5.min.js”></script>
<script type=”text/javascript” src=”js/jquery.cookie.js”></script>
<script type=”text/javascript” src=”js/switch.screen.js”></script>

</head>

 
 
切り替えスイッチ(リンク)を設置したい場所に、下記コードをコピペ。
 

<p class=”switch”><a id=”btnPC” href=”#”>PCページへ</a><a id=”btnSP” href=”#”>スマホページへ</a></p>

 
以上。
 
 
使用例:

http://rakuichi-b.com/

パソコンのブラウザの画面幅を小さくしたり大きくしたりして確認できる。
なお、上記のサイト例では切り替えボタンはスマホでのみ有効となっている。

tableのthやtdをソースを変えずにCSSだけで縦並びにする方法 – レスポンシブデザイン編 –

HTMLのソースを全く変えずにtableの配置を縦並びにする方法

結論から言おう。実現可能だ。

一般にこの方法を実現したいならdivを使ってやる方がいいと言われている。その通りで、最初から作るならdivでやるべきだ。

でも、フォームのソースが元々あって、そこをどうしても変更できない場合や、CSSだけで対応する必要がある場合もあるだろう。
なので、今回はCSSだけで実現する方法を紹介。

miniiman

手軽なやつだと、position absoluteを使う方法と、 display blockを使う方法がある。

 

CSSに1つ記述を追加するだけ

 

table, tbody, tr, th, td {
display: block;
}

これだけ。
ちなみに、tfootやtheadを使っている場合は、それも含めてdisplay block してやるといい。

IE6,7,8まで含めて対応したい場合はtableのブロック要素化が効かないかもしれない。
そんな時には、
IE6,7,8,9だけCSSで違う記述を反映させる方法

この辺を参考に。

 

レスポンシブ(スマホ用とPC用で自動的に変える方法)で実装する

テーブルを縦並びにするだけなら先ほどの display blockだけで大丈夫だが、PCでは普通のテーブル、スマホでは縦並びにしたい場合の対応も考えよう。

table-normal

まず、レスポンシブデザインを考えるに辺り、メディアアンカーを覚えなければならない。

・PCで適用されるCSS

@media screen and (min-width:601px) { /*601px以上*/

この間にPC用のCSSを書く。

}

・スマホで適用されるCSS

@media screen and (max-width:600px) { /*600px以下*/

この間にスマホ用のCSSを書く。

}

という感じ。

「スマホ用」「PC用」と言っているが、本来の意味は、

「画面サイズが600以下の時はこのCSSだよ」
「画面サイズが601以上の時はこのCSSだよ」

という事だ。
数字は自分で勝手に変えてもいい。タブレットも分けたい場合などには、3つにしたりすることもできる。

@media screen and (min-width: 500px) and (max-width: 800px) {

画面サイズが500~800の間適用されるCSS。タブレット用とか?

}

でも、昨今のスマホの画面サイズからいくと、600pxで分けるのがおすすめ。

今回のスマホ時にだけテーブルを縦に並べたいなら、

@media screen and (max-width:600px) { /*600px以下(スマホ用)*/
table, tbody, tr, th, td {
display: block;
max-width: 98%; /*スマホ画面ほぼ一杯に広がる感じ*/
}
}

としてやれば、

table-sp

こうなる。PC版はそのまま。

ちなみに、 max-width:98%; とかは自由に変えてくれ。

overflow:hidden; なんかも使えるかもしれない。

メディアアンカーの外にテーブルの幅を指定している場合は、上記スマホ用CSSを追加しても効かない場合がある。その場合は

@media screen and (min-width:601px) { /*601px以上(PC用)*/
table {
width: 680px; /*PC版の横幅*/
}

という風に、PC用メディアアンカー内に移動すること。

IE6,7,8,9だけCSSで違う記述を反映させる方法

IEなんてなくなればいいのに…とは言うものの

CSSに以下の記述をすることで、適応させることがが可能になる。

これを通称ハックと呼ぶらしい。まあ言葉なんかどうでもいい。

 

IE6だけに適応

先頭に「_」をつけることでIE6だけに適用。

.sample {
_display: none;
}

 

IE7だけに適応

先頭に「*」をつけることでIE7だけに適用。

.sample {
*display: none;
}

 

IE8だけに適応

末尾に「\9」をつけることでIE8だけに適用。なんで9やのにIE8やねん…

.sample {
display: none\9;
}

 

IE9だけに適応

親要素として「:root」をつけて、
末尾に「\0/」をつけることでIE9だけに適用。

:root .sample {
display: none\0/;
}

 

使用例

例えば、IE6, 7だけで非表示にしたい場合。

.ie67none {
_display: none;
*display: none;
}

こんな感じで、IE6とIE7で非表示にするclassを作って、

<p class=”ie67none”>IE6とIE7ではこの文字は非表示</p>

としてやればいい。