• ベストアンサー

CSSの作成について

図のようなレイアウトでホームページを作りたいのですが 恥ずかしながら、私html位しか書けなくて、 CSSの作り方があまり良くわからないのです。 googleで検索したところ、 このようなサンプルテンプレートがありませんでした。 あと、htmlとCSSを分けて書く、という意味がいまいち ピンときません。 どなたか、初心者に寛容な方、教えていただけないでしょうか？

画像を拡大する
回答 全件
ベストアンサー
（１）HTMLの中に外部ＣＳＳファイルへのリンクを定義しておく。 <l…

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

  • ベストアンサー
noname#187563
noname#187563
回答No.1

（１）HTMLの中に外部ＣＳＳファイルへのリンクを定義しておく。 <link href="style/main.css" rel="stylesheet" type="text/css" /> （２）ＨＴＭＬ内のＣＳＳは、ＣＳＳファイルないで定義できる。 ////////////////////////////////////// ｈｔｍｌ ////////////////////////////////////// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="style/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"> <h2>タイトル</h2> </div> <div id="left-contents"> <ul> <li>aaa</li> <li>bbb</li> </ul> </div> <div id="righ-contents"> <p>ほにゃらら</p> <p>にゃらら</p> </div> <div id="footer"><p>copy right</p></div> </div> </body> </html> ///////////////////////////////////////////////////////////////// style/main.css ///////////////////////////////////////////////////////////////// @charset "utf-8"; * { margin: 0px; padding: 0px; } body { margin-top: 20px; background-color: #CCCCCC; } /* CSS Document */ #container { float: none; width: 760px; margin-right: auto; margin-left: auto; } #container #header { background-color: #FFFF00; width: 760px; } #container #header h2 { padding-left: 30px; } #container #left-contents { float: left; width: 200px; background-color: #33CCFF; display: block; } #container #left-contents ul { list-style-position: inside; padding-left: 30px; } #container #righ-contents { background-color: #CCFF33; float: right; width: 560px; } #container #righ-contents p { padding-left: 30px; } #container #footer { clear: both; width: 760px; background-color: #FFFF00; display: block; } #container #footer p { padding-top: 10px; padding-bottom: 10px; margin-right: auto; margin-left: auto; padding-left: 30px; }

RIOT1970
質問者

お礼

dreamweaver上でやったら出来ました！！ 有難うございます。

RIOT1970
質問者

補足

ソースありがとうございます。しかし、 拡張子はhtmlとcssでalphaEDITで作成したのですが、 IE9上で確認したところ、図のようにはなりませんでした。 …なにがいけないんでしょうか？

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. インターネット・Webサービス
  3. SNS・掲示板・ブログ
  4. ブログ

関連するQ&A

  • Homepage managerでcssテンプレートは使えますか。

    Homepage managerでcssテンプレートは使えますか。 レイアウト用にcssのテンプレートを使ってみようと思い、他のサイトからダウロードしたのですが、Homepage　managerでとりこんで使うことができるのでしょうか。スタイルシートファイルエディタを使うのかと思ったのですが、やり方がまったくわかりません。 また、css自体よくわかっていないのですが、このレイアウトの中に細かい表などを作成していくことも可能なのでしょうか。 ご教授よろしくお願い致します。

  • css定義でこんなものを…

    Dreamweaver2004MX 添付画像のようなレイアウトをcssで定義してみたいのですが、 可能でしょうか？ css関連のサイトを色々と検索し、やってみましたが、 css初心者としては、難しくて満足のいくものが出来ませんでした。 宜しくお願いします…。 ※添付画像の「画像」とその下にある「ＳＡＭＰＬＥ」が途中で 切れてしまってますが作成したいものは、つながっています。 わかりずらくて申し訳御座いません。

    • ベストアンサー
    • HTML
  • CSSをいじらず、HTMLのテキストひとつ変えただけで崩れる

    宜しくお願いします。 ホームページビルダーで、cssのサイトを開き、 テキスト文章の文字ひとつ削除するだけでレイアウトが崩れてしまいます。 cssのサイトは[Webレイアウト]という参考書の付録CDから入れた サンプルサイトです。 自由に書き換えできるサンプルなので、テキストの「あ」を「か」に変えるだけでも、プレビューで崩れてしまう理由が不思議でなりません。cssはまったくいじっていません。

  • （ＤＷ）CSSテンプレートを使用してＣＳＳでの編集可能流域を作れますか？

    宜しくお願いします。 ＤＷ　ＭＸで制作しています。 ＣＳＳを研究中です。 完全にＣＳＳでレイアウトしたテンプレートを使用して、 編集可能領域を作り、 ＨＴＭＬファイルにそのテンプレートを適用して、 さらにその編集可能領域にＣＳＳでレイアウトしていくのは、 無理があるのでしょうか？ といいますか、 ＣＳＳで完全にレイアウトしたら、 テンプレート化せずに普通にページを増やせばいいんですよね？ まだ、基本がわかっていないのでよろしくお願いします。

    • 締切済み
    • CSS
  • ホームページビルダーでcssのサイトが崩れる

    宜しくお願いします。 ホームページビルダーで、cssのサイトを開き、 テキスト文章の文字ひとつ削除するだけでレイアウトが崩れてしまいます。 cssのサイトは[Webレイアウト]という参考書の付録CDから入れた サンプルサイトです。 自由に書き換えできるサンプルなので、 テキストの「あ」を「か」に変えるだけでも、プレビューで崩れてしまう理由が不思議でなりません。cssはまったくいじっていません。 理由

  • ホームページビルダーＶ9でCSSテンプレートを開くとレイアウトが崩れる

    インターネット上で見かけるCSS無料テンプレートを使ってホームページをつくろうとしています ホームページビルダーＶ9でファイルを開きページ編集タブで見ると画面が崩れています 黄色の改行マークのような表示も出ます プレビュータブをクリックすると正常に戻ります ●ホームページビルダーＶ9ではCSSテンプレートが使えないのでしょうか ●また、設定を直すなどの操作が必要なのでしょうか テーブルでレイアウトしてあるタイプのテンプレートはそんなことはないようです しかし、今回はCSSをマスターしたいので、CSSのみのホームページにこだわっています よろしくお願いします

  • CSSでどのように記述したらいいでしょうか？

    ホームページ作成中ですが、CSSはあまり詳しくありません。 テンプレートを元に多少いじれる程度です。 下記の富士通トップページのフッター部分のサイトマップ？（個人のお客様、法人のお客様・・・と書いてある部分と、さらにその下の「このサイトについて・・・」という部分）のレイアウトがとても綺麗なので、同じようにレイアウトを組みたいのですが、CSSをどのように書けばいいでしょうか？ http://jp.fujitsu.com/

    • ベストアンサー
    • HTML
  • HTML,CSSのみでDIVブロック

    ＩＥで図のようなＤＩＶブロックを表示させたいと考えています ＤＩＶでなく他のＨＴＭＬ要素でもいいです jQueryなどライブラリを使わないで ＨＴＭＬとＣＳＳのみで図のような表示のサンプルプログラムが見れる サイトを教えてください また、グーグルなどで、これらを検索する際 適当なワードを教えてください よろしく、お願いします

  • ホームページの作成について

    ホームページ作成初級者です。 現在、htmlとcssを使い簡単なホームページは作れるようになりましたが、 今後のステップとして、もう少し複雑なレイアウトの物を作ろうと考えています。 現在、作ったホームページはPCとスマホでレイアウトが同じ仕様になっています。 次に作るサイトは、レイアウトをそれぞれ変えて作ろうと思いますが、 作成手順としてはPCのレイアウトを100%完成させてから、 CSS等を変更してスマホ用のレイアウトを作成するといった手順がいいのか、 二つを同時進行で作っていった方がいいのかどちらがいいですか？ そもそもCSSを変更してレイアウトを変更するので合ってますか？ また、よく見かけるサイトでPCとスマホでURLを PC→ http://サイト名/ スマホ→http://サイト名/sp みたいにスマートフォンの階層？を一つ深くしてるのを見かけます。 そこでもう一つの質問なんですが、 グーグル等の検索サイトで検索し、 あるサイトをPCから開くとPC用のサイトが表示され、 スマホから開くとスマホ用のサイトが表示されますが、 それはサイト側で自動で判断して表示してくれるんでしょうか？ 初歩的な質問で申し訳ありませんが、よろしくお願いします。

  • cssが反映されません

    FC2のホームページについてです。 ホームページはなんとか作れてサーバーにアップしたのですが、 style.cssで設定した背景画像とスクロールバーが反映されません＞＜ テンプレートをお借りして、その中に入っていたstyle.cssもそのままffftpに アップロードしました。 ファイル内で自分のホームページを見てみると背景画像と色など設定したスクロールバーは しっかり反映されているのですが、サーバーにアップすると反映されません。 ffftpにstyle.cssをそのままアップロードしたのが間違いだったのでしょうか；； 検索して調べてみるとCSSのフォルダごとアップロードしろと書いてあったりするのですが テンプレートに入っているのはstyle.cssというものだけで、cssフォルダは入っていません。 それともcssフォルダは自分で作るのですか＞＜？

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する