![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
下記URLのサイトのように、HPの外枠に縦線を入れたいのですが、入れ方がわかりません。
URL:http://www.netyasun.com/
(※上記URL内の「水色の背景」と「HP」の境目の青色の境界線(枠線)のことです)
初歩的な質問過ぎて大変申し訳ございませんが、調べてもわからなかったため質問させていただきました。
どなたかご教授願えれば幸いです。
No.3ベストアンサー
- 回答日時:
#1さんへの追加質問
>border-styleを使用して縦線を入れることはできたのですが、
上記記載のURLサイトのように、「水色の背景」と「HP」
の境目に縦線が入るのではなく、HPを開いたときにPC画面
上の、一番右端と左端に縦線が入ってしまいます。
成功しています。
ただ、ブロックレベル要素のルールをご存知ないだけです。
つまり、
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.dt …
<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>
返信が遅くなり大変申し訳ございません。
上記のご助言のおかげで、実現したかったことが100%出来ました。本当にありがとうございました。
私の拙い説明しかない中で、的確なアドバイスをいただきましたので、今回の質問のベストアンサーとさせて頂きます。
No.2
- 回答日時:
文書構造をHTMLにプレゼンテーションをスタイルシートに分担させることで、HTMLの限定的なプレゼンテーションよりはるかに表現が可能になります。
⇒2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
⇒14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
後でゆっくり読んでおいてください。
そのためには、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-html4 … )]より
※あまりにも抽象的で分かりにくかったので、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まで・・
お礼が遅くなり大変申し訳ございません。解決方法だけでなく、参考URLまでご助言いただき、本当にありがとうございます。
今後の学びに役立てさせていただきたいと思います。
毎回、本当に素早くご回答いただきありがとうございます。
No.1
- 回答日時:
この回答への補足
ご回答いただきありがとうございます。また、お礼の返信が遅くなり大変申し訳ございません。
追加で質問なのですが、border-styleを使用して縦線を入れることはできたのですが、上記記載のURLサイトのように、「水色の背景」と「HP」の境目に縦線が入るのではなく、HPを開いたときにPC画面上の、一番右端と左端に縦線が入ってしまいます。
縦線を入れるために「border-style」はbodyに適応しているのですが、適応箇所が間違っていると思うのですが、どこに適応したらよいのか分かりません。
説明が至らなく申し訳ないのですが、ご回答頂けたら幸いです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- DIY・エクステリア 塗料について 1 2023/02/03 11:16
- その他(プログラミング・Web制作) laravel 本番環境でメールが送れません。 1 2023/02/17 17:57
- その他(悩み相談・人生相談) よかったら下記URLの質問を先に見ていただけると幸いです。(長文大変失礼いたします) 説明省きました 1 2022/05/04 18:19
- その他(社会・学校・職場) よかったら下記URLの質問を先に見ていただけると幸いです。(長文大変失礼いたします) 説明省きました 2 2022/05/05 12:40
- JavaScript 【GAS】WEBアプリでハイパーリンクを挿入したい 1 2023/03/12 19:20
- 爬虫類・両生類・昆虫 これは何の虫ですか? 2 2022/09/26 19:54
- gooブログ gooブログへのコメント投稿について 1 2023/05/21 03:52
- docomo(ドコモ) docomoでの機種変更 Google Pixel 6a 11 2022/11/20 12:22
- カードローン・キャッシング ローン審査について 2 2022/12/28 14:50
- Excel(エクセル) 列を自動で追加したい 3 2022/07/11 12:58
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
HTML属性での「""」 「''」違い
-
html5でheaderの中にnav
-
hタグの右横に画像を表示
-
複数のボタンを等間隔に、かつ...
-
要素間、要素内に隙間が空く
-
スペースを使わず文字位置を揃...
-
ヘッダーを左右に二分割する方...
-
<!-- #BeginLibraryItemとは
-
html の divとtable の役割
-
HTMLの文法がめちゃくちゃらし...
-
htmlのolやulなどlistにtitleや...
-
リストで画像を右に表示したい
-
<div id="container">の使いか...
-
min-heightとheightの違いについて
-
HPのレイアウトで縦線を入れ...
-
CSSの三段組みレイアウトについ...
-
フッタの背景画像をリピートxで...
-
一括で全体を右にずらす
マンスリーランキングこのカテゴリの人気マンスリー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
おすすめ情報