hrタグにはwidth指定可能。点線にして左端に寄せる

CSS

作成例

　状態:結論(後で見返す用) 　閲覧数:2,204 　投稿日:2017-07-15 　更新日:2023-02-13
hrタグにwidth指定して点線表示
・中央表示
header hr{

  width: 25em;

  border: none;

  border-top: 1px dashed #bbb;

}

hr{

  border:none;

  border-top:dashed 1px #9E9E9E;

  height:1px;

  color:#FFFFFF;

  width:50rem;

}


左端に寄せる
・text-align:left;
・インライン → ブロック要素変更指定
hr{

  border:none;

  border-top:dashed 1px #9E9E9E;

  height:1px;

  color:#FFFFFF;

  width:50rem;

  text-align:left;

  display:inline-block;

}


width指定は%の方が良いと思われ
・モバイルでレイアウト崩れが発生
・<hr>にwidth指定したことを忘れていたため、原因解決に手間取る
→ 修正後コード
・article hr{

  border:none;

  border-top:dashed 1px #9E9E9E;

  height:1px;

  color:#FFFFFF;

  width:90%;

  text-align:center;

  display:block;

}



・水平線＜hr＞を点線にしたい

resizeプロパティ

margin相殺 ／ 水平方向では発生しない。「position:absolute;」「position:fixed;」指定した要素では全く発生しない



類似度ページランキング
順位 ページタイトル抜粋 ％
1 hrタグにはwidth指定可能。点線にして左端に寄せる 89
2 指定兄弟要素(h1～h5タグ何れか)のmarginを取得して、指定要素に適用させたい 32
3 trタグにborder 32
4 一つの要素に対して「id 属性値」を複数指定することは出来ない 31
5 resizeが効かない場合は、min-heightを設定してみる 31
6 HTMLで「1つのタグにidを複数指定」は出来ない！ 30
7 「z-index」が効かない時は「-1」を指定してみる 30
8 trタグに背景色 29
9 Chromeがおかしくなった。width認識が狭くなりレイアウトが崩れる 29
10 borderプロパティでは、線のスタイル・太さ・色について上下左右バラバラの指定を一括することは出来ない 28
11 navタグで定義している部分だけCSSが効かない【html5】 28
12 font-familyには游ゴシックを指定しない 27
13 レスポンシブの margin と width 設定 27
14 サムネイル画像にpadding指定してはいけない。特に文字列を埋め込んだ画像では 27
15 拡張機能が Chrome によって無効にされました ／ この拡張機能は破損している可能性があります。 26
16 Twitter ヘッダー画像は、Fireworks CS3 で作成している 25
17 「position:fixed;」指定した要素を中央寄せするためには、「left:50%;transform:translateX(-50%);」を追記します。 24
18 divタグがdisplay:block;とかしても、ブロック要素にならないときは、 24
19 SVGの色指定は、「枠線 stroke」と「内部 fill」の2種類 23
20 画像を小さくトリミングして綺麗にみせるため、PhotoShop CS3 で色調補正する 23
2026/8/21 16:36 更新
週間人気ページランキング ／ 8-14 → 8-20
順位 ページタイトル抜粋 アクセス数
1 Design 0 5
2 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 4
3 Adobe Camera Raw 4.0 | Photoshop 3
3 PNG画像透明化問題 | 画像 3
3 Chromeで(TikTokなど)特定Webサイトの音を消すには、該当タブを右クリック後、「サイトをミュート」をクリックします。 | Google Chrome(ブラウザ) 3
3 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく | CSSトラブル対応(CSS) 3
4 「Google Chrome」を経由したダウンロード個人ルール。「HTTrack Website Copier」とパッケージ化されていない拡張機能「Save As MHT 20220426」の 2 種類 | Google Chrome(ブラウザ) 2
4 8ビットカラー ／ インデックスカラー ／ パレットカラー 2
4 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 2
4 鉄道会社毎のカラーコード | カラーコード(色) 2
4 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 2
4 Chromeブラウザは、ユーザーという単位で情報管理している(Cookieを使用する場面もあるが、必ずしもCookieだけに頼っているわけではない) | Google Chrome(ブラウザ) 2
4 コンソールエラー ／ ブラウザ間差異 | ブラウザ 2
4 「transform:translate3d();」でスマホ実機画面が一瞬だけチラつく → 「backface-visibility:hidden;」指定すると解消される | CSSトラブル対応(CSS) 2
4 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 2
5 このエントリーの結論 ／ 主な機能と使い方 ／ 補足 1
5 Material Design 2014 年 | Material Design(色) 1
5 invalid property value css background-color | CSS 1
5 不特定多数投稿 1
5 ボタンクリック出来ない → 「display-inline;」を「display:inline-block;」へ変更 | CSSトラブル対応(CSS) 1
2026/8/21 5:05 更新