
Dreamweaverを使っています。
レスポンシブルか、可変グリッドを使ってスマホサイトを作りたいのですが、
スマホとPCで初期状態を少し変えたいので 方法はないでしょうか
レスポンシブルではCSSは切り替えできても、HTMLは自動で切り替わらないので悩んでいます。
1.URLをスマホで別にせず同一にする
2.JQuery等を使って アコーデオン メニューを作る
クリックしたら下にビョ~ンと広がるメニューです。
3.PCは初期状態でアコーデオンメニューは全部開いた状態
スマホはメニューは閉じた状態で ファーストビューを始めたい
JQueryを使わなくても良いのですが、メニューを折りたたみ、スマホとで状態を自動で変えたいのが希望です。
良い方法がありましたらお願いします。
No.2ベストアンサー
- 回答日時:
MediaQueryのスクリーン幅はjavascriptで簡単に取得できますから、容易にコントロールできますよ。
http://qiita.com/blogger323/items/ba66326badc172 …
仮にクラス名を付加しておき、jQueryで別の位置に定義したDOMの内容をゴッソリ移すとかすればスッキリすると思います。
ありがとうございます。
jQueryでHTML、CSSの書き換えなどもできるようですね。
これがやりたかったことです。
難しそうですが調べてみます。
No.1
- 回答日時:
HTMLは一切変更しないでプレゼンテーションはスタイルシートですよ。
ちょっと長い引用ですがウェブサイトを作るときは絶対に知っておかなければならない重要なこと【引用】____________ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。
・・・【中略】・・・
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
【引用】____________ここから
2.4.1 構造とプレゼンテーションの分離
HTMLは、常に構造的マーク付けを規定するところのSGMLをルーツに持っている。HTMLの性質上、プレゼンテーションに関する要素や属性は、次々と他の機構、とりわけスタイルシートに置換えられていく。 また、文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
>レスポンシブルか、可変グリッドを使ってスマホサイトを作りたいのですが、
何れかではありません。
リキッドでデザインして、必要ならレスポンシブでデザインを変更するのですよ。
1) リキッドが適用され、
2) ウィンドウ幅が640px(例)以下になるとデザインが変わる。
スタイルシートを別途上書きする。
>3.PCは初期状態でアコーデオンメニューは全部開いた状態
スマホはメニューは閉じた状態で ファーストビューを始めたい
単純に、mediaqueryでmax-width:640px にて、dispaly:blockを一行追記するだけですけど・・・
ありがとうございます。
>絶対に知っておかなければならない重要なこと
CSSとHTMLは分離して、管理すべきということなのか・・
重要な点がどこかわかりかねるのですが、参考にさせていただきます。
>単純に、mediaqueryでmax-width:640px にて、dispaly:blockを一行追記するだけですけど・・・
Jqueryのアコーデオンを作って試してみました。
css の dispaly:block を変更することで開くことができました。
もう少し細かい処理を考えるときには
JQueryでスマホページだけHTMLなどを一部を変更することも、可能になりそうかと思いました。
そういった方法もできそうかまた検討してみます
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ホームページのサイトでhtm...
-
htmlの文字が縦書きになる
-
HTML/CSSを使って写真のような...
-
レスポンシブで困っています・・
-
HTMLでクロス抽出したい
-
EJSを仕事でなんとなくで使って...
-
スライダーの枠に動画を収める...
-
iPhoneで HTMLファイルを閲覧
-
Dreamweverは今も主流なんです...
-
css初心者 フレックスボックス...
-
HTML に © は、© を使わず...
-
ホームページの制作について教...
-
GoogleSearchControlにホームペ...
-
手元のHTMLフォームの検索キー...
-
HTML&CSS メディアクエリについ...
-
<!DOCTYPE html>あってますか?...
-
メモ帳の段落の揃え方
-
角丸画像の背景色を透明にした...
-
画像が分割されて切り替わる、...
-
動画と画像&タイトル2列を横並...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ホームページを作っているので...
-
ホームページ、iPadやiPhoneで...
-
携帯電話用のサイトを作りたい
-
シミュレーターとエミュレータ...
-
端末の違いによってページを切...
-
平均的なウィンドウサイズとは?
-
HTML5+CSS3導入タイミングは?
-
コピペでbitmapを配置してくれ...
-
ホームページを作成し、インタ...
-
スマートフォン用のサイト作成...
-
デザイナーの方にWEBデザインを...
-
WEBサイトの画面サイズ表示につ...
-
携帯電話用HPの作成方法
-
スマートフォン制作の画像サイ...
-
HTMLでスクロールバーを禁止に...
-
バリアフリーなサイトで、フレ...
-
XML → HTML の確認方法
-
ホームページ作成について!
-
IE8は切り捨てても構わないのか
-
レスポンシブがよくわからない
おすすめ情報