ベストアンサー

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

2013/08/16 00:52

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

CBR400RR
お礼率82% (243/294)

HTML
回答数2
ありがとう数4

みんなの回答 （2）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/08/16 10:02 回答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">  ＿</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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

質問者