HTMLだけで水平線を引く方法＆CSSで作れるおしゃれな水平線3選
HTMLを勉強している時や、Webサイトを作っている時に、
「HTMLで水平線を作りたい」
「おしゃれなデザインのラインをWebサイトに使いたい」
などと思うことはありませんか？
今回は、そんな方のために
- HTMLで水平線を引く方法
- おしゃれな水平線の作り方5選
といった内容の記事になっています。
HTMLで水平線を自由に引いたりデザインできるようになれば、HTML文章が見やすくなったり、デザインの幅を広げることもできますよ。
おしゃれな水平線5選では、実際にコードの記述方法も紹介します。
コピペもOKなので、ぜひ最後まで見ていろいろな水平線にチャレンジしてみてくださいね
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
HTMLだけで水平線を引く
「まだHTMLの勉強をはじめたばかり」
「とりあえずHTMLだけで完結するほうがいい」
という方でも、水平線は簡単に引くことができます。
まずは、HTMLだけで水平線を引く2つの方法を見ていきましょう！
1.hrタグで水平線を引く方法
HTMLで水平線を引くためには、hrタグを使用する必要があります。
では、実際のコード例とブラウザ表示を見ていきましょう。
<!-- HTMLコード -->
<body>
<hr>
</body>「え？これだけ？」と思った方も多いでしょう。
たったこれだけの記載ですが、ブラウザー上では以下のように表示されています。
しっかりと水平線が表示されているのがわかりますね。
hrタグは終了タグを必要とせず、実際は1本の線ではなく四角い枠で立体的に表示されているという特徴があります。
Horizontal Rule（水平線）の略であり、その名の通りの見た目ですが、本来は「区切り線」という意味で、ブログ記事の話題が変わる場面や、物語のシーンが変わる場面などで利用されます。
デザインとして使用するものではないですが、簡単に水平線が引ける便利なタグです。
2.画像を用意して水平線を引く方法
hrタグを使用する以外に、水平線が描かれている画像を使用するという方法もあります。
例えば、ペイントやillustratorなどの別ソフトで、事前に水平線を引いた画像「hr.jpg」を用意しておき、以下のように記述します。
<!-- HTMLコード -->
<body>
<img src="img/hr.jpg">
</body>こうすることで、hrタグを使用した時と同じように水平線を引くことができます。
ただし、画像を用いて水平線を表示させる場合、デバイス画面の大きさによって長さなどが変わることがあります。
画面サイズに合わせて画像サイズを調節しなければならないため、あまりおすすめの方法とは言えません。
HTML5ではhrタグの属性が廃止！？代わりにCSSで水平線をデザインできる
HTMLだけで簡単に水平線を引くことができるhrタグですが、線の種類や色を変えたい場合はCSSでのスタイリングが必須です。
以前は、以下のような属性が使用されていたため、HTMLだけでもある程度のデザインは可能でした。
| align | 表示位置の指定 center：中央寄せ left：左寄せ rihgt：右寄せ |
| color | 線の色を指定 |
| size | 線の幅をピクセル単位で指定 |
| width | 線の長さをピクセル単位で指定 |
| noshade | 平面的な線で表示（デフォルトは立体的） |
しかし、見た目をなどの装飾はCSSで統一することが推奨されていることから、HTML5から上記の属性はすべて廃止されています。
hrタグをデザインしたい場合は、CSSでスタイリングしましょう。
HTMLとCSSで作れる！おしゃれな水平線3選
ここでは、HTMLのhrタグをCSSでスタイリングして、水平線をおしゃれにデザインする方法を3選紹介します。
コピペもOKなので、一からデザインするのは面倒という方はぜひ利用してみてくださいね。
テキストエディタに一度コピペしてから、色をや太さを変えてみたりと、少しコードを書き換えてみても勉強になりますよ。
1.破線＆カラー
<!-- HTMLコード -->
<hr>
/* CSSコード */
hr {
border-width: 3px 0 0 0; /* 線の太さを指定 */
border-style: dashed; /* 線の種類を指定 */
border-color: cadetblue; /*線の色を指定 */
}▼ブラウザー表示▼
最もシンプルで分かりやすいデザインの水平線です。
hrタグを立体的なデフォルト状態から平面の線にするために、border-widthでtopの線以外を0にしています。
また、border-styleで指定できる線の種類は全部で8種類あります。
線の種類について詳しく知りたい方は以下の記事を参考にしてみてください。
【コピペOK！】HTMLで区切り線を引く方法とおしゃれなデザイン3選
2.二色使い
hr {
border-width: 0; /* 平面の線に指定 */
height: 3px; /* 線の太さを指定 */
background:linear-gradient(to left,#1976d2 70%, #fbc02d 30%); /*線の色を指定 */
background: -webkit-linear-gradient(to left,#1976d2 70%, #fbc02d 30%); /*線の色を指定（Chrome, Safari対策） */
}▼ブラウザー表示▼
タイトルや見出しの下のラインなどでもよく使用されているデザイン。
2色以上使用したカラフルな水平線を作ることも可能です。
上記では、border-widthを0にすることで、一度borderを解除し、平面の線にした状態で太さを指定しています。
3.真ん中にテキスト
hr {
position: relative;
overflow: visible;
text-align: center;
color: #888787;
border-width: 3px 0 0 0;
border-style: double;
border-color: #888787;
}
/* hrの上に重ねて表示するコンテンツを指定 */
hr::after {
position: absolute;
top: -0.7em; /* コンテンツ位置の高さを指定 */
left: 50%; /* 左から見たコンテンツ位置を指定 */
display: inline-block;
content: 'ここから話題が変わります'; /* 表示したいテキストを指定 */
background: #fff;
}▼ブラウザー表示▼
content内には、テキストだけでなくマークなども指定することができます。
マークを入れておしゃれにデザインしたい時や、テキストを入れて何のための区切り線なのか説明したい時などに重宝します。
HTMLやCSSをだけでおしゃれな水平線は作れる！色々試してみよう
以下は、この記事のまとめです。
- hrタグを使えばHTMLだけでも簡単に水平線が引ける
- hrタグをデザインする時はCSSでスタイリングする
- border-widthを0にするなどの方法で、事前に平面な線にしてからデザインする
hrタグを使えば、初心者でも簡単にHTMLだけで水平線を引くことができます。
まだCSSの記述になれていないという方でも、今回ご紹介したデザイン例のコードをコピペして、いろいろなコードを書き換えてみることで自分なりのデザインができるようになりますよ。
工夫次第で様々な水平線をデザインすることができるので、ぜひチャレンジしてみてくださいね。
