- ベストアンサー
ホームページのヘッダー部分の水平線の書き方について
- ホームページのヘッダー部分の水平線は、<hr>タグを使用することが一般的です。
- しかし、<hr>タグを使用しても一番上に隙間が空く場合があります。
- 上記のサイトのように隙間なく表示したい場合は、別の方法を検討する必要があります。
- CSS
- 回答数5
- ありがとう数6
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
＞まずはｈｔｍｌで全体を書いて、その後にデザインをしたほうが、Webサイト作りは覚えやすいのでしょうか？ もちろんです。スタイルシートはブラウザ自体がある程度は持っています。 →HTML 4.0におけるスタイルシートの例 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/sample.html ) 「CSSのfloatとdivについて質問です。 - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7728329.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-html401j/struct/global.html#h-7.5.4 )』 したがって、書き直したHTMLはHTML4.01としても理想的なものになるはずです。 その上で、回答No.2 ( http://okwave.jp/qa/q7728329.html#a2 )に書かれている課題をクリアするようにスタイルシートでデザインする。この積み重ねが最も早く上達する方法でしょう。HTMLには本当に率直に文書構造しか書かない、文書構造がわかりにくいときは、class名で補完する。 その回答例が、 Webサイトにスライディングサイドバーを設置したい - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7728373.html ) にあります。 上にラインを引きたければ、 body{border-top:blue 10px solid;} と書けばすむだけです。 あなたの書かれたHTMLの<head></head>内に <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body{border-top:blue 10px solid;} --> </style> を書き加えるだけで、あなたの希望はかなえられるはずです。HTML本体には一切手を加えずにね。 私が、新入社員に指導している方法を簡単にまとめたものが Webデザインの勉強の仕方 - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7722342.html )への解答に書きました。 ・HTMLは文書構造をマークアップすること ・その文書構造を元にデザインすること うまくデザインできないときは、文書構造がマークアップされていないことが原因 HTMLを見直そう この繰り返しです。特にいずれHTML5が勧告されて多くのブラウザで使えるようになるでしょう。最低でも５年かかると思っています。それまでにはHTML4.01strictを身につけておきましょう。そしたら HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff ) を補習すれば良いでしょう。 なお、HTMLを書いたらこまめに ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) でチェックすることも忘れないように
その他の回答 (4)
- outbrave
- ベストアンサー率60% (231/380)
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>
お礼
補足説明を頂きまして、ありがとうございます！
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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-html401j/present/graphics.html#edef-HR ) 読み上げブラウザは、ここで一呼吸置いて次を読み始めたりします。 なお、ホームページと言うと利用する立場なら良いですが、製作する立場になると混乱の元です。アルページから「ホームページへ戻る」リンクといったらどこに行く意味だと思いますか？ ★ホームページ - Wikipedia ( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8 ) 一切・・本当に一切デザインを考えずにHTMLを書いて見なさい。そのあとでスタイルシートでデザインしましょう。
お礼
ありがとうございます！ 基礎から勉強していこうと思います！！
補足
ありがとうございます。 ヘッダー、タイトル、コンテンツバー、メインコンテンツ、サイドバー、フッダーというように、上から順番に完成させていこうと考えていました。 しかし、ORUKA1951様のご指摘の通り、まずはｈｔｍｌで全体を書いて、その後にデザインをしたほうが、Webサイト作りは覚えやすいのでしょうか？ 私は素人なので、わからないことばかりですが、確かにデザインを考えずにhtmlで全体を書いていったほうが良いような気がしてきました。
- outbrave
- ベストアンサー率60% (231/380)
もしくはボーダーで。 <!DOCTYPE html> <html lang="ja"> <head> <title></title> </head> <body style="margin:0;"> <div style="border-top:solid 8px #66f;"></div> </body> </html>
お礼
ありがとうございます！！
- outbrave
- ベストアンサー率60% (231/380)
ボックスに背景色でいいと思います、<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> そして、この水平線の下に、会社ロゴや文章を表示させたいのですが、中央寄せした水平線の一番左側から表示するにはどうしたら良いのでしょうか？ ソースを書き込んでみたのですが、水平線を超えて一番左から表示されたり、水平線と同じように中央に表示されてしまいます。 最後に、こちらの方法について教えて下さいませ。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ありがとうございます！！ わかりやすくご説明を頂きまして、助かります！！