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で質問しましょう!
似たような質問が見つかりました
- 中古パソコン 中古PCを売る時、OS(Windows11)はどんな状態にするのが親切ですか? 4 2022/12/15 17:08
- Wi-Fi・無線LAN PC起動でスマホ連携が出来無くなる 2 2023/01/09 08:22
- LINE simフリー端末で前回もっていた端末でline引継ぎ 2 2022/10/07 10:11
- Y!mobile(ワイモバイル) かんたんスマホ2 かんたんスマホのSIMを入れても使えない 設定必要? 4 2023/08/18 16:42
- iCloud 音楽をituneで同期できません 1 2023/02/23 19:24
- デスクトップパソコン 消えたアプリ 6 2023/02/22 02:54
- Android(アンドロイド) Android民です。 容量が少なく、重いのが悩みです。 今のスマホを使い始めて1年と1ヶ月ほどです 3 2022/08/04 08:25
- Android(アンドロイド) どなたか教えてください。 Googleカレンダーのパソコンとスマホの同期についてです Android 3 2023/07/16 14:56
- 電子レンジ・オーブン・トースター 市販のメロンパンをオープンレンジで温めたいのですが、先にレンジでチンしてからトースターで焼いた方がい 2 2023/01/22 12:17
- アルバイト・パート バイトを変えるかどうか 2 2023/05/09 01:49
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ホームページ制作、SPサイトの...
-
ホームページ、iPadやiPhoneで...
-
Androidスマホで表示されるサイ...
-
趣味でhtmlを勉強するのに適し...
-
HTMLからフォルダを開きたい
-
Excelで、社外秘(閲覧のみ)と...
-
<a target="_top" href="***.ht...
-
iPadの標準ブラウザでローカルH...
-
Webサイトから、txtファイルを...
-
リンク先からリンク元の、同じ...
-
【HTML】1クリックで複数ファイ...
-
htmlの謎
-
form action="#"
-
kmf着うたフルのDL方法(W32SA...
-
pythonのエラーについての質問...
-
htmlの中にexcelが埋め込むには...
-
ページの途中にリンクするとそ...
-
textareaの一行の文字数制御
-
複数のindex.htmlを作ってもい...
-
リンク先に日本語フォルダがあ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ホームページ、iPadやiPhoneで...
-
リンクの下線は消すのが普通?
-
ホームページを作っているので...
-
ガラケーサイトの一般的な画面...
-
WEB会社に勤めている方に質...
-
スマホ横幅が720px だけ 横が...
-
画面は固定と可変のどちらがい...
-
デジタルフィルタの伝達関数
-
DOMとHTMLの本
-
PCサイトとは何ですか。
-
コーディング代行について
-
スマートフォン用のサイト作成...
-
Webサイトを作成する前のイメー...
-
Windowsホームページ作成MACで...
-
iphone/android WEB制作について
-
Safariで、ボタンが丸くなるの...
-
レスポンシブwebデザインでのIE...
-
平均的なウィンドウサイズとは?
-
厳しいご意見を下さい!
-
バリアフリーなサイトで、フレ...
おすすめ情報