ホームページのヘッダー部分の水平線の書き方について
- ホームページのヘッダー部分の水平線は、<hr>タグを使用することが一般的です。
- しかし、<hr>タグを使用しても一番上に隙間が空く場合があります。
- 上記のサイトのように隙間なく表示したい場合は、別の方法を検討する必要があります。
- ベストアンサー
ホームページのヘッダー部分の水平線の書き方について
素人ながらホームページを作っているのですが、ヘッダー部分の水平線の書き方がわからなくて困っております。 次のサイトのように表示したいと思っております。 http://employment.en-japan.com/ http://career.nikkei.co.jp/index.asp これらのサイトだと、一番上の水平線が隙間なく表示されております。 これを表示するためのタグは<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> そして、この水平線の下に、会社ロゴや文章を表示させたいのですが、中央寄せした水平線の一番左側から表示するにはどうしたら良いのでしょうか？ ソースを書き込んでみたのですが、水平線を超えて一番左から表示されたり、水平線と同じように中央に表示されてしまいます。 最後に、こちらの方法について教えて下さいませ。
関連するQ&A
- 水平線hrの位置 CSS
スタイルシートcssについて 大きい文字h2などの下に、水平線hrを表示させたいです。 しかし、水平線と上にある文字の間にある空白が大きすぎて不自然です。（h2のせいだと思います） どのようにすれば、空白を埋める事ができますか？ よろしくお願いします。
- ベストアンサー
- HTML
- FC2のヘッダを固定
FC2でブログをやっています。 早速質問なのですが、ヘッダーを固定して常に表示させていたいんですが、CSS、htmlタグをどうしたらいいかわりません… タグ初心者な上に頭が悪いのでわからないことだらけです。 あとヘッダーにカテゴリーを入れるのは不可能なんでしょうか？ できればヘッダーにカテゴリーを入れて固定して常に表示させていたいです。 http://www.css-lecture.com/log/css/047.html こちらに書いてあるやり方を試したのですがうまくいかず… 理想はこちらのデモページのようにすることです。 説明下手ですみません。よろしくお願いいたします。
- 締切済み
- ブログ
- HP作成において、隙間が出来てしまう。
携帯サイトをロリポップにて運営しているのですが、 例えば (1)<hr color=#777777 width=100% size=2> (2)<table width=100%><marquee bgcolor=#000000><font size=2><font color=#ffffff>文章</font></marquee></table> (3)<hr color=#777777 width=100% size=2> ((1)(2)(3)は分かり易くする為書き込んでいます。実際はありません) 上記のようなタグを書き込むと、(1)の<hr>と(2)のmarquee bgcolorの間に若干隙間が出来ているのです。隙間の0.2ミリくらいが白くなってしまい不格好になってしまいます。 公式サイトなどを閲覧してみると隙間などは全く無く、綺麗に設計されているので、隙間さえなくせれば少しは見栄えがつくのですが… 私のような勝手サイトでは上記のような隙間をうめることは出来ないのでしょうか？他の勝手サイトも隙間が出来ています。 どなたか隙間を埋める方法をご存知の方は教えて頂けると幸いです。 よろしくお願い致します。
- ベストアンサー
- その他([技術者向] コンピューター)
- ヘッダーの上にほんのわずかに隙間ができる
ウェブサイト製作の練習をしております。解決できないことがあり、質問させていただきます。 ヘッダーボックスにmargin topを設定していないにも関わらず、ヘッダーボックス上にほんのわずかに隙間ができてしまいます（1～2px程度です）。ヘッダーボックスにCSSで設定しているのは margin-left:auto; margin-right:auto; width:1000px; のみです。 bodyにはなにも設定しておりません。ちなみにIEのバージョンは8でございます。宣言は・・・ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="”Content-Type”" content="”text/html;" charset="utf-8”" /> でございます。教えてgooのトップ（http://oshiete.goo.ne.jp/）も一番上（"質問&回答 (Q&A) コミュニティ - 教えて！goo"のところです）は画面上部にぴったりくっついていますよね。どうすればこのような形にできるのでしょうか？どなたかアドバイスをお願いします。
- ベストアンサー
- HTML
- Webデザイナーの転職におすすめの求人サイトを教えてください！
都内の制作会社で、Webデザイナーとして勤務している26歳（♀）です。 アシスタントから始めて約５年の実務経験があるのですが、近いうちに転職を考えています。 具体的な退職時期は決めていませんが、とりあえず情報収集だけでも開始してみようかなと思い、求人サイトをピックアップしてみました。ただ、すべてをチェックするのは効率が悪いと思うので、いくつかのサイトに絞って会員登録しようと思っています。 Find Job! http://www.find-job.net/ イーキャリア http://www.ecareer.ne.jp/search/search.do?jobTypeMCat=1450&s=mrk_li_ov_ec_BB5970 クリエイティブキャリア http://www.c-career.jp/ 広告転職 http://www.koukokutenshoku.com/ ITワーク http://www.itwork.jp/ リクナビNEXT http://rikunabi-next.yahoo.co.jp/rnc/ マイナビ転職 https://tenshoku.mynavi.jp/ ［en］社会人の転職情報 https://employment.en-japan.com/ このなかで、おすすめのサイト、あるいはおすすめしないサイトがあれば是非教えてください（理由も教えて頂けると大変ありがたいです）！ また、これ以外にもおすすめのサイトがあったら、ぜひ教えて頂きたいです。 よろしくお願いします！
- 締切済み
- 転職
- 画面100％表示のトップページ用ヘッダーがうまくできません
body{height:100%; width:100%; margin:0; padding:0;} として、フッターまでの表示が画面１００％になるように作っているのですが・・。 ヘッダーのスタイルシートを↓↓ #header{width:100%;height:100px:"} として(フォント・背景色等、質問に関係ないと思われるタグは抜いております。）、幅１００％、高さ１００pixにしているのですが・・ 中に記載したい文字を配置しようと、 この#header に上、左、パディングを設定すると、その分下や右にもヘッダーが伸びてしまいます。 センターではなく、左側に余白を設け、下の方に文字を配置したいのですが・・どうすればいいでしょうか？？
- ベストアンサー
- HTML
- キャリア別のHTMLを出力する
PHPにてモバイル用のサイトを作ろうと思っています。 如何せん共通化されていないので(昔ほどでは無いですが)まだまだキャリア別のページを作る必要があるのかなと思っています。 リダイレクトでページを分けるとそれぞれ作らないといけないので良い方法を模索しているのですがどのような方法が良いか。 以下のような方法を考えましたが如何でしょうか。 HTMLクラス(基盤) DoCoMoHTMLクラス(HTMLクラスを継承) AuHTMLクラス(HTMLクラスを継承) SoftBankHTMLクラス(HTMLクラスを継承) ページにアクセス時にキャリアごとのHTMLクラスを生成する。 HTMLクラスにはspanタグやdivタグ等のメソッドがあり、それを利用してHTMLとして表示する部分を作っていく。 作ったHTMLを出力する。 $html = Common :: getHTML(); // getHTMLでキャリア判別して new DoCoMoHTML();等を返す // このメソッドはDoCoMoHTMLクラス // <div style="color:#000000;">あいうえ print $html -> div ( "#000000", "あいうえ" ); // </div> print $html -> div(); // <hr>このメソッドはHTMLクラス print $html -> hr(); 基本的な共通タグはHTMLクラスにもって共通では適用できないタグはサブクラスにて実装するようにする。 こうすることによって1ソースでキャリアを意識せずに作ることが可能と思っています。 (細かいところは調整が必要になるかと思いますが) 方法はいろいろありそうですが何か良い案はありませんでしょうか。
- 締切済み
- PHP
- 時間外手当（30時間超過分から支給）ってどういうことですか
時間外手当（30時間超過分から支給）ととある求人票を見たら書いてあったのですが、これはどういった意味になるのでしょうか？30時間までは残業代出ませんよ、それ以上やったら残業代は支給しますということでしょうか。年俸制ではないので、残業代が出ないと違法のような気がするのですが、どうなんでしょうか？ https://employment.en-japan.com/search/desc_job.cfm?PK=B44EED6D%2DE3CC%2D6BF7%2DDC6326B2F7B73005 ここのサイトになります。
- ベストアンサー
- その他（就職・転職・働き方）
- <hr>の縦バージョンはありますか？
現在HTML言語を使用してホームメイドなサイトを構築しているのですが <hr>・・・横長の区切り線 ですよね？ これを縦にした表示がしたいのですが、どうすればよろしいでしょうか？ 恐れ入りますが、そのようなタグが存在するようならば、タグを教えていただけないでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- 携帯電話のHTMLで点線の水平線を表示するには
ある携帯サイト(例えばモバゲータウンの「みんなの日記」など）では１まとまりの文書ブロックの区切りを示すために点線の水平線が使われています。 これはどのように表示するのでしょうか？ PCのHTMLの場合は<div>に対してborder-style:dotted;などで設定できるのですが、iモードの<div>ではこのスタイルシートプロパティには対応していないようです。<hr>に対してborder-style:dotted;を設定してみたのですがダメでした。 まさか画像ということはないと思うのですが、どなたかわかる方いませんか？ モバゲータウンはPC上のシミュレータからはアクセスできないのでHTMLソースが読めません。また携帯でHTMLソースを見る方法ってあります？
- ベストアンサー
- HTML
お礼
ありがとうございます！！ わかりやすくご説明を頂きまして、助かります！！