HTMLCSSの＜hr＞について

websiteを作るなかで分からないことが出てきたため、質問させていただきます。

下記のHTMLコードを見ていただくとわかる通り、

<hr width="100px" align="left"><li>単語</li> と入力されていますが、<hr width="100px" align="left">の数がおおく、widthの値を変更したい時、手間がかかってしまいます。

改善策として、hrの部分のwidthとalignをcssに書きましたがうまくいきません。

hrのwidthとalignを簡潔に書く方法がありましたら、ご教授頂けないでしょうか？

大変恐縮ですが、よろしくお願いします。

HTML

<div class= "boxall">
  <div class="boxsidebar">
    <img src="box img/box sidebar/search-in.gif" alt="">
    <img src="box img/box sidebar/category.gif" alt="">
    <div class="categorylist">
      <ul>
        <li>ネックレス</li>
        <li>リング</li>
        <li>ピンキーリング</li>
        <li>ピアス</li>
        <li>ブレスレット</li>
        <li>チャーム</li>
        <li>チェーン</li>
        <li>メンズ</li>
        <li>キャンドル</li>
        <li>ボックスフラワー<br>ブリザーブドフラワー</li>
        <li>ワンピース</li>
        <li>クローズ</li>
        <li>その他</li>
        <li>全ての商品</li>
      </ul>
    </div>

CSS

@charset "utf-8";

header{
  width:1000px;
  background-color:#7FFFD4;
  margin:auto;
}

.categorylist{
  list-style:none;
  text-align:left;
  font-size:12px;
  width:200px;
  display:table;
  padding-left:0;
}

ul li{
  border-bottom:1px dashed black;
  width:100px;
  align:left;
  list-style:none;
  display:table;
}
ul {
  align:left;
}
.maincontents{
  float:right;
  width:770px;
  background-color:#FFB6C1;
  margin:auto;
}
.boxsidebar{
  float:left;
  background-color:#228b22;
  width:230px;

}
.boxall{
  width:1000px;
  margin:auto;
}

行動規範の内容に同意します

回答3件

ベストアンサー

HTMLの文法的におかしなところが何箇所かあります。

【hr 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/hr

align 非推奨 HTML4.01 廃止 HTML5

width 非推奨 HTML4.01 廃止 HTML5

【li 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/li

許可された親要素 <ul>、<ol>、<menu>

普通はli要素に border を付けますが、線の幅よりli要素が広いなら擬似要素とか使うのが良いと思います。

HTML
1<ul class="categorylist">
2  <li>ネックレス</li>
3  <li>リング</li>
4  <li>ピンキーリング</li>
5  <li>ピアス</li>
6  <li>ブレスレット</li>
7  <li>チャーム</li>
8  <li>チェーン</li>
9  <li>メンズ</li>
10  <li>キャンドル</li>
11  <li>ボックスフラワー<br>ブリザーブドフラワー</li>
12  <li>ワンピース</li>
13  <li>クローズ</li>
14  <li>その他</li>
15  <li>全ての商品</li>
16</ul>

CSS
1ul.categorylist {
2    list-style: outside none none;
3    padding: 0;
4}
5.categorylist li {
6	margin: .2em 0;
7}
8.categorylist li:not(:last-of-type)::after {
9	content: '';
10	display: block;
11	width: 100px;
12	border: 1px solid #CCC;
13}
14```**動くサンプル：**[https://jsfiddle.net/roz0c1gv/](https://jsfiddle.net/roz0c1gv/)
15
16---
17
18
19ちなみに下記のような書き方も文法違反です。
20
21```HTML
22<ul class="categorylist">
23  <li>ネックレス</li>
24  <hr>
25  <li>全ての商品</li>
26</ul>

投稿2017/03/13 02:40

kei344

総合スコア69407

revoiot

2017/03/14 14:12

大変わかりやすい回答をしていただきありがとうございます。いただきました回答から、自分の基礎知識がいかにないかを思い知ることができました。今回の回答でXMLからHTML5に変更いたしました。しかし、1つだけわからないことがあります。 "線の幅よりli要素が広いなら擬似要素とか使うのが良いと思います。"とご回答いただいたと思うのですが、完全に理解することができず、困っています。擬似要素::before、::afterなどネットで調べたのですが、解決することができませんでした。大変恐縮ですが、もう一度ご回答いただけると幸いです。宜しくお願いします。

kei344

2017/03/14 17:07

> もう一度ご回答いただけると幸いです。何をでしょうか？何がどうわからないのかをもう少し説明してください。

revoiot

2017/03/15 00:50

失礼しました。先ほど、擬似要素について詳しく調べた結果、解決することができました。ありがとうございました。

行動規範の内容に同意します

下線をつけたいのであれば、下記の様にli属性に対してに下線をつける方が良いと思います。

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <title>TODO supply a title</title>
5        <meta charset="UTF-8">
6        <meta name="viewport" content="width=device-width, initial-scale=1.0">
7        <style type="text/css">
8            header{
9            width:1000px;
10            background-color:#7FFFD4;
11            margin:auto;
12          }
13          .categorylist{
14            list-style:none;
15            text-align:left;
16            font-size:12px;
17            padding-left:30px;
18            width:200px;
19          }
20          ul li{
21              border-bottom:1px dashed black;
22              width: 100px;
23          }
24        </style>
25    </head>
26    <body>
27<div class= "boxall">
28  <div align="center" class="boxsidebar">
29    <img src="box img/box sidebar/search-in.gif" alt="">
30    <img src="box img/box sidebar/category.gif" alt="">
31    <div class="categorylist">
32        <ul>
33            <li>ネックレス</li>
34            <li>リング</li>
35            <li>ピンキーリング</li>
36            <li>ピアス</li>
37            <li>ブレスレット</li>
38            <li>チャーム</li>
39            <li>チェーン</li>
40            <li>メンズ</li>
41            <li>キャンドル</li>
42            <li>ボックスフラワー<br>ブリザーブドフラワー</li>
43            <li>ワンピース</li>
44            <li>クローズ</li>
45            <li>その他</li>
46            <li>全ての商品</li>            
47        </ul>
48    </div>
49    <img src="box img/box sidebar/press-news.gif" alt="">
50    <img src="box img/box sidebar/search-scene.gif" alt="">
51    <img src="box img/box sidebar/search.gif" alt="">
52    <img src="box img/box sidebar/free-shipping.gif" alt="">
53    <img src="box img/box sidebar/shipping-guide.gif" alt="">
54    <img src="box img/box sidebar/blog.gif" alt="">
55    <img src="box img/box sidebar/facebook.gif" alt="">
56    <img src="box img/box sidebar/twitter.gif" alt="">
57    <img src="box img/box sidebar/line.gif" alt="">
58    <img src="box img/box sidebar/instagram.gif" alt="">
59    <img src="box img/box sidebar/qrcode.gif" alt="">
60  </div>
61</div>
62    </body>
63</html>
64

###追記(左寄せ)

CSS
1ul li{
2  border-bottom:1px dashed black;
3  width:100px;
4  text-align:left;/*ここを修正*/
5  list-style:none;
6  display:table;
7}
8/*ここから修正*/
9ul {
10  display: table;
11  padding-left: 0;
12}
13/*ここまで修正*/

投稿2017/03/13 02:47

編集2017/03/15 00:49

motuo

総合スコア3027

revoiot

2017/03/14 13:08

質問にご回答いただきありがとうございます。大変わかりやすい回答で、大変勉強させてもらっています。しかし、1つだけ困ったことがあり、リスト特有の性質なのか、categorylistタグを左に寄せることができません。これを改善するためにあらゆる場所に　text-align:left;、align:left;、display:;block、display:inline;、などを入力しましたが、うまくいきませんでした。大変恐縮ですが、どうすればcategorylistタグを左に寄せることができますでしょうか？

revoiot

2017/03/14 13:13

上記の質問欄を編集して、HTMLCSSコードの編集、画像の追加、XMLからHTML５に変更させていただきました。宜しくお願いします。

8-0_nyan5

2017/03/14 13:31

ブラウザのデベロッパーツールなどで確認すればなぜ左に寄らないかがわかると思いますよ。

revoiot

2017/03/14 14:00 編集

ご回答ありがとうございます。大変恐縮ですが、デベロッパーツールを用いても、解決することができませんでした。

motuo

2017/03/15 00:47 編集

単純に左寄せするだけでよければ…追記をご確認ください。あと、添付してもらったhtmlは</div>が2つ足りませんでしたが、大丈夫ですよね？

revoiot

2017/03/15 01:04

ご回答ありがとうございます。大変失礼いたしました。次回から</div>のつけ忘れがないように気をつけて参ります。追記していただき、ありがとうございます。おかげさまで、左寄せを無事に修正することができました。

行動規範の内容に同意します

css
1hr{
2  border:10px dashed "black";
3  width:100px;
4 text-align:left;
5 margin-left:0px;
6  }
7

hrがclassになってるから外してみた。

追記
おそらくやりたいことはulのところにpadding-left:0;なのかなと思います。

投稿2017/03/13 02:31

編集2017/03/14 14:41

toutou

総合スコア2050

revoiot

2017/03/15 00:42

ご回答ありがとうございます。左に寄せることができました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

HTMLCSSの＜hr＞について

関連した質問