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

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

ただいまの
回答率

90.36%

  • HTML

    9520questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6169questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4280questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTMLCSSの<hr>について

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 623

revoiot

score 116

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;
}

イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+6

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要素が広いなら擬似要素とか使うのが良いと思います。

<ul class="categorylist">
  <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>
ul.categorylist {
    list-style: outside none none;
    padding: 0;
}
.categorylist li {
    margin: .2em 0;
}
.categorylist li:not(:last-of-type)::after {
    content: '';
    display: block;
    width: 100px;
    border: 1px solid #CCC;
}

動くサンプル:https://jsfiddle.net/roz0c1gv/


ちなみに下記のような書き方も文法違反です。

<ul class="categorylist">
  <li>ネックレス</li>
  <hr>
  <li>全ての商品</li>
</ul>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/14 23:12

    大変わかりやすい回答をしていただきありがとうございます。いただきました回答から、自分の基礎知識がいかにないかを思い知ることができました。今回の回答でXMLからHTML5に変更いたしました。

    しかし、1つだけわからないことがあります。

    "線の幅よりli要素が広いなら擬似要素とか使うのが良いと思います。"とご回答いただいたと思うのですが、完全に理解することができず、困っています。

    擬似要素::before、::afterなどネットで調べたのですが、解決することができませんでした。

    大変恐縮ですが、もう一度ご回答いただけると幸いです。

    宜しくお願いします。

    キャンセル

  • 2017/03/15 02:07

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

    キャンセル

  • 2017/03/15 09:50

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

    キャンセル

+3

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

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            header{
            width:1000px;
            background-color:#7FFFD4;
            margin:auto;
          }
          .categorylist{
            list-style:none;
            text-align:left;
            font-size:12px;
            padding-left:30px;
            width:200px;
          }
          ul li{
              border-bottom:1px dashed black;
              width: 100px;
          }
        </style>
    </head>
    <body>
<div class= "boxall">
  <div align="center" 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>
    <img src="box img/box sidebar/press-news.gif" alt="">
    <img src="box img/box sidebar/search-scene.gif" alt="">
    <img src="box img/box sidebar/search.gif" alt="">
    <img src="box img/box sidebar/free-shipping.gif" alt="">
    <img src="box img/box sidebar/shipping-guide.gif" alt="">
    <img src="box img/box sidebar/blog.gif" alt="">
    <img src="box img/box sidebar/facebook.gif" alt="">
    <img src="box img/box sidebar/twitter.gif" alt="">
    <img src="box img/box sidebar/line.gif" alt="">
    <img src="box img/box sidebar/instagram.gif" alt="">
    <img src="box img/box sidebar/qrcode.gif" alt="">
  </div>
</div>
    </body>
</html>

追記(左寄せ)

ul li{
  border-bottom:1px dashed black;
  width:100px;
  text-align:left;/*ここを修正*/
  list-style:none;
  display:table;
}
/*ここから修正*/
ul {
  display: table;
  padding-left: 0;
}
/*ここまで修正*/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/14 22:08

    質問にご回答いただきありがとうございます。

    大変わかりやすい回答で、大変勉強させてもらっています。

    しかし、1つだけ困ったことがあり、リスト特有の性質なのか、categorylistタグを左に寄せることができません。

    これを改善するためにあらゆる場所に text-align:left;、align:left;、display:;block、display:inline;、などを入力しましたが、うまくいきませんでした。

    大変恐縮ですが、どうすればcategorylistタグを左に寄せることができますでしょうか?




    キャンセル

  • 2017/03/14 22:13

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

    宜しくお願いします。

    キャンセル

  • 2017/03/14 22:31

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

    キャンセル

  • 2017/03/14 23:00 編集

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

    キャンセル

  • 2017/03/15 09:46 編集

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

    キャンセル

  • 2017/03/15 10:04

    ご回答ありがとうございます。

    大変失礼いたしました。次回から</div>のつけ忘れがないように気をつけて参ります。

    追記していただき、ありがとうございます。おかげさまで、左寄せを無事に修正することができました。

    キャンセル

+1

hr{
  border:10px dashed "black";
  width:100px;
 text-align:left;
 margin-left:0px;
  }

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/15 09:42

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

    キャンセル

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

  • ただいまの回答率 90.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • HTML

    9520questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6169questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4280questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。