- ベストアンサー
CSSデザインでのフレーム的な使い方
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
まずは、制作方法、HTML,CSSを軽く勉強し、 DWの操作方法も覚えた方が良いでしょう。 折角のDWの価値が無くなりますよ・・・ ----------------------- 初心者が勉強しないで、手っ取り早く作るには、 配布のテンプレートを使うか、 起動 → 新規作成 → 「詳細情報」をクリック ページタイプ： HTML レイアウト： 「２列を固定、右にサイドバー、（その他お好みで）」 ドキュメントタイプ： お好みで選択。 開くと、ページ内に説明が直接書いてあるので、 その説明箇所を見ながら、その文章自体を編集。 ----------------------- または、 以下のようなソースを「コード画面」で、変更・修正しながら埋めていく。 例えば、HTML4.01Transitionalなら（他でもOKですが） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <!-- title,meta,link等は省略しました。 --> <style type="text/css"><!-- body,h1,h2,ul,li{ margin:0; padding:0;} #wrapper{width:600px; margin:0 auto; background:#EEE;} #header,#footer{ height:60px; background:yellow;} #nav{ float:left; width:200px; height:400px; background:lime; list-style:none;} #main{ float:left; width:400px;} #footer{ clear:left;} --></style> </head> <body> <div id="wrapper"> <div id="header"><h1>ヘッダー</h1></div> <div id="main"><h2>メイン</h2><p>内容</p></div> <ul id="nav"><li><a>ナビ</a></li><li><a>リンク</a></li></ul> <div id="footer">フッター</div> </div> </body> </html> まずは、.htmlで保存して、ファイルをクリックしてローカルで確認・表示。 （トップは、index.html） リンクは、<a href="別名.html">別ページへ</a> （この辺は、サイト登録とDWのツールを覚えれば簡単に出来ますが） そのページを複製し、各「内容」の部分だけページ毎に変更、別名.htmlで保存。 あとは、テキスト追加し、HTMLでマークアップ,CSSでデザイン。 その他、詳しくは、 ウェブサイトの作り方やHTML,CSSなどの参考書や解説サイトなどで一回勉強した方が良いでしょう・・・ 制作方法は様々ありますから。
関連するQ&A
- CSSでフレーム
ご存知の方いらっしゃいましたらお教えください。CSSを利用してフレームのような動作をさせるにはどうすればいいのでしょうか？たとえばフレームにおいて仮にナビを左に、メインページを右にしてある場合、ナビのリンクのアクションがメインフレームへ該当するHTMLファイルを呼び出しますが、CSSでこの動作をさせることが出来るのでしょうか。参考になるHPなどございましたらお教えください。よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- フレームとCSSの違い
１ページを縦に2つに分けたデザイン（サイド部分とコンテンツ部分に区切られたページ）を作成します。 ページを作成する際、フレームで作成するのと、CSSでサイドとメインのレイアウトを作るのとでは、どちらがお勧めでしょうか。 見た目、左右に区切れてればいい（特定の人しか見ないので、ブラウザ表示はIEだけ確認できればOK）のです。 一般的にはどちらで作成したほうがよいでしょうか。 フレームとCSSとでの使い分けがよくわからないのです。 左側にリンク（メニューなど）を表示、右部分にコンテンツを表示する予定です。 初心者な質問ですみませんが、学び始めで少し混乱してしまっています。なんでもよいのでアドバイスよろしくお願いします。
- ベストアンサー
- HTML
- 【謎】途中でCSSがきかなくなりました（泣）
謎でもなんでもなく、まったくの技術不足なのですが、教えてください。 よろしくお願いします。 初めて、テーブルを使わずcssでデザインすることになりまして勉強中です。 CSSで指定していったものが途中できかなくなりました。 タグの記述もこれでいいのか不安です。 ページはヘッダ-メイン（左メニュー+右メインページ）-フッタ という構成です。 以下のように記述して、それぞれのエリアごとに<p>や<ul><li>などを指定しています。 ------------------------------- <body> <div id="contentBody"> <div id="headArea"> </div><!-- /#headArea --> <div id="mainContentArea"> <div id="contentMenu"> </div><!-- /#contentMenu --> <div id="pageContent"> <div class="entryBody"> </div><!-- /.entryBody --> </div><!-- /#pageContent --> <div id="footArea"> </div><!-- /#footArea --> </div><!-- /#mainContentArea --> <!-- /#contentBody --> </body> ----------------------------------- CSSで指定していって、ヘッダ-メイン（左メニュー）まではうまくいったのですが、右メインページ-フッタからCSSがきかなくなりました。 pageContent からです。 構成がおかしいからでしょうか！？？？ それともCSSの記述がおかしいからでしょうか！？？？ #pageContent { margin: 0px; width: 600px; float: right; } としか書いてないのですが。。。 うまく説明できずにすみません。 年末でお忙しいと思いますがよろしくお願いします。
- ベストアンサー
- XML
- CSS デザイン 切り替えかた
1つのWebサイト作る際、ユーザー別に、自動でデザインを変えてみせることは可能ですか？ デザインはCSSでやろうと思っています。 可能なら、css、javascript、…など、どういうものを使えばいいか教えてください。 例えば、特定のページAからのリンクで来た人にはA'のデザインで 特定のページBからのリンクで来た人にはB'のデザインで…というふうに、1つのサイトを見せたいのです。 （特定のページA、B…も自分で作ります。） javascriptのパラメータやリファラーを使えばリンク元のページはわかって、 複数のcssを切り替えたりできるようですが、 （http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q111...のベストアンサー参照） その切り替えたcssの情報を（最初の1ページだけでなく）、 サイト内で、次のページ次のページまた戻って違うページ…などと遷移していった時に、 受け継いでゆくことは可能でしょうか？ 同じサイト内を、違うリンク元からきた人は、違うデザインで見続けるということです。 わかりにくくてすみません。 それぞれのデザインの分だけページを作ればいいというのは、ナシでお願いします。 できるか、できないかなど、少しでも情報くださると嬉しいです。
- ベストアンサー
- JavaScript
- HPビルダーでCSSを使ってフレームごとにデザイン変更
HPビルダー8でフレームを使って左、右下(メイン)、右上での3画面でHPを作成中です。 左・右上・右下でそれぞれ違う背景を違うデザインで使いたいと思っています。 スタイルシートを利用中なのですが調べてもよく理解できずわかりません。 今はビルダーのスタイルシートの細かい指定方法がわからないので直接 手打ちでCSSファイルにメインページのデザインを入れて、 左・右上のフレームページはheadタグ内に個別に入れています。 できれば作業が簡易化できるようにフレームごとに違うデザインのCSSを それぞれ適用させたいとおもうのですが具体的な方法を教えていただけますか？ CSSファイルなどを直接いじる方法でもHPビルダーの機能を使う方法でもどちらでもかまいません。 CSS系のサイトは一通り見てみたのですがさっぱりわからないので 具体的に記述例を教えてくれると大変ありがたいです。よろしくおねがいします。 CSSファイルの記述(一部) body{background-image : url(../○○.jpg);} 左ページの記述 <head> <STYLE type="text/css"> <!--body{background-color:#ffffff}--> </style> </head> 右上ページの記述 <head> <STYLE Type="text/css"> <!--body{background-color:#808080}--> </style> </head>
- ベストアンサー
- ホームページ作成ソフト
- floatを複数使用するとFirefoxでデザインが崩れる
CSSの質問です。 divタグを使い、div1を左にfloatさせ、div2を右にfloatさせています。そのdiv2内にまたdiv3とdiv4を配置し、div3を左にfloat、div4を右にfloatさせようとしたのですが、問題が起こりました。IEでは狙ったとおりに表示されるのですが、Firefoxではデザインが崩れてしまいます。先の例で言うと、div2がdiv1の下の行に来てしまうのです。 Firefoxでは、二重にfloatを使用することは出来ないのでしょうか？
- 締切済み
- HTML
- CSSでのページ構築について
CSSでのページ構築について CSSでのサイト制作に挑戦しています。 まずは、テンプレートをつかってカスタマイズしてみようとおもい、テンプレートをDLしました。 「フッタ／左メニュー／メインコンテンツ／フッタ」というブログなどでよくあるものです。 （縦三段で、真ん中が左右２つに別れている2カラム） CSSファイルは、外部読み込み形式です。 トップページを作って、いざメニューからメインページのリンクを貼ろうと思ってつまずきました。 左ページのコンテンツメニューに設定したリンクを、右側の枠内に表示したいのですが、そういった場合は、どうすれよいでしょうか。普通に右側の内容をいれたHTMLにリンクすると、全画面がそのページになってしまって、ヘッダ／左メニュー／フッタは消えて（隠れて）しまいます。 ヘッダや左メニューをそのままにしてページ数を増やしたいときは、トップページをひたすらコピーして、右側の要素部分だけを変更していくのでしょうか？ でも、それだとCSSにする意味がないというか、全然楽ではないですよね。 左メニューの項目が増えた時など、全ページを修正しなければならなくなりますし。 自分なりにCSS関連のサイトを検索して調べてみたのですが、どこも「トップページをそのままコピーしているようにしかみえない」のです。 右側ページ内容のHTMLに、ヘッダやメニューも読み込ませるような設定が必要なのでしょうか？ ソフトはDW CS4を使っています。 どなたか、CSSの達人さま、教えてくださいませ。 お願い致します。
- 締切済み
- ホームページ作成ソフト
- フレームの四分割でリンク
こんにちは。よろしければ教えて下さい。 フレームを上中下の三分割（10%、80%、10%）にし、中を更に左右（20%、80%）で割りました。 これらを 上=ue 中=naka 下=sita 左=hidari（メニューページ） 右=migi（メインページ） とします。 この時、左（メニュー）から右（メイン）にリンクすると同時に、上もしくは下もリンクさせたい（右を押すと左と上が同時に変わる）のですが、htmlもしくはスタイルシートで出来るでしょうか？ 上をサブメニューとして使いたいのです。 申し訳無いのですが （１）JavaScriptは使えません。 （２）CGI非対応スペースです。 （３）これ以上フレームを増やすのは避けたい です。 ちなみに過去の質問は拝読しましたが、読んだ限り3分割、フレームを更に入れ子にするという回答が主でした。 しかし最初に上中下と組んでしまっているので、入れ子が出来ません。 フレームを三分割にして左メニューでテーブルを組んで見た目上同じ効果を出す、というのは考えたのですが、直接リンク出来ればそれに越した事は無いので、お尋ねさせて頂きました。 宜しくお願い致します。
- 締切済み
- HTML
- ターゲットフレームについて教えてください。
フロントページを使っています。元々上下に3分割されたフレームの真ん中部分に、さらに左右に2分割したフレームを入れたいのです。左部分をコンテンツにして、リンク先を右部分に表示したいのですが、ターゲットフレームを右部分のフレーム名にしてるのに、どうしてもリンク先を表示させると左部分が残らず、元々の上下のフレームしか残りません。教えてください、よろしくお願いします。
- 締切済み
- HTML
- フレーム
HPビルダーで2分割したフレームのページがあります。 左をクリックしたら右のページだけが変わるようにリンクを張るにはどのようにすればいいのでしょうか？ どなたかわかりやすく教えてください。
- ベストアンサー
- ホームページ作成ソフト
お礼
早速ご回答いただきありがとうございます。書籍は色々購入していますが、一番知りたいことが書いていません。もっと熟読すればどこかにヒントがあるのでしょうがそこまでいっていないようです。いつも思うのですが、何で簡易なソフトで作成したものとDWで作成したHPに違いを感じるんでしょうか？ショボイHPなんか作ったらゴミですので、そうならないようがんばります。 ps.何とかスパーリファレンスと書いてある書籍はスーパーではないことがわかりました。結局、毎日コミュニケーション社のHTML+CSSのちょっとした記事が役に立ちました。 お世話になりました。