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

妙高Web屋

お仕事のご依頼お見積りのご依頼

Web制作

【CSS3】hr要素で区切り線をデザインする方法

2018.2.5 2019.1.15

【CSS3】hr要素で区切り線をデザインする方法
Web制作 0 0

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

ページの先頭へ戻る

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

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
0 0

メールマガジンでWeb制作の情報を購読!

妙高Web屋では、ホームページの管理・運営のお役立ち情報を当サイト内よりも早く、メールマガジンでご紹介しております。

次回配信予定のテーマは、こちらです!

「ホームページ・ブログ・SNSって、どんな内容を投稿すれば良いの!?」

気になる方は、下記のボタンからメルマガ購読をお申し込みください。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ