ベストアンサー

ＨＰのレイアウトで縦線を入れるには？

2013/01/02 03:28

下記ＵＲＬのサイトのように、ＨＰの外枠に縦線を入れたいのですが、入れ方がわかりません。ＵＲＬ：http://www.netyasun.com/ （※上記ＵＲＬ内の「水色の背景」と「ＨＰ」の境目の青色の境界線（枠線）のことです）初歩的な質問過ぎて大変申し訳ございませんが、調べてもわからなかったため質問させていただきました。どなたかご教授願えれば幸いです。

ryou09160528
お礼率55% (5/9)

HTML
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

DrFell
ベストアンサー率55% (305/551)

2013/01/04 07:04 回答No.3

#1さんへの追加質問＞border-styleを使用して縦線を入れることはできたのですが、　上記記載のＵＲＬサイトのように、「水色の背景」と「ＨＰ」　の境目に縦線が入るのではなく、ＨＰを開いたときにＰＣ画面　上の、一番右端と左端に縦線が入ってしまいます。成功しています。ただ、ブロックレベル要素のルールをご存知ないだけです。つまり、 1.幅を指定しなければ、100％が初期値となるルール。 →だから、右端と左端になります。 2.ブロックレベルの高さを指定しないと中身に合わせて高さが変化するルール。 →中身がないと（実験しただけで中身を入れていない？）高さがないので、上に少しだけという状態になります。中身を増やしてみましょう。高さをheightで指定する方法もありますが、中身がその指定値を超えた時にデザインがおかしくなりますので、お勧めしません。＞縦線を入れるために「border-style」はbodyに適応している　のですが、適応箇所が間違っていると思うのですが、どこに　適応したらよいのか分かりません。 bodyにでもいいと思いますが、どこに適応したらいいのかは、htmlを見せてもらわないとわかりません。とりあえずbodyに入れるとして作ってみると <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift-jis" /> <title>test</title> <style type="text/css"> html{ background: #D9E5FF;margin:0;/*青の背景色*/ } body{ margin:0 auto;/*上下をぴったり、左右は真ん中*/ width:880px;/*bodyの幅の指定「ルール1への対応」*/ padding: 0 1em;/*罫線から中身までの空き*/ background: white;/*背景色*/ color: #555;/*文字の色*/ border: solid blue;/*罫の形と色*/ border-width: 0 1px;/*罫の幅、上下が0、左右が1px*/ } body>*{ margin:0;/*bodyの直接の子要素のマージン。本当は望ましくないが、先頭に何が来るのか不明なので*。*/ } </style> </head> <body> <p>中身をいろいろ入れてください。縦に中身が広がると罫も延びるのがわかると思います。</p> </body> </html>

質問者

お礼 2013/01/04 13:23

返信が遅くなり大変申し訳ございません。上記のご助言のおかげで、実現したかったことが１００％出来ました。本当にありがとうございました。私の拙い説明しかない中で、的確なアドバイスをいただきましたので、今回の質問のベストアンサーとさせて頂きます。

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/01/02 19:20 回答No.2

文書構造をHTMLにプレゼンテーションをスタイルシートに分担させることで、HTMLの限定的なプレゼンテーションよりはるかに表現が可能になります。　⇒2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) 　⇒14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) 　後でゆっくり読んでおいてください。　そのためには、HTMLが文書構造をきちんとマークアップしていないと不可能です。　たとえば、HTML5では、articleという要素があるため <body> 　<article> 　　<header> 　　</header> 　　<section> 　　　本文記事　　</section> 　　<footer> 　　</footer> 　</article> </body> のようにマークアップされます。 HTML4.01だと <body> 　<div class="article"> 　　<div class="header"> 　　</div> 　　<div class="section"> 　　　本文記事　　</div> 　　<div class="footer"> 　　</div> 　</div> </body> のようにマークアップされてきた部分ですね。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より ※あまりにも抽象的で分かりにくかったので、HTML4で想定さていたclass名がHTML5では要素として独立しました。だとすると簡単ですね。 body{background-color:aqua;} body>article{ width:90%;margin:0 auto; max-width:1000px;min-width:640px; border:solid blue 1px;baxkground-colr:white; } で期待通り？になるはずです。・スマホのような小さな画面では640pxまで、通常はディスプレイの90%、幅広ディスプレイでは1000pxまで・・

質問者

お礼 2013/01/04 13:26

お礼が遅くなり大変申し訳ございません。解決方法だけでなく、参考ＵＲＬまでご助言いただき、本当にありがとうございます。今後の学びに役立てさせていただきたいと思います。毎回、本当に素早くご回答いただきありがとうございます。

aky_nil
ベストアンサー率46% (94/203)

2013/01/02 03:56 回答No.1

スタイルシートを利用しています。このあたりかと。 http://park16.wakwak.com/~html-css/css/css_19.html

質問者

補足 2013/01/02 15:30

ご回答いただきありがとうございます。また、お礼の返信が遅くなり大変申し訳ございません。追加で質問なのですが、border-styleを使用して縦線を入れることはできたのですが、上記記載のＵＲＬサイトのように、「水色の背景」と「ＨＰ」の境目に縦線が入るのではなく、ＨＰを開いたときにＰＣ画面上の、一番右端と左端に縦線が入ってしまいます。縦線を入れるために「border-style」はbodyに適応しているのですが、適応箇所が間違っていると思うのですが、どこに適応したらよいのか分かりません。説明が至らなく申し訳ないのですが、ご回答頂けたら幸いです。

ＨＰのレイアウトで縦線を入れるには？