素人ながらホームページを作っているのですが、ヘッダー部分の水平線の書き方がわからなくて困っております。
次のサイトのように表示したいと思っております。
http://employment.en-japan.com/
http://career.nikkei.co.jp/index.asp
これらのサイトだと、一番上の水平線が隙間なく表示されております。
これを表示するためのタグは<hr>でよいのでしょうか?
それとも別なタグを用いるのでしょうか?
私は試しに、<hr>を使い水平線を表示させましたが、一番上に隙間が空いてしまいました(><)
すごく初歩的な質問だとは思いますが、わかる方がおりましたら、教えて下さい。
No.5ベストアンサー
- 回答日時:
>まずはhtmlで全体を書いて、その後にデザインをしたほうが、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">
<!--
body{border-top:blue 10px solid;}
-->
</style>
を書き加えるだけで、あなたの希望はかなえられるはずです。HTML本体には一切手を加えずにね。
私が、新入社員に指導している方法を簡単にまとめたものが
Webデザインの勉強の仕方 - Webデザイン・CSS - 教えて!goo ( http://oshiete.goo.ne.jp/qa/7722342.html )への解答に書きました。
・HTMLは文書構造をマークアップすること
・その文書構造を元にデザインすること
うまくデザインできないときは、文書構造がマークアップされていないことが原因
HTMLを見直そう
この繰り返しです。特にいずれHTML5が勧告されて多くのブラウザで使えるようになるでしょう。最低でも5年かかると思っています。それまでには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 )
でチェックすることも忘れないように
No.4
- 回答日時:
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>
No.3
- 回答日時:
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様のご指摘の通り、まずはhtmlで全体を書いて、その後にデザインをしたほうが、Webサイト作りは覚えやすいのでしょうか?
私は素人なので、わからないことばかりですが、確かにデザインを考えずにhtmlで全体を書いていったほうが良いような気がしてきました。
No.1
- 回答日時:
ボックスに背景色でいいと思います、<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>
そして、この水平線の下に、会社ロゴや文章を表示させたいのですが、中央寄せした水平線の一番左側から表示するにはどうしたら良いのでしょうか?
ソースを書き込んでみたのですが、水平線を超えて一番左から表示されたり、水平線と同じように中央に表示されてしまいます。
最後に、こちらの方法について教えて下さいませ。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP PHP MySql ページング 2 2022/09/20 06:38
- PHP if(preg_match("/[^0-9]/",$gu_d)){意味を教えてください。 1 2022/05/06 05:37
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- レトロゲーム ファミコンのインベーダー。なぜ左右に動けるのか? 1 2022/07/05 14:19
- 作詞・作曲 映画『二百三高地』の主題歌【防人の詩】は線状降水帯による土砂崩れや河川氾濫の危険を唱えた歌詞ですか? 2 2022/05/30 21:35
- 格安スマホ・SIMフリースマホ E-SIM電話番号不明表示 1 2023/07/23 19:48
- 物理学 電磁気学の問題がわかりません。 3 2023/07/20 22:13
- JavaScript 空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで 表示されるアラ 1 2022/05/20 11:16
- Word(ワード) Microsoft Word2023で、修正箇所を表示させたい 1 2023/02/09 10:07
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
CSSで、contentsがfooterに重な...
-
画面を縮小するとカラムが落ち...
-
min-heightとheightの違いについて
-
h1のテキストサイズよりh2の方...
-
<!-- #BeginLibraryItemとは
-
何もいじってないのに、表示崩...
-
<div>テキスト</div>
-
CSSで画像を下に配置
-
html5でheaderの中にnav
-
ローカルとWeb上で見え方が違う...
-
iframeを使わずに上下50%ずつに...
-
セクションをdivで囲むと見出し...
-
RMS レフトナビ問題
-
要素間、要素内に隙間が空く
-
cssにてボタン位置を下揃えしたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
要素間、要素内に隙間が空く
-
画面を縮小するとカラムが落ち...
-
スペースを使わず文字位置を揃...
-
h1のテキストサイズよりh2の方...
-
divの中に外部のHTMLを埋め込む
-
<!-- #BeginLibraryItemとは
-
hタグの右横に画像を表示
-
グリッドレイアウトで"auto-fit...
-
セクションをdivで囲むと見出し...
-
html5でheaderの中にnav
-
開閉式の隠し要素が一瞬表示さ...
おすすめ情報