新潟県妙高市|ホームページと広告の相談相手

MENU [+]閉じる [×]
【CSS3】hr要素で区切り線をデザインする方法

CSSで、ページ内のコンテンツとコンテンツを仕切る要素として「区切り線」というものがあります。

今回は「hr要素で区切り線をデザインする方法」として、基本的な考え方を中心にご紹介します。

この記事の目次

[前提]リセット用CSSであらかじめ記述しておきたいスタイル定義

まずは、コーディング時に各主要ブラウザの見た目の差が最小限になるように初期表示時に定義される「リセット用CSS」に、hrタグ用のスタイルを定義しておきます。

この記述を追加することで、IEやEdge、Chrome、Firefox、Safariなどのブラウザでの見た目の差が最小限になるかと思います。

hr {
	margin: 0px;
	padding: 0px;
	height: 0px;
	border: 0px;
}

つまり、(ほかに何も定義しない限りは)何も無し!余白も無し!とでも言えば良いでしょうか。

ここから、独自の区切り線のスタイルを追加していきます!

ページの先頭へ戻る

[基本]リセット用CSSで定義してしまえば、ある程度は[border属性]だけで表現できる件

独自の区切り線といいましたが、実は基本的に1本または2本の線の組み合わせで構成される区切り線は、[border-top]や[border-bottom]の定義で表現できるものが多いです。

区切り線を実線にするなら[solid]を指定して、太さと色は任意に指定すれば、その通りの区切り線が表示されるかと思います。

点線なら[dotted]で定義して、二重線なら[border-top]と[border-bottom]にそれぞれお好みの線種を定義すれば良いかと思います。

コンテンツのエリア全体ではない、任意の幅の区切り線を作りたいなら、その幅のピクセル数に合わせて、こうする程度でしょうか。

幅を指定しての、中央寄せです。

hr {
	width:480px; /*任意の幅*/
	margin:0px auto 0px auto;
}

これらを組み合わせるだけでも、ある程度の種類の区切り線をCSSで表現できるかと思います。

ページの先頭へ戻る

[応用]背景画像、グラデーション、シャドウ、線内へのアイコン配置などなど

ほかにも、背景画像やグラデーション、シャドウを使用した区切り線など、様々な応用が考えられます。

あるいは、区切り線の途中にアイコンを表示させるなどすれば、ちょっと「遊び心」のある区切り線が作れそうですね(^-^)

それらのヒントを、こちらのページでは詳しく紹介してくださっています。

私も参考にさせていただきました、ありがとうございましたm(__)m

ページの先頭へ戻る

この記事の感想をお寄せください

[【CSS3】hr要素で区切り線をデザインする方法]の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。

感想投稿フォームへ

関連記事一覧:【CSS3】hr要素で区切り線をデザインする方法

ホームページのコーディングをしている皆さんは、要素を中央寄せにしたい場合は、どんなコードを書かれていますか? 例えばテキストを画面の、あるいはエリアの中央 …… 続きを読む

ホームページ制作をしていると、フォームの項目の一つで「チェックボックス」というものを扱う機会はあるかと思います。 また、チェックボックスを含むフォーム関連 …… 続きを読む

ホームページ制作において、デザイン修正は様々な場面で発生することがあります。 文言を変更したい場合や、要素の並びを部分的に入れ替えたい場合など、状況に応じ …… 続きを読む

皆さんは、ホームページのデザインを、どのページから始めるのが良いか、お考えになったことはありますか? もちろん、すべての場合に当てはまる正解などありません …… 続きを読む

Copyright (C) 妙高Web屋 All Rights Reserved.