• ベストアンサー

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

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

  • HTML
  • 回答数2
  • ありがとう数4
回答 全件
ベストアンサー
HTMLには文書構造しか書かないので、これはHTMLと言うより「Web…
同じスクリプトを他のページにも使用するためや、修正をしやすくさせるため…

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

HTMLには文書構造しか書かないので、これはHTMLと言うより「Webデザイン・CSS( http://oshiete.goo.ne.jp/category/258/#crumb )」向きの質問ですね。 　HTML上はその部分はfooterにあたる部分ですから、以下のようにマークアップすればよいです。 ・・・前略・・・ 　<div class="section"> 　・・・【中略】・・・ 　　<ol id="siteMap"> 　　<li>個人のお客様 　　　<ul> 　　　　<li>パソコン、タブレット、<br>スマートフォン、携帯電話</li> 　　　　<li>カラー イメージ スキャナ</li> 　　　　<li>エアコン、家電製品</li> 　　　</ul> 　　</li> 　　<li>法人のお客様 ・・・【中略】・・・ 　　</li> 　　<li>お知らせ 　　　<ul> 　　　　<li>プレスリリース</li> 　　　　<li>製品安全に関する重要なお知らせ</li> 　　　</ul> 　　</li> 　</ol> </div> <div class="footer"> 　<ul> 　　<li>このサイトについて</li> 　　<li>個人情報保護ポリシー</li> 　　<li>お問い合わせ</li> 　　<li>サイトマップ</li> 　</ul> </div> ★このマークアップの理由 1) DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) 2) class名は、HTML5の「3.1. 新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」の要素名と使い方 3) 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4 ) 　これをスタイルシートでデザインして行きます。この様なよいデザインを見つけたら、それを実現するためにCSSを書いていくことはとてもよい練習になります。 ★まず、文書構造からどの要素についてデザインするかを指定するセレクタ(選択子)( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )の書き方や値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )をしっかりと身につけます。 ★その後、プロパティで指定していきます。 [サンプル] ★タブは＿に置換してあるので戻す。 ★細かい指定はしていません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- ol#siteMap,ol#siteMap li,ol#siteMap li ul,ol#siteMap li ul li{ list-style:none;display:block; margin:0;padding:0; text-align:center; } ol#siteMap:after{ content:"";display:block;clear:left; } ol#siteMap li{ width:23%; float:left; line-height:2em; } ol#siteMap li ul{ border-top:solid 1px gray; width:85%;margin:0 auto; line-height:1.4em;font-size:0.9em; } ol#siteMap li ul li{ width:100%; float:none; text-align:left; } div.footer{ background-color:gray;color:white; } div.footer{ font-size:0.8em; position:relative; height:20px; padding:5px; } div.footer ul{ margin:0; } div.footer ul li{ list-style:none; display:inline; margin-left:1em; } div.footer address{ position:absolute; right:5px;top:0px; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿＿<ol id="siteMap"> ＿＿＿<li>個人のお客様 ＿＿＿＿<ul> ＿＿＿＿＿<li>パソコン、タブレット、<br>スマートフォン、携帯電話</li> ＿＿＿＿＿<li>カラー イメージ スキャナ</li> ＿＿＿＿＿<li>エアコン、家電製品</li> ＿＿＿＿</ul> ＿＿＿</li> ＿＿＿<li>法人のお客様 ＿＿＿＿<ul> ＿＿＿＿＿<li>ソリューション＆サービス</li> ＿＿＿＿＿<li>コンピュータプラットフォーム</li> ＿＿＿＿＿<li>ソフトウェア</li> ＿＿＿＿</ul> ＿＿＿</li> ＿＿＿<li>サポート情報 ＿＿＿＿<ul> ＿＿＿＿＿<li>サポート</li> ＿＿＿＿＿<li>よくあるご質問</li> ＿＿＿＿</ul> ＿＿＿</li> ＿＿＿<li>お知らせ ＿＿＿＿<ul> ＿＿＿＿＿<li>プレスリリース</li> ＿＿＿＿＿<li>製品安全に関する重要なお知らせ</li> ＿＿＿＿</ul> ＿＿＿</li> ＿＿</ol> ＿</div> ＿<div class="footer"> ＿＿<ul> ＿＿＿<li>このサイトについて</li> ＿＿＿<li>個人情報保護ポリシー</li> ＿＿＿<li>お問い合わせ</li> ＿＿＿<li>サイトマップ</li> ＿＿</ul> ＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

CBR400RR
質問者

お礼

おかげさまでなんとか自分なりに加工したり四苦八苦しながらもイメージに近い形に作ることが出来ました。 勉強させていただきましてありがとうございました。

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

その他の回答 (1)

  • katokundes
  • ベストアンサー率22% (492/2217)
回答No.1

同じスクリプトを他のページにも使用するためや、修正をしやすくさせるための手法 でもある .js に個々が書かれていますね。 CSSは見ていないです、全体わからず。

CBR400RR
質問者

お礼

なんとかイメージに近い形に作ることが出来ました。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

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

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

  • Dream Weaverを使ってCSSレイアウト

    Dream Weaverを使ってCSSレイアウトをしようとしています。 これまでコンテンツをひとまとめにcontainerでdivにしていたのですが、今回、footer部分（エビアンのサイト（http://www.evian.co.jp/）でいうと、一番下のサイトマップが載ったピンクの部分）をこのように横広がりのベタ一色の背景にしようと思っています。 しかしその場合、footerの背景はcontainerの幅までしか設定できません。containerの幅よりも広く、ブラウザの際まで横に伸びる背景はどのように設定するのか分かりません。 分かる方、教えてください。 よろしくお願いします。

  • CSSで高さ100％のレイアウト

    テーブルを使用せずCSSでのレイアウトなのですが フッター位置をブラウザの一番下にマージン無しで指定したいのですが出来ません。 テーブルでは <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top">内容</td> </tr> <tr> <td valign="bottom">フッター</td> </tr> </table> というように指定していたのですが CSSでのレイアウトはHTMLを <div id="container"> <div class="content">内容</div> <div id="footer">フッター</div> </div> .CSS では #container { height: 100%; } は無効なのでしょうか？ 他のやり方でもフッターをブラウザの一番下にマージン無しでレイアウトできる方法があったら教えて下さい。

    • ベストアンサー
    • CSS
  • CSSの作成について

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

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

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

  • CSSで微妙にずれる

    CSSで微妙にずれる こんにちは、最近HPを作成するようになった初心者です。 あるフリーサイトのCSSを雛形としてHPを作成したのですが、 （TOPとMENUとMAIN（コンテンツ）とFOOTERの４構成 MENUは左でMAINが右） ブラウザの枠の中にFOOTER部分が表示されると （上下に短いコンテンツ） 微妙に左（多分３PXぐらい）に、ずれて表示されてしまいます。 この様な、場合原因の部位を特定するには、どの様なアプローチを 行えばよろしいのでしょうか？ 教えていただけるとありがたいです。 ちなみに、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; } です

  • tableレイアウトとCSSデザイン、ハイブッド、どういう違いがありますか？

    無料のテンプレートを使ってHPを作ろうと思っています。（HTMLとCSSの知識は多少あります。） テンプレートには、 tableレイアウト、CSSデザイン、およびハイブッドがありますが、これらは目的によって使い分けられているのでしょうか？「こういう場合はCSSが良い」とかあるんでしょうか？ 分かる方がいたら、教えてください。よろしくお願いします。

    • ベストアンサー
    • HTML
  • FC2ホームページでCSSテンプレートを使いたい！

    FC2ホームページでサイトを開設していまして、トップページの仕様替えにCSSデザインテンプレートを使おうとしたのですが、どうやればいいのか全く分かりません。 下記サイト様の#design_167のデザインをお借りしたいのです。 http://spica.xtr.jp/ HTMLについてはなんとなく理解しているつもりですが、ほとんどド素人です。 ちなみに今までFC2のファイルマネージャーを使用してホームページを作ってました。 一から十まで細かく教えて下さる心の広い方、お願いします。

  • DreamweaverのCSSで

    Dreamweaverを利用して、サイトを作っております。現在大きなサイトの一部分を任せられており、すでにできあがっているテンプレートにデータの流し込み作業をしています。 このサイト全体がバリバリにCSSで設計されていて、未だにテーブルレイアウトをしている私には分からないことが山盛り。とりあえず預かってきたファイルを開いてみたところ、デザイン画面が真っ黒なのです。所々見えるところもあるのですが、CSSで「画像＋文字」ではき出す設定になっている部分が真っ黒になってしまっているのです。 DreamweaverでCSSを扱う際、なにか特別な環境設定が必要なのでしょうか？おそらくじっくりと調べれば、何らかの解決方法があるのでしょうが、締切が迫っている仕事なため、とても焦っております。 当方、MacでDreamweaverはSTUDO MXを使っています。 是非アドバイスをお願いします。

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

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

New Soft CD Labelerded
このQ&Aのポイント
  • New Soft CD Labelerでスキャン及び印刷ができないトラブルについての相談です。
  • お使いの環境はWindows10及びWin11で、無線LANで接続されています。
  • 関連するソフト・アプリはNew Soft CD Labelerで、電話回線の種類はひかり回線です。
回答を見る

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する