締切済み

htmlで画面の端から端まで線を入れる方法。

2024/08/31 15:58

ホームページに区切り線？仕切り線？を入れようと、htmlタグ（hr）を入力したのですが、画面の端から端まで線が入っていません。（両サイドが空いています。）画面の端から端まで途切れなく線を入れるにはどうしたらいいでしょうか？また、仕切り線と仕切り線のちょうど真ん中に文字を入れたいのですが、どうすればよいでしょうか？よろしくお願い致します。

yuirin08
お礼率14% (20/142)

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

みんなの回答

retorofan
ベストアンサー率34% (437/1283)

2024/08/31 17:45 回答No.1

＞htmlタグ（hr）を入力したのですが、画面の端から端まで線が入っていません。（両サイドが空いています。）ー＞どうしてそうなるのかというと、ブラウザにはデフォルト値、すなわち、あらかじめ設定されている値（仕様）が効いているためです。＞画面の端から端まで途切れなく線を入れるにはどうしたらいいでしょうか？ー＞マージンのデフォルト値を無効化すればいいのです。＞また、仕切り線と仕切り線のちょうど真ん中に文字を入れたいのですが、どうすればよいでしょうか？ー＞文字（テキスト）をセンタリングすればいいです。 HTMLソース・サンプル <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>サンプル</title> <style> body { margin: 0; /* 両サイドの余白をなくす */ } hr { border: none; border-top: 2px solid red; /* 線の色と太さを指定 */ width: 100%; /* 幅を100%に設定 */ } div.center { text-align: center; } </style> </head> <body> <hr> <div class="center">真ん中</div> <hr> </body> </html>