独学でGoogleトップページのデザインを真似てみました。
ブラウザの表示領域の上部に固定されたヘッダーとセンタリングされたコンテンツといった形にしています。
自分で真似たので、表示される結果としてはイメージ通りではあるのですが
実際、回りくどい方法をとっていないか?もっと適切な方法がるのでは?といった事が分からないので
チェックして頂きたいと思います。
CSSに関しては外部ファイルへ記述します。
以下のソースになります。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body{
margin: 0; /* ヘッダーをぴったり上部付けたいので */
}
#header{
color: #DDD;
background-color: black;
position: fixed;
width: 100%;
height: 50px; /* ヘッダー内に高さ50pxの画像を配置したい為 */
z-index: 100; /* wrapperより上にかぶってほしい為。数値自体は適当 */
top: 0;
}
#wrapper{
width: 800px;
margin: 0 auto;
background-color: #dbcfc3;
margin-top: 50px;
height: 1300px; /* 縦スクロールを表示したい為 */
}
#header h1, #header ol, #header li,#header img{
margin: 0;
font-size: 17px;
float: left;
}
#header ol{
padding: 0;
list-style-type: none;
}
#header li{
margin-left: 5px;
}
#header a:visited, #header a:link{
color: #DDD;
}
-->
</style>
</head>
<body>
<div id="header">
<img src="" alt="てすと"><!-- srcには高さ50pxの画像を使用予定 -->
<h1>あいうえお</h1><!-- SEO的にH1を使った方がいいとの記述が多い為。サイトタイトルを記入予定 -->
<div>
<ol>
<li><a href="http://www.google.co.jp">google</a></li>
<li><a href="http://www.yahoo.co.jp">yahoo</a></li>
</ol>
</div>
</div>
<div id="wrapper">
content
</div>
</body>
</html>
どんな些細な事でも構わないので、よろしくお願いします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
>詳細度について勉強してみました。
>http://www6.plala.or.jp/go_west/nextcss/ref/basi …
>ここを参照してみましたが、
そのサイトの説明はCSS2です。現在ウェブ標準として認識されているものはCSS2.1です。CSS2.1では、詳細度の値に変更があります。
→6.4.3 Calculating a selector's specificity ( http://www.w3.org/TR/CSS2/cascade.html#specificity )
全称セレクタ,HTMLの要素での指定 詳細度 0
要素セレクタ,擬似要素セレクタ 詳細度 d=1
クラスセレクタ,擬似クラスセレクタ 詳細度 c=1
一意セレクタ 詳細度 b=1
HTMLのstyle要素 詳細度 a=1
つねに、詳細度を含めたプロパティの値,カスケーディング,継承については意識しておかなければなりません。
→Assigning property values, Cascading, and Inheritance ( http://www.w3.org/TR/CSS2/cascade.html )
残念ながら、スタイルシートを説明している多くのサイトは、プロパティの説明に多くを裂いていて、それ以前に知っておかなければならない継承や詳細度の計算を含むカスケーディングについてはほとんど無視されているのが実情です。CSS(カスケーディングスタイルシート)と銘打つくらいカスケーディングは重要ですのに・・・
>一意なので#だけでよいです。
>こちらについても理解できませんでした。#だけでいいとは#{...}という事・・・ではないですよね。
そうです。
#headeは、CSS2では、*#headeと解釈され、詳細度は[ 0 1 0 0 ]となりますが、他のセレクタの指定方法と同じく *#heade[ 0 1 0 0 ]と書くべきなのでしょうが、所詮ページ内に一箇所しかないので、#headで良いかなと。
classはページ内のあちこちに存在しうるので、基本的に記述するほうが良いです。(後々楽と言う意味で)
>もしあっているのならbody{margin:0;}ではなく*{margin:0;}の方がいいように思います。
これは違います。*全称セレクタは、すべての要素セレクタを示しますから、本来継承されないmarginをすべての要素に適用させてしまいますから、まずいです。継承されるプロパティについては、body{font-family:・・・・・}ですべてのbody以下の要素に適用されますから、この場合も書かなくて済む。
よく見かける
*{margin:0;padding:0;}
と言う指定は、ul,ol,dl,blockquote,p・・などの、ブラウザの持つデフォルトスタイルシート(default style sheet)-- http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … --を上書きしてしまいますから、これらが登場すると再設定しなければならなくなります。これはスタイルシートを煩雑にする大きな要因になることは理解できると思います。
基点となるセレクタになりうるのは、*とタイプセレクタです。CSS2では、基点となるセレクタと言う概念が導入されたため、*が追加されたと考えると良いでしょう。
No.1
- 回答日時:
まず、HTMLのほうから
HTML4.01では、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )」と言われながら、(文書)構造を示す要素は無くて、「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )」としか書かれていませんでした。そのため、wraperやcontnt,mail,leftなど、文書構造を付加するとは言い難い==プレゼンテーションの構造を付加するようなclass名が使われていました。その反省からHTML5では、意味的な(セマンティック)な要素が追加されます。その要素名こそ、HTML4.01で想定していた「文書に構造を付加するための」id、classの値です。
すなわち、文書には必ずheaderに当たる部分、section(本文)にあたる部分、footerに当たる部分かあると想定される。
HTML4で、期待されていたclass名が新たな要素として誕生した。
<div class="footer">→<header>
<div class="section">→<section>
<div class="footer">→<footer>
それぞれがどのような意味合いであるかは
★HTML5 における HTML4 からの変更点の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
を参照してください。
<div class="header></div>
<div class="section"></div>
<div class="footer"></div>
が基本的な構造になるはずです。ここで、headerやsection,footerは文書内に何度も登場する可能性があるのでclass名のほうが良いでしょう。idを振るのはリンクターゲットやjavascriptのターゲットとするときに限定したほうが、スタイルシートを記述するとき便利です。(詳細度がc=1・・idだとb=1になってしまう)
DOCTYPEが<!DOCTYPE html>となっていますが、これはHTML5であるのでしたら、stypeにtypeの指定は不要です。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
でなくて、
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
<style type="text/css">
<!--
body{
で良いです。
スタイルシート
CSS2.1がウェブ標準とみなされていますが、CSS2.1では詳細度0の*(全称セレクタ)が導入され、出発点となるセレクタが書かれていない場合は、*があるとみなします。したがって、基点となるセレクタを書く癖をつけておいたほうが良いです。
一意セレクタ(id)を使う場合は、詳細度が高いうえに一意なので#だけでよいです。
続きは後ほど
この回答への補足
HTML4.01からHTML5への移り変わりについてのご説明有難うございます。
hrdear,section,footerの意味合いも勉強します。
>idを振るのはリンクターゲットやjavascriptのターゲットとするときに限定したほうが...
確かにその方がいいように感じます。という事は、基本的にはclass名を設定すべきと思っていいのでしょうか?
詳細度について勉強してみました。
http://www6.plala.or.jp/go_west/nextcss/ref/basi …
ここを参照してみましたが、お恥ずかしい限りですが、知りませんでした。
詳細度が低いものから高いものへと上書きされていくという認識で大丈夫でしょうか?
もしあっているのならbody{margin:0;}ではなく*{margin:0;}の方がいいように思います。(下に書く基点という意味も含め)
ちなみにCSS書かれる際は、この詳細度を意識しながら書かれていますか?
>基点となるセレクタを書く癖をつけておいたほうが良いです。
申し訳ありません。基点となるセレクタがよく分かりません。
詳細度0(*)のセレクタは書くようにすべき=そこが基点となるという事でしょうか?
>一意なので#だけでよいです。
こちらについても理解できませんでした。#だけでいいとは#{...}という事・・・ではないですよね。
長文になってしまいましたが、お時間ある時にまたお付き合い頂けたらと思います。
詳説ありがとうございます。
<!DOCTYPE html>に関してはHTML4.01での記述をするつもりでしたが、自身のテスト用という事で簡略化してしまったものです。申し訳ありません。
また、HTML5では<meta http-equiv...が必要ないとは知りませんでした。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
idの中のid指定
-
HTML要素のid/class名の長さに...
-
透過背景を解除するにはどうす...
-
CSSのクラス名・ID名の指定でワ...
-
CSSの足し算の意味は?
-
brにクラスをつけてcssでdispla...
-
リンクの文字の色の反転につい...
-
htmlのid属性って必要なの?
-
CSSで下まで背景色を伸ばす方法
-
CSSの適用を一部だけ除外したい。
-
スタイルシートで、id属性の中...
-
p要素にclassとspanでclass適応...
-
CSS, リンクの色を一部変えるに...
-
マススポインタがリンクの上に...
-
<span>で2重にかけているものを...
-
CSSに同じclass名がいっぱい‥。...
-
個別にリンクの色を変える方法
-
htmlの文字が縦書きになる
-
htmlのolやulなどlistにtitleや...
-
ボタンをセル内一杯に表示させ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
htmlのid属性って必要なの?
-
最近、HTMLのヘッダーをIDで定...
-
HTML要素のid/class名の長さに...
-
CSSに同じclass名がいっぱい‥。...
-
liリストタグの背景色に色がつ...
-
CSSのクラス名・ID名の指定でワ...
-
サイトにjQueryが使用されてい...
-
ページの左右の余白(枠外)に...
-
CSS, リンクの色を一部変えるに...
-
透過背景を解除するにはどうす...
-
<span>で2重にかけているものを...
-
idの中のid指定
-
display:table-cell内でこんな...
-
CSSが効かずどのように指定すれ...
-
スタイルシートで、id属性の中...
-
【VBA/HTML】IE画面内のページT...
-
brにクラスをつけてcssでdispla...
-
外部css定義したclassをht...
-
CSS内で使われる山括弧の意味が...
おすすめ情報