• 締切済み

CSSでのページ構築について

CSSでのページ構築について CSSでのサイト制作に挑戦しています。 まずは、テンプレートをつかってカスタマイズしてみようとおもい、テンプレートをDLしました。 「フッタ/左メニュー/メインコンテンツ/フッタ」というブログなどでよくあるものです。 (縦三段で、真ん中が左右2つに別れている2カラム) CSSファイルは、外部読み込み形式です。 トップページを作って、いざメニューからメインページのリンクを貼ろうと思ってつまずきました。 左ページのコンテンツメニューに設定したリンクを、右側の枠内に表示したいのですが、そういった場合は、どうすれよいでしょうか。普通に右側の内容をいれたHTMLにリンクすると、全画面がそのページになってしまって、ヘッダ/左メニュー/フッタは消えて(隠れて)しまいます。 ヘッダや左メニューをそのままにしてページ数を増やしたいときは、トップページをひたすらコピーして、右側の要素部分だけを変更していくのでしょうか? でも、それだとCSSにする意味がないというか、全然楽ではないですよね。 左メニューの項目が増えた時など、全ページを修正しなければならなくなりますし。 自分なりにCSS関連のサイトを検索して調べてみたのですが、どこも「トップページをそのままコピーしているようにしかみえない」のです。 右側ページ内容のHTMLに、ヘッダやメニューも読み込ませるような設定が必要なのでしょうか? ソフトはDW CS4を使っています。 どなたか、CSSの達人さま、教えてくださいませ。 お願い致します。

みんなの回答

回答No.3

インラインフレームを使えば解決します。 ただ更新の手間が増えますが。

kennono
質問者

お礼

回答ありがとうございました。 質問文が分かりにくくてすいません。 「フレーム」や「テーブル」は使わないで「CSS」で構築したいというのが、今回の目的なのです。 フレームもインラインフレームも、廃止の方向へ向かっているようなので。 今すぐどうこうということはないとは思いますが、、、 どちらにせよ、更新の手間が増えるのであれば、あきらめてCSSで作った方が今後の為になるかな、と考えはじめています。

全文を見る
すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

>でも、それだとCSSにする意味がないというか、全然楽ではないですよね。 >左メニューの項目が増えた時など、全ページを修正しなければならなくなりますし。  CSSの目的は、HTMLをプレゼンテーションから解放し、本来の姿に戻すためのものです。かってのフレームでは、多くの問題点があり、その反省からフレームは、 【フレームよりもページ制作の負担が増えたとしても、得られる益の方が多いから】 廃止されたのです。 フレーム問題 html - Google 検索 ( http://www.google.co.jp/search?hl=ja&source=hp&q=%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E5%95%8F%E9%A1%8C+html&lr=&aq=f&aqi=&aql=&oq= ) Introduction to HTML 4 (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )  私は、オーサリングを使わずに数百ページでも制作しますが、あなたは、 >DW CS4を使っています。  ということなので、その作業は負担にはならないはずです。 [Dreamweaverを使わずに一挙に書き換えるには]  複数行を検索置換できるテキストエディタを使用して置換します。 HTMLの作り方の注意点  きちんとマークアップしたテンプレートを用意しておくこと ・各テーマのトップ用 ・コンテンツ用 ・その他(サイトマップ、問い合わせフォーム、プライバシーポリシーなど) <div コンテンツ用>  <div 本文>   <ul 目次></ul>   <div footer></div> <.div> <ul class="siteNav"></ul> <div 文書情報></div>  とか・・・ 頑張ってください。

kennono
質問者

お礼

ありがとうございます。 なるほど、CSSとはそういうものだったのですね。 確かに、スタイルシートを駆使して構築されているサイトは、どれも見栄えもよいですし、表示も速いです。 これは、フレームやテーブルとは比べ物になりませんよね。 >[Dreamweaverを使わずに一挙に書き換えるには] >複数行を検索置換できるテキストエディタを使用して置換します。 調べて、こちらも早速試してみたいと思います。 「できないよ」だけでなく、アドバイスいただけてとても嬉しいです。 ありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。
  • ok-rjak
  • ベストアンサー率52% (70/134)
回答No.1

> ヘッダや左メニューをそのままにしてページ数を増やしたいときは、トップページをひたすら > コピーして、右側の要素部分だけを変更していくのでしょうか? > でも、それだとCSSにする意味がないというか、全然楽ではないですよね。 CSSでは、右側の要素部分だけを変更するというようなことはできません。 (こういうことをしたい場合は、フレームを使うかJavascriptなどを併用する事になります) CSS(スタイルシート)の基本的な考えた方は、スタイル(書式など内容と直接関係ない部分)はスタイルシートで記述しましょうというのが根底にあります。 ですので、kennonoさんの必要とする機能はCSSではできないことになります。 ですが、せっかくDreamweaverを使ってるのですから、ライブラリ機能を使ったらいいと思います。 「dreamweaver ライブラリ」などで検索すると出てくるサイトを参照してもらうのがいいと思いますが、共通部分をテンプレート化するという機能です。 そうすれば、お望みのことが可能なのではないでしょうか?

参考URL:
http://www.non-period.com/be/dw/8/039.html
kennono
質問者

お礼

ありがとうございます。 「できない」とはっきりわかって、とても感謝しています。 CSS=ものすごく便利!(作業がはやくなる) と思っていたので、かなりショックではありますが。 確かに、最初の構築時は、かなり効率的に制作する事ができますが、あとで「百ページ直す」のは…気が遠くなりそうです。 ライブラリ機能、しりませんでした。 さっそく試してみたいと思います。 分かりにくい書き方であったにもかかわらず、意図をくんでいただけてとても嬉しいです。 とても丁寧でやさしいご回答に、心よりお礼申し上げます。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 【初心者】CSSリンクについて

    外部CSSのあるテンプレートをダウンロードしました。 今まではHTMLだけでHPを作ってたのでCSSについては全くわかりません>< ヘッダー、左にメニュー、右にメイン、そして下にフッターがあるものなんですが、 メニューをクリックして内容をメインに表示させるというのがどうやっているのかわかりません--; 本当に初歩的なことですみません。。 今までだとフレームを使ってターゲット指定でメインにリンクする方法ですがCSSだと?? 自分で本も買ってきて勉強もしてますが外部呼出しSCC…難しいですT_T

    • ベストアンサー
    • HTML
  • Perlでcssを使わないで3カラムにしたい

    現在、Perlでcgiを作成していますが、ページの最上部にヘッダー、ページの両端にメニューや広告、中央にメインコンテンツを配置する3カラム(三段組み)、最下部をフッターにしたいと考えています。 現在、メインコンテンツは完成しております。 cssは、使わないで上記のようなレイアウトをPerlで組みたいのですが、上記にようにしたい場合は、どのように書けば良いのでしょうか? 横幅全体は800。(ヘッダーとフッターも横幅は800) 左メニュー180、中央メインコンテンツ 440 、右メニュー180 で組みたいと思っています。 お手数をおかけ致しますが、アドバイスよろしくお願い致します。

    • ベストアンサー
    • Perl
  • HTML+フレーム構成のページを、HTML+CSSで書き換えるには?

    HTML+フレーム構成のページを、HTML+CSSで書き換えるには? コンテンツはそのままに、HTML+フレーム構成のページを、HTML+CSSで書き換えることになりました。 ヘッダー、フッター、上部に画像ロゴ、左にメニューを配置したいと思ってます。 メインコンテンツ部分以外はSSIでインクルードしたいと思っています。 案外簡単だと思ったのですが・・・すぐ配置が崩れて悩んでます。 さらに、CromeとIEで確認をするたびに配置が違ってしまいます。 merginとpadsdingを0にしてから始めるらしいことまでは調べたのですが、 そうするととても配置が変で面倒になります。 現在はFFFTPと秀丸とブラウザで作業してます。 ほかに、PhotoShop6とホームページビルダー14とMicrosoftExpressionweb3は手元にライセンスがあります。 HTMLは分かりますが、CSSは初めてです。多少がんばれば、javaScriptも使えるかもしれません。 お薦めの本や、作り方、フリーウェアなどありましたらご指導ください。よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSで(3)段組のページを作りたいのですが

    上から3段のページを作りたいと思っています。 ヘッダー ↓ コンテンツ ↓ フッター という形にしたいのです。 ヘッダーとフッターの背景色は同じにして、フレームを使ったように見せたかったのですが、画面いっぱいまで広がってくれず困っています。 フレームを使ったら簡単にできるのですが、CSSでは不可能なのでしょうか? 基本的かもしれませんがよろしくお願いいたします。

    • ベストアンサー
    • CSS
  • CSSでページ下部ソースを上に表示するには?

    タイトルがわかりづらくて申し訳ございません・・・。 やりたいことを要約しますと、CSSをつかい ページの上部によく配置しているナビゲーションメニューを ページ上では上に表示したいのですが、 ソース上、すべてのページが共通ですので SEOを考えて、ソースの下に配置したいのですがどうすればいいかわかりません・・・ 現在、サイドバーはfloatをつかい、ソース内では、コンテンツの下にきております。 現在の構成と、希望の構成を書きますので、ご教授いただけると助かります! ■現在の構成 (ヘッダー) (ナビゲーションメニュー) (コンテンツ)※ブラウザでは右側 (サイドバー)※ブラウザでは左側に表示 (フッター) ■希望の構成 (ヘッダー) (コンテンツ) (サイドバー) (ナビゲーションメニュー) (フッター) ブラウザ上の表示は、同じにしたいです。

    • ベストアンサー
    • CSS
  • CSSで微妙にずれる

    CSSで微妙にずれる こんにちは、最近HPを作成するようになった初心者です。 あるフリーサイトのCSSを雛形としてHPを作成したのですが、 (TOPとMENUとMAIN(コンテンツ)とFOOTERの4構成 MENUは左でMAINが右) ブラウザの枠の中にFOOTER部分が表示されると (上下に短いコンテンツ) 微妙に左(多分3PXぐらい)に、ずれて表示されてしまいます。 この様な、場合原因の部位を特定するには、どの様なアプローチを 行えばよろしいのでしょうか? 教えていただけるとありがたいです。 ちなみに、FOOTERのHTMLは <div id="footer"> <address>Copyright &copy; 2010 XXXXX All Rights Reserved.</address> </div> で、 CSSは div#footer { clear:both; margin:0 20px 0 20px; } です

  • htmlとcssを使ったメニューバー

    HPのメニューバーをhtmlとcssを使用して作成したいのですが、どういう風に調べてよいのかもわからないので、アドバイスだけでもいいので教えてもらえると助かります。 例えば下のようなメニューを作成するとします。 (「□トップ」という一つ一つの画像だと思ってください) □トップ □日記 □写真 □リンク これをフレームページの左側に表示させます。 トップページを右側に表示させている時、メニューのトップというところの画像がいれかわり、 ■トップ □日記 □写真 □リンク 上のように表示させ、日記ページを右側に表示させている時も同様に □トップ ■日記 □写真 □リンク と、現在見ているページのメニュー画像のみを入れ変えるという設定にしたいです。 できるのなら、cssとhtmlの記述例を教えてくださると大変助かります。 よろしくお願いします。

  • FIREFOXでのCSS表示

    よろしくお願いします。 CSSのレイアウトで、よくある2カラムのオーソドックなもの 左側にメニュー、右側にメインコンテンツ、上下にヘッダ・フッタ <div id="wall"> <div id="header"></div> <div id="menu"></div> <div id="main"></div> <div id="footer"></div> </div> のような構造の場合、メインコンテンツは各ページによってボリュームが違うので、wall部分もmainのボリュームにあわせて変化させたいです。 IEならば問題ないのですが、FIREFOXだとmenuやmainの部分が増えると、wallの上から重なるように表示されてしまうケースがありました。はみ出ています。 このような場合、それぞれのheightの設定など、どのようにしたら良いのでしょうか? mainの長さにあわせて最後にwallを1250pxのように具体的な長さ指定すると、見た目にはfirefoxでもうまく表示はされています (ただし、このやり方だと各ページのコンテンツの長さにあわせて、1つ1つ設定しないといけない) floatの設定なども含めて、どういった記述をすれば良いのか、どなたか教えてもらえませんでしょうか。

  • CSSファイルの上手な使い方を教えて下さい。

    現在、Webサイトを作成しており20ページくらいになりますが、色や形を変えることが多々あり、そのたびにCSSファイルのコードを修正するのが面倒です。 私はhtmlファイル20枚につき、CSSファイル20枚となっており、すべてのCSSファイルにヘッダーやフッターサイドバーのデザインを施すコードが記述されております。 この方法は非効率でしょうか? 良く考えてみたのですが、全てのページでヘッダーとフッター、サイドバーのデザインが同じなら、ヘッダー、フッター、サイドバーだけのCSSファイルを1つ作成し、メインコンテンツはページの分だけCSSファイルを作成するべきなのでしょうか? この場合、htmlファイル1枚につき、2枚のCSSを読みこませれば良いのでしょうか?

    • ベストアンサー
    • CSS
  • CSSでHP作成したい。メニューコンテンツはどのように作ったらいいですか?

    CSSでHP作成したい。メニューコンテンツはどのように作ったらいいですか? こんにちは。 今まで、ホームページビルダーを使って、HTMLでウェブページを作ってきました。 左カラムをメニュー部分として、インラインフレームで作成していました。 この度、SEO対策から、 CSSを使ったテンプレートに代えて作り変えようと思っています。 でも、いまいちよくわからないのですが、 スタイルシートで左カラム(メニュー)を書くとなると、 全てのページを作った後にリンクを貼って、 そのメニュー部分をすべてのページにまた複製しないとならないですよね?? 私のウェブサイトは、100ページ弱あるので、 なかなか考えただけで大変そうです。。。 スタイルシートで、2カラム形式左メニューのページを作成したことのある方、 もし良かったら方法を教えて下さい。 ※ちなみに、ブログは自己カスタマイズが大変なので利用しない方向です。 FC2で持っていますが、やっぱりHTMLの方が使いやすいので・・・

    • ベストアンサー
    • SEO
DCP-j552nが見つからない
このQ&Aのポイント
  • ドライバーをインストールし、無線接続し、プリンターが見つからないとの表示が出ます。Wifi環境は整えており、ファイアウォールも解除して試しましたが同様でした。どのようにすれば良いでしょうか。
  • お使いの環境はWindows10で、無線LANで接続されています。Wi-Fiルーターの機種名はソフトバンクエアです。
  • 関連するソフト・アプリや電話回線の種類は特にありません。
回答を見る

専門家に質問してみよう