HTMLスキル - 第7章 Lesson5

横罫線を表示する<hr>タグの書き方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

横罫線を表示するための<hr>タグの書き方を、初心者向けに解説しています。



この動画で学べること

・<hr>タグの使い方



<hr>タグを使って罫線を表示させる方法

文章の中に罫線を入れる<hr>タグについて見ていきましょう。
<hr>は<br>と同じく空要素なので、終了タグがありせん。
そのため、/(スラッシュ)を入れて終了タグがないことを示す書き方をします。
前回の表示させた画像の次と、「カプチーノの入れ方」の次に罫線を入れてみましょう。



<p>
<img src="images/menu_coffee.jpg" alt="【カプチーノ:880円の画像】" title="カプチーノ:880円">
カプチーノ:880円
</p>
<hr/>
<h2>カプチーノの入れ方</h2>
<!-- ここにyoutube動画をのせる -->
<hr width="100" align="left" />
<h2>wikipediaで「カプチーノ」と検索した結果</h2>




<hr>タグにはwidth属性を追加して、線の長さを調整することもできますが、このようなことは基本外部のスタイルシートを使ってするようにしましょう。
ここまでできたら 、保存してブラウザで見てみましょう。
罫線が表示されました。