ウィンドウサイズを小さくするとそれに合わせて配置してある画像やメニューバーやコンテンツ部分が動くようにしたいです。
ウィンドウを縦方向に小さくしても何も動かず横方向へ小さくすると一定の所まで移動した後、画面外へ消えるようにしたいです。
(ソフトバンクのようなホームページみたいな感じです。)
Wordpressで作っているのですが、こういった動作をさせるためにはCSSをいじればいいのでしょうか?
Stinger3というテーマを使って画像を配置して試してみたのですが、ウィンドウサイズを小さくした時にその画像だけ他より速く左まで行ってしまったり、ヘッダー画像に覆いかぶさったりしてしまいます。
どういったコードを書けば出来るのでしょうか?教えてください。
No.3
- 回答日時:
ブラウザの幅でスタイルを変更するのでしたら、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.2ベストアンサー
- 回答日時:
ソフトバンクのどのサイトの事を言ってるのかわかりませんが、
「レスポンシブWebデザイン」と呼ばれる手法の事だと思います。
上記名称で検索すれば作り方はたくさん出てきますよ。
大まかにいうと、全体のcssに対して
幅ごとに指定したcssを上書きしていくようなやり方ですね。
アニメーションが欲しいならjsで。
jQueryなんかでいくつかライブラリがあると思います。
こちらも検索してみてください。
Wordpressなら、レスポンシブに対応したテーマが沢山公開されていますので
それを落として使うのもいいかと思います。
ただレスポンシブで作られたサイトは、ソース一つで様々な端末に対応できるというメリットはありますが、
スマホで見た場合などに表示されていないパーツは読み込んだ後消しているだけですので
PC用のソースコードや画像、js等もすべて読み込まれています。
スマホ専用サイトよりはかなり容量的に重くなるというデメリットもありますので注意してください。
あと、設計の時点から注意する必要があるので慣れてないと結構難しいです。
No.1
- 回答日時:
アニメーションしないで良ければcssだけです。
http://dev.classmethod.jp/smartphone/device-medi …
アニメーションさせるならjavascriptが必要になります。
ウィンドウサイズが変わったら幅を調査して、以前と違うレイアウトにしなければならないか判断し
そうであればアニメーションをさせる。といったプログラムを作らないといけまへん。
※もしかしたら有り物のオープンソースのものを流用できるかもしれませんが。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(ソフトウェア) 画像の拡大率を固定したまま次の画像を表示出来るビューアを探しています 2 2022/05/13 17:19
- ホームページ作成・プログラミング グリッドレイアウトHTMLとCSS 1 2023/02/22 02:36
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- その他(IT・Webサービス) ロリポップのレンタルサーバーを借りてます。(一般的な安いプラン) 元々はホームページでも作ろうと思っ 1 2023/05/24 19:54
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- Illustrator(イラストレーター) WIN10 PAINT の手のひらツールが出ないときはどうしたらよいでしょうか 2 2022/11/06 10:06
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- Windows 8 Route Generator の使い方 1 2023/05/03 00:36
- その他(ブログ) シーサーブログのタイトル文字位置とブログ説明文字位置の変更方法 2 2022/09/22 20:55
- その他(ソフトウェア) IrfanView で画像のスクロール?できますか 1 2022/08/31 13:57
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
cssファイルの名称付け
-
cssファイルを階層の異なるHTML...
-
サイトを作る時のcssファイルは...
-
範囲指定印刷での位置(css)
-
スタイルシート(CSSスタイル)...
-
拡張子 .cssに続く暗号みたいな...
-
ディレクトリ構成【「common」...
-
リンクについて
-
jspにcssを反映させるには
-
CSSファイルの分け方皆様はどの...
-
ブラウザでプレビューでCSSが反...
-
デバイス毎、画面の向き毎にデ...
-
HTMLの CSSのファイルというの...
-
画面キャプチャー 禁止 css
-
cssでiPhone SEで文字が小さす...
-
ドキュメントルートより上の階...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
入力規則のリストの文字の大き...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
cssファイルの名称付け
-
jspにcssを反映させるには
-
ディレクトリ構成【「common」...
-
サイトを作る時のcssファイルは...
-
HTMLの CSSのファイルというの...
-
cssで、ボタンのテキスト部分を...
-
複数のhtmlで同じcssファイルを...
-
cssファイルを階層の異なるHTML...
-
cssが反映されません
-
一部のページにデフォルトCSSを...
-
WindowsとMacで違うCSSを読み込...
-
エクセルファイルにCSSを読み込...
-
定数の定義とかはできますか?
-
ブラウザでプレビューでCSSが反...
-
範囲指定印刷での位置(css)
-
ドキュメントルートより上の階...
-
スタイルシート(CSSスタイル)...
-
Dreamweaver のテンプレートで...
-
【CSS】スタイルやクラスがどの...
-
cssでiPhone SEで文字が小さす...
おすすめ情報