Wordpress CSS ウィンドウサイズ

質問

ウィンドウサイズを小さくするとそれに合わせて配置してある画像やメニューバーやコンテンツ部分が動くようにしたいです。

ウィンドウを縦方向に小さくしても何も動かず横方向へ小さくすると一定の所まで移動した後、画面外へ消えるようにしたいです。

（ソフトバンクのようなホームページみたいな感じです。）

Wordpressで作っているのですが、こういった動作をさせるためにはＣＳＳをいじればいいのでしょうか？

Stinger3というテーマを使って画像を配置して試してみたのですが、ウィンドウサイズを小さくした時にその画像だけ他より速く左まで行ってしまったり、ヘッダー画像に覆いかぶさったりしてしまいます。

どういったコードを書けば出来るのでしょうか？教えてください。

回答No.2

tkmojo · ベストアンサー

ソフトバンクのどのサイトの事を言ってるのかわかりませんが、
「レスポンシブWebデザイン」と呼ばれる手法の事だと思います。
上記名称で検索すれば作り方はたくさん出てきますよ。

大まかにいうと、全体のcssに対して
幅ごとに指定したcssを上書きしていくようなやり方ですね。

アニメーションが欲しいならjsで。
jQueryなんかでいくつかライブラリがあると思います。
こちらも検索してみてください。

Wordpressなら、レスポンシブに対応したテーマが沢山公開されていますので
それを落として使うのもいいかと思います。

ただレスポンシブで作られたサイトは、ソース一つで様々な端末に対応できるというメリットはありますが、
スマホで見た場合などに表示されていないパーツは読み込んだ後消しているだけですので
PC用のソースコードや画像、js等もすべて読み込まれています。
スマホ専用サイトよりはかなり容量的に重くなるというデメリットもありますので注意してください。
あと、設計の時点から注意する必要があるので慣れてないと結構難しいです。

お礼

わかりました、ありがとうございますｍ(_ _ )ｍ

回答No.3

ORUKA1951

ブラウザの幅でスタイルを変更するのでしたら、CSS2.1のmedia別スタイルシートの拡張、CSS3のmediaqueryを使用します。javascriptのようにjavascriptの有効無効等に関係しませんから。
　従来
<link rel="stylesheet" type="text/css"> media="screen">
<link rel="stylesheet" type="text/css" media="print">
のようにされていたと思いますが、それを
<link rel="stylesheet" media="screen and (max-width: 480px)" href="mobile.css" >
とか追加する。【外部スタイルシートを使用する場合】

お礼

わかりました、ありがとうございますｍ(_ _ )ｍ

回答No.1

muuming2001

アニメーションしないで良ければcssだけです。

http://dev.classmethod.jp/smartphone/device-media-queries/

アニメーションさせるならjavascriptが必要になります。
ウィンドウサイズが変わったら幅を調査して、以前と違うレイアウトにしなければならないか判断し
そうであればアニメーションをさせる。といったプログラムを作らないといけまへん。
※もしかしたら有り物のオープンソースのものを流用できるかもしれませんが。

お礼

わかりました、ありがとうございますｍ(_ _ )ｍ