ホームページのヘッダー部分の水平線の書き方について

解決済

質問者：fujino00
質問日時：2012/10/05 16:56
回答数：5件

素人ながらホームページを作っているのですが、ヘッダー部分の水平線の書き方がわからなくて困っております。

次のサイトのように表示したいと思っております。
http://employment.en-japan.com/
http://career.nikkei.co.jp/index.asp

これらのサイトだと、一番上の水平線が隙間なく表示されております。
これを表示するためのタグは<hr>でよいのでしょうか？
それとも別なタグを用いるのでしょうか？

私は試しに、<hr>を使い水平線を表示させましたが、一番上に隙間が空いてしまいました(><)
すごく初歩的な質問だとは思いますが、わかる方がおりましたら、教えて下さい。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： ORUKA1951
回答日時：2012/10/06 09:10

＞まずはｈｔｍｌで全体を書いて、その後にデザインをしたほうが、Webサイト作りは覚えやすいのでしょうか？

もちろんです。スタイルシートはブラウザ自体がある程度は持っています。
→HTML 4.0におけるスタイルシートの例 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

「CSSのfloatとdivについて質問です。 - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7728329.html#a2 )」にごく簡単なHTMLのソースが上げてあります。
(注意)ソース中<script src="http：//html5shiv.googlecode.com/svn/trunk/html5. …となっている部分はこのシステムの仕組みで省かれていますので、右クリックでリンクをコピーして<script src="http：//html5shiv.googlecode.com/svn/trunk/html5. …">と書き直してください。
(注意)このソースはHTML5で書かれていますので、HTML4.01にする場合は、次のように変更してください。
<!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=UTF-8">
<title>サンプル</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="./sample.css" >
<style type="text/css">

</style>
</head>
　また、HTML5の新しい要素については、それぞれ対応する閉じタグと共に下記のように書き直してください。

＿<header>
・・・【中略】・・・
＿</header>
↓
＿<div class="header">
・・・【中略】・・・
＿</div>

＿＿<nav>
・・・【中略】・・・
＿＿</nav>
↓
＿＿<div class="nav">
・・・【中略】・・・
＿＿</div>

＿<section>
・・・【中略】・・・
＿</section>
↓
＿<div class="section">
・・・【中略】・・・
＿</div>

＿＿<figure class="main">
・・・【中略】・・・
＿＿</figure>
↓
＿＿<div class="figure main">
・・・【中略】・・・
＿＿</div>

＿＿<aside>
・・・【中略】・・・
＿＿<aside>
↓
＿＿<div class="aside">
・・・【中略】・・・
＿＿<div>

＿<footer>
・・・【中略】・・・
＿</footer>
↓
＿<div class="footer">
・・・【中略】・・・
＿</div>

　ちなみにこれらのHTML5の要素は、HTML4.01で使われているはずだったclass名が新しい要素になっただけです。『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　したがって、書き直したHTMLはHTML4.01としても理想的なものになるはずです。

　その上で、回答No.2 ( http://oshiete.goo.ne.jp/qa/7728329.html#a2 )に書かれている課題をクリアするようにスタイルシートでデザインする。この積み重ねが最も早く上達する方法でしょう。HTMLには本当に率直に文書構造しか書かない、文書構造がわかりにくいときは、class名で補完する。

　その回答例が、
Webサイトにスライディングサイドバーを設置したい - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7728373.html )
　にあります。

　上にラインを引きたければ、
body{border-top:blue 10px solid;}
と書けばすむだけです。

　あなたの書かれたHTMLの<head></head>内に
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">

</style>
を書き加えるだけで、あなたの希望はかなえられるはずです。HTML本体には一切手を加えずにね。

　私が、新入社員に指導している方法を簡単にまとめたものが
Webデザインの勉強の仕方 - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7722342.html )への解答に書きました。
・HTMLは文書構造をマークアップすること
・その文書構造を元にデザインすること
　うまくデザインできないときは、文書構造がマークアップされていないことが原因
　HTMLを見直そう

　この繰り返しです。特にいずれHTML5が勧告されて多くのブラウザで使えるようになるでしょう。最低でも５年かかると思っています。それまでにはHTML4.01strictを身につけておきましょう。そしたら
HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
　を補習すれば良いでしょう。

なお、HTMLを書いたらこまめに
★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
でチェックすることも忘れないように

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！！
わかりやすくご説明を頂きまして、助かります！！

通報する

お礼日時：2012/10/14 17:30

No.4

回答者： outbrave
回答日時：2012/10/05 23:15

No.1 への回答です。

線の太さや色は任意に変更してください。

<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
</head>
<body style="margin:0;">
<div style="width:700px;margin:0 auto;">
<div style="border-top:solid 8px #66f;">
<div style="width:300px;float:left">
<img src="" width="200" height="40" align="logo">
</div>
<div style="width:400px;float:left">
なんたら会社
</div>
</div>
<div style="clear:both;border:solid 1px #ccc;">
本文
</div>
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

補足説明を頂きまして、ありがとうございます！

通報する

お礼日時：2012/10/14 17:29

No.3

回答者： ORUKA1951
回答日時：2012/10/05 19:44

HTMLは文書構造しか書きません。

デザインのためにHTMLは一切書いたらダメです。もっとも大事な基本です。
　枠の外にボーダーらしきを引くのは、任意の方法で良いです。
<body>
　<div class="section">
以下略

　でしたら
html,body{margin:0;padding:0;}
body{border-top:aqua solid 4px;}
とかでよいでしょう。

<hr>は、文章がこの前後で明らかに異なるよという意味を持たせるために書きます。--デザインじゃなく意味があるのです。!!
HR要素があると、視覚系ユーザエージェントは罫線をレンダリングする。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　読み上げブラウザは、ここで一呼吸置いて次を読み始めたりします。

　なお、ホームページと言うと利用する立場なら良いですが、製作する立場になると混乱の元です。アルページから「ホームページへ戻る」リンクといったらどこに行く意味だと思いますか？
★ホームページ - Wikipedia ( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC% … )

　一切・・本当に一切デザインを考えずにHTMLを書いて見なさい。そのあとでスタイルシートでデザインしましょう。

この回答への補足

ありがとうございます。

ヘッダー、タイトル、コンテンツバー、メインコンテンツ、サイドバー、フッダーというように、上から順番に完成させていこうと考えていました。

しかし、ORUKA1951様のご指摘の通り、まずはｈｔｍｌで全体を書いて、その後にデザインをしたほうが、Webサイト作りは覚えやすいのでしょうか？

私は素人なので、わからないことばかりですが、確かにデザインを考えずにhtmlで全体を書いていったほうが良いような気がしてきました。

補足日時：2012/10/05 20:41

通報する

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！
基礎から勉強していこうと思います！！

通報する

お礼日時：2012/10/14 17:29

No.2

回答者： outbrave
回答日時：2012/10/05 17:12

もしくはボーダーで。

<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
</head>
<body style="margin:0;">
<div style="border-top:solid 8px #66f;"></div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！！

通報する

お礼日時：2012/10/14 17:28

No.1

回答者： outbrave
回答日時：2012/10/05 17:09

ボックスに背景色でいいと思います、<hr> は区切りですから普通は使いません。

<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
</head>
<body style="margin:0;">
<div style="height:8px;background-color:#66f;"></div>
</body>
</html>

この回答への補足

詳しく教えて頂き、ありがとうございます！
一回だけ補足入力をさせて下さい。

outbrave様から教えて頂いた命令文に、width:700pxを付け加えて<CENTER>と</CENTER>で括り、次のように中央寄せにしました。

<CENTER><div style="height:8px;background-color:#66f;"></CENTER>

そして、この水平線の下に、会社ロゴや文章を表示させたいのですが、中央寄せした水平線の一番左側から表示するにはどうしたら良いのでしょうか？

ソースを書き込んでみたのですが、水平線を超えて一番左から表示されたり、水平線と同じように中央に表示されてしまいます。

最後に、こちらの方法について教えて下さいませ。

補足日時：2012/10/05 19:02

通報する