ムジャリを目指して。

ゲームをこよなく愛す子育て人のTHE雑記

はてなブログ初心者、権守(ゴンモリ)のカスタマイズ!【④文書の区切りに線(罫線)を引く方法について:<hr>タグ】 

どうもです。権守(ゴンモリ)と申します。

今回は文書の区切りとして罫線(横線)を引く方法を紹介します。

罫線とは

 


 ↑のことです。

この罫線を入れることで、文書の区切りがわかりやすくなるのでお勧めです。

 

罫線を入れる方法

 HTML編集モードで実際に罫線を入れたい場所に<hr>とコード(正式にはタグといいます)を書くだけでできます!

 

f:id:mukusaishin:20190104214351p:plain

このブログの最初の罫線のHTML編集画面

 

罫線の幅について

 また、罫線の幅を自由に指定することができます。例えばこんな感じです↓

 


 

幅を設定したい場合は<hr>タグの中にwidth="    "という文字を打ち込み、"     "内に幅を%で指定します。上の罫線は50%の幅に設定しています。そして〇%は皆さんが見ているさまざまな機器の画面の幅に対して〇%の幅となります。(具体的には80%に幅を設定した場合、スマホの画面とパソコンの画面の幅はそれぞれ違いますが、それぞれの画面幅の80%となるように自動で調整してくれます。)

 

f:id:mukusaishin:20190104215025p:plain

HTML編集の画面

 

罫線の位置について

罫線の位置に関しても変更することができます。例えばこんな感じです↓

 


 


 


 

罫線の位置を設定したい場合は<hr>タグの中にalign="   "というコードを打ち込み、
"      " の中に場所を指定する単語を書いていきます。場所を指定する単語は

  • left ⇒ 左揃え
  • center ⇒ 中央揃え
  • right ⇒ 右揃え

となります。

 

f:id:mukusaishin:20190104220204p:plain

HTML編集の画面

 


 

いかがでしたでしょうか?<hr>というタグを追記するだけで罫線を引くことができますので是非試してみてください。

さらに罫線の色や太さ、はたまた線のスタイルまでも変更できるみたいですが、私自身まだ勉強中のため理解出来たら備忘録的に記事を書いてみようと思います。

 

まだまだ勉強することがたくさんあってわくわくしている今日この頃…。

それではまた!