【HTML入門】hrタグで水平線の太さ・長さ・色をデザインする方法

こんにちは!ライターのシホです!

このページにたどり着いたということは、

HTMLで水平線を描きたい
水平線の太さや長さを変えてデザインしたい

と、このような願望をお持ちではありませんか?

ということで今回はHTMLで水平線を引く方法とCSSを使ってデザインを変える方法を解説していきたいと思います。ぜひ参考にしてみてください!

HTMLで水平線を書く

hrタグの基本

HTMLでは、<hr>タグを使えば簡単に水平線を引くことができます。

<hr>

のみで水平線を一本引くことができます。水平線は文書内で話題が変わった時コンテンツの区切りなどに使われることが多いです。

See the Pen qYMOyM by Shiho Sakai () on CodePen.0

デザインを変える

では、デザインを変えていきましょう。

太さ

水平線の太さを変える場合は、hr要素にsize属性で数値を指定します。

<hr size="数値">

長さ

水平線の太さを変える場合は、hr要素にwidth属性で数値を指定します。

<hr size="数値(ピクセルまたはパーセント)">

水平線の太さを変える場合は、hr要素にcolor属性で色を指定します。

<hr color="色(英語表記またはカラーコード)">

立体感をなくす

hrタグはデフォルトで立体的な水平線になっています。この立体感をなくす場合は、noshadeをhrタグの中に記述します。

サンプルコード:今回は太さをわかりやすくするためnoshadeで立体感を消しています。

See the Pen odPLKV by Shiho Sakai () on CodePen.0

このようにHTMLで水平線を引いて簡単なデザインができます。

しかし、HTMLは構造や内容を表すものなので装飾はCSSを使うことが強く推奨されています。デザインに関しては、なるべくCSSを使うようにしましょう!

CSSで水平線のデザインを変える

太さ・長さ・色・枠なし

太さは、heightプロパティに数値(ピクセル)を指定します。pxの記述忘れに注意しましょう。長さは、widthプロパティに数値(ピクセルまたはパーセント)を指定します。

色は、background-colorプロパティに色(英語表記またはカラーコード)を指定します。デフォルトで立体感がある水平線なので、立体感をなくす場合は、border: noneを記述しましょう。

See the Pen odPYGZ by Shiho Sakai () on CodePen.0

二重線・点線

文字の下に二重線を引く場合は、border-bottomプロパティに、文字の上に二重線を引く場合はborder-topにdoubleを指定します。

二重線については、こちらの記事の「二重の下線を引く」のところに詳しく解説しているのでご覧ください↓


また、文字の下に点線を引く場合は、border- bottomプロパティに、文字の上に点線を引く場合はborder-topにdottedを指定します。二重線も点線も、サンプルの一つ目のように何もテキストを入力しない場合は、単なる水平線としても使えます。

See the Pen qYMqQj by Shiho Sakai () on CodePen.0

ウェブサイト制作スキルで自由に働けるようになるには

「ウェブサイト制作の仕事を個人で請け負えるようになり、場所や時間に縛られずに自由に働きたい」そんな理想の生活をするには、HTMLやCSSだけでなくJavaScriptやWordPress、PHPなどの技術も学ぶ必要があります。

お客様の要望に応えるには幅広い技術が必要ですし、HTML/CSSのみとウェブサイト制作全般で比べると仕事の量は約10倍ほど差があります。実際にクラウドワークスでも以下のように解説しています。

HTML・CSSコーディングは短納期で大量のページを作成する案件も多く見受けられます。クライアントの要求に応えるため、コスト(1ページあたり単価)・スピード・クオリティの優先度を見極めながら進めるバランス感覚も求められる仕事です。複雑な案件ではHTML/CSSだけに留まらず、JavaScript(AJAX)を使った機能実装、WordPressをはじめとするCMSテンプレートの開発を手がけるケースもあります。このような場合にはプログラミング言語の知識も必要となるでしょう。
引用:CrowdWorks

これらの複数スキルを挫折せずに短期間で学ぶならプログラミングスクールでの学習がおすすめです。

独学だと「プロの書き方とあってるのかな?業界のスタンダードがわからない、このまま独学で学んでても仕事ができるようなスキルが身につく気がしない」という不安からなかなか学習が進まないケースもあると思います。

弊社「侍エンジニア塾」では、あなたの理想の生活やプログラミングを学ぶ目的をヒアリングさせていただいた上で、最適なカリキュラムや講師によるマンツーマンレッスンを行うため、しっかり本来の理想に繋がったプログラミング学習をすることができます。

受講期間のなかで仕事を請け負い、講師と共に納品して個人で仕事を請け負う全行程を学びながら収入まで得た受講生もいらっしゃいます。

無料体験レッスンでは、あなたの理想の生活から学ぶべきスキルやその学習方法をお伝えしていますので、以下のボタンよりお気軽にお申し込みください。オンラインでも受講可能です。

無料体験レッスンを申し込む

まとめ

いかがでしたでしょうか。HTMLだけでなくCSSを使えば、もっとデザインの幅を広げることができます。ぜひ実践してみて使ってください!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

シホ

シホ

1990年生まれ。長崎県出身。趣味は歌・登山・暗闇ボクシング。
最近HTMLとCSSの勉強を再スタートしました!
「初心者の方にもわかりやすく」をモットーにライターとして日々精進中です★