• ベストアンサー

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>

質問者が選んだベストアンサー

  • ベストアンサー
  • gura_
  • ベストアンサー率44% (749/1683)
回答No.2

　ビルダーでは、[スタイルシートマネージャー] でスタイルシートを作ることが出来ます。↓ http://www-6.ibm.com/jp/domino01/swhc/esupport.nsf/key/49256A6A0001F13649256E080008FC73?opendocument 　出来たスタイルシートを利用するには、↓ http://www-6.ibm.com/jp/domino01/swhc/esupport.nsf/faqview/49256A6A0001F13649256D9D0021F49E?opendocument 　「HTMLソース」で編集される場合はこちらが参考になると思います↓ http://www.tohoho-web.com/css/basic.htm#Link

参考URL：
http://www-6.ibm.com/jp/domino01/swhc/esupport.nsf/key/49256A6A0001F13649256E080008FC73?opendocument

その他の回答 (1)

回答No.1

HP作成ソフトは使ったことがないので、何をもって簡易化になるか分かりませんが、おおすじ質問者さんの方法で正しいです。 スタイルシートを使用する一番のメリットは、一度の記述で複数のページに反映できることです。スタイルシートを各フレームごとに分けたい場合は、どっちにしろ三度の記述が必要です。 しかも、複数のページに反映させるためには外部ファイルにする必要があります。HTMLとスタイルシートを分けたい場合も然りです。 <head>内において、 <link rel="stylesheet" type="text/css" href="../○○.css"> まぁ、作業的にはHTMLを開くかCSSを開くかの違いでしかないので簡易化にはなりませんね。

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • HPビルダー８　フレームを消して１つにまとめたい！

    HPビルダーでHPを作って公開しています。 でも今のHPはフレームを使って2分割に分かれています。 左のフレームにメニューが縦にならんでいてスクロールバーが付いています。右にはメイン？ページがあります。 それを分割しないで今度はフレームを使わず今までのHPの感じで１つのページに変えたいのですがどうやったらできますか？ 作り直すしかありませんでしょうか？ 宜しくお願いします！

  • 別フレームの.cssの変更

    こんにちは。 javascriptを使って.cssファイルを切り替えることにかんしてのしつもんです。 左フレームと右フレームがあって、 右のフレームに表示されているページのボタンとか文字とかをクリックすると、関数が呼び出されて、左フレームに表示されているページの.cssファイルを切り替えるようなscriptは、どう記述すれば、いいですか？

  • frameでのcssの変更する方法

    frameを使ってmain.html、menu.htmlを表示し、menu.htmlからmain.htmlのcss(外部)を変更する方法を教えてください。 frameのnameはmain.html→main、menu.html→menu、main.htmlのcssのidはmain、で指定してあります。 以下サンプルです frame.html <html> <head> </head> <frameset rows="50,*"> <frame src=main.html name="main"> <frame src=menu.html name="menu"> </frameset> </html> main.html <html> <head> <link rel="stylesheet" type="text/css" href="a.css" id="main"> ←(a.cssをb.css変更したい) </head> <body> </body> </html> menu.html <html> <head> </head> <body> </body> <a href="#">変更トリガー</a> </html>

  • フレームをＣＳＳなど他の方法で・・・（ＨＰビルダー使用）

    ＨＰビルダーＶ９を使用しています。 今回ＨＰのリニューアルを考えています。 フレームを使うことも考えたのですが、やはりスタイルシートなど他の方法の方が好ましいと思い、フレームを使わないことにしました。 しかしビルダーでやってみたもののよくわからず。。。 Ｖ９にはスタイリッシュエフェクトという新機能（簡単に言うとサイトの各ページに同じデザインを適用する機能）もあるのですが、うまくいっていない印象です。 というのもフレームを使った場合には、例えば縦２分割にして左にメニューを作成するような場合にメニュー部分のフレームページは一度作れば基本的にそのままで、あとは右側ページを個別に作ればいいと思うのです（あってますよね？）。 ただその新機能を使うとメニュー部分などの雛形は自動的に適用されるのですが、メニュー部分の内容（例えば映画コーナーとか音楽コーナーとかプロフィールなど各コンテンツ名）を各ページごとに書き直さなければなりません。 （デフォルトではメニュー部分が↓ ・メニュー1 ・メニュー2 ・メニュー3 という感じになっているので ・映画 ・音楽 ・プロフィール という感じに個別に書き直さなければならないということです） うまく伝わっていないかもしれませんが、どなたか教えていただけると幸いです。もし↑がよくわからなかったらお手数ですが補足要求していただけるとありがたいです。

  • ＨＰビルダーのフレームページをＣＳＳに一括変換

    以前ホームページビルダー15で自作したホームページがありますが、 全てフレームページで構成されているため、 今後のことも考えて、フレームページをなくし、全てＣＳＳにつくりかえようと思っています。 サイト全てのフレームページを一括でＣＳＳに変換する方法はあるんでしょうか。 また一括でできない場合、他によい方法がありましたら教えてください。 なおフレームページのときのページ構成は崩さないようにしたいです。 使用ソフトはホームページビルダー15のままです。 ご回答よろしくお願いします。

  • ＨＰビルダーでフレームを使用せずに壁紙を左一列配置にする方法

    ＨＰビルダーver6を使用してＨＰを作成しています。 ある壁紙を全面配置ではなく左一列配置にしたいのですがフレームを使わずにできますか？ 実はスタイルシートを使用したことがないのでよくわからないのです。 あるＨＰでこのタグを組むようにと例があったのですが上手く行きません。 例：<BODY STYLE="BACKGROUND:背景色 URL(画像ファイル) repeat-y"> どうしたら上手く行くのかタグまで教えてください。 またｖｅｒ６の使い方を詳しく教えているＨＰもありましたら同様に教えてください。

  • HP作成　スタイルシート

    ビルダーを使ってHPを作成しています。そこで、ページの背景の上だけにgif画像を指定したくスタイルシートを追加してみたのですがうまくなりません。ビルダーのHTMLに追加しているのですが追加する場所を間違えているような気がします。ビルダーで背景色を#cc0000設定しています。 <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY { background-image: url("image/gurad1.gif"); background-repeat: repeat-x } --> </STYLE> <LINK rel="stylesheet" href="image/table.css" type="text/css" id="_HPB_TABLE_CSS_ID_"> </HEAD> <BODY bgcolor="#cc0000" link="#ffffff" alink="#009900">

  • ホームページビルダーでの外部CSS

    ホームページ作成しています。 ど素人なりに頑張っていますが、内容が増えていくにつれ、だんだん動作が遅くなってきました。 そこで、最近「外部にスタイルシートを作る」ということを学びましたが、「div」あたりになると、さっぱり理解できず、結局「body」や「A」などのCSSを外部にするという段階にとどまっています。 もうすでに、レイアウトやデザインは決まっているので、今ある「manu」や「head」などを外部CSSに固定すれば、あとは記事を書くだけでページが作れると思うのですが…。 CSSのサイトはいろいろ拝見したのですが、レイアウトの段階になると、途中でわからなくなってしまいます。 ホームページビルダー付属のスタイルシートでは、デザインが合いません。そこで、素人にもわかりやすい、レイアウト枠としての外部CSS作成法をご指導ください。また、そのようなフリースタイルシートのソースなどがあればご紹介ください。 とにかく、外部CSSで、レイアウトを固定したいのです。 よろしくお願いいたします。

  • フレーム画面になると背景色が白になる!?

    そのページだけを表示するとちゃんと背景も黒くなるのに フレームの画面でこのページを出すと何故か白になってしまいます…； 今まではこんな事なかったのに…；何故でしょうか！？ そのページのタグです↓↓ <html> <head> <small> </head> <body bgcolor="000000"> <body scroll="no"> <style type="text/css"> <!-- body{ background:url(○○.jpg) no-repeat fixed right bottom; } --> </style> <br><br><br><br>

  • JS 違うフレームのCSSを読み替える方法

    いつもお世話になります。 過去に何度も出ている質問なのですが、 どれをやってみてもうまくいきませんので、 今更ながら質問させていただきます。 JavaScriptを使用して、一つの子フレームのコンボボックスを 操作すると、もう一つの子フレームのCSSが変化する内容を 実現したいと思っています。 様々な過去ログなどを見て、自分なりに修正してみたのですが、 上手くいきません。 コードを記述いたしますので、悪い点などを指摘し、正しい答えを 教えていただければ幸いです。 以下コード －－－－－－－－－－－－－－－－ フレームセット <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title></title> </head> <frameset cols="200,*"> <frame src="menu.htm" id='menu'> <!--　↑ここは今回は関係なし --> <frameset rows="100,*"> <frame src="top.htm" id="up"> <frame src="page0.htm" name="main1"> </frameset> <noframes> <body> <p>フレームの代替内容</p> </body> </noframes> </frameset> </html> 子フレーム(操作する側) <html> <head> <title></title> <script type="text/javascript" src="common.js"></script> </head> <body> <select onchange="changesytle(value);"> <option value="style.css">標準スタイル</option> <option value="">スタイルなし</option> </select> </body> </html> 子フレーム(操作される側) <html> <head> <link rel="stylesheet" type="text/css" href="style.css" id="mystyle"> <!-- これを操作しようとしています。 --> <title></title> </head> <body> <h1>ここの文字の色が変わります。</h1> </body> </html> common.js function changesytle(cssfile) { main1.document.getElementById('mystyle').href = cssfile; // ↑これがうまくいかない } style.css h1 { color : #ff0000; } －－－－－－－－－－－－－－－－－－－－－ 以上です。 何卒よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する