- ベストアンサー
CSSでどのように記述したらいいでしょうか？
ホームページ作成中ですが、CSSはあまり詳しくありません。 テンプレートを元に多少いじれる程度です。 下記の富士通トップページのフッター部分のサイトマップ？（個人のお客様、法人のお客様・・・と書いてある部分と、さらにその下の「このサイトについて・・・」という部分）のレイアウトがとても綺麗なので、同じようにレイアウトを組みたいのですが、CSSをどのように書けばいいでしょうか？ http://jp.fujitsu.com/
- みんなの回答 （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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
その他の回答 (1)
- katokundes
- ベストアンサー率22% (492/2217)
同じスクリプトを他のページにも使用するためや、修正をしやすくさせるための手法 でもある .js に個々が書かれていますね。 CSSは見ていないです、全体わからず。
お礼
なんとかイメージに近い形に作ることが出来ました。 ありがとうございました。
お礼
おかげさまでなんとか自分なりに加工したり四苦八苦しながらもイメージに近い形に作ることが出来ました。 勉強させていただきましてありがとうございました。