「その線、何もしないと消えちゃう？」hrタグを自分好みに料理する魔法のCSS
Webサイトを作っていて、「ここで話題を切り替えたいな」と思ったとき、皆さんはどうしていますか？ おそらく多くの人が、HTMLの `
` タグを使っているはずです。
でも、いざページに `
` を書いてみると、ブラウザが勝手に用意した「うっすらグレーの、なんだか古臭い線」が出てきて、ガッカリしたことはありませんか？
「自分のデザインに全然合わない！」「消し方がわからない！」と悩むのは、初心者の誰もが通る道です。今日は、そんな気難しい `
` タグと仲良くなって、自由自在に操るための「魔法のCSS」をご紹介します。
—
なぜ ` ` はあんなに気難しいのか？
実は、`
` 要素（Horizontal Ruleの略）は、ただの「線」ではありません。「意味的な区切り」を表すための大切なHTMLタグです。
ブラウザは親切心から、「区切りですよ」と分かるように、昔ながらの立体感のある線をデフォルトで表示してくれています。でも、今の洗練されたWebデザインには、その「おせっかいな装飾」が邪魔になってしまうことが多いんですよね。
まずは、この「ブラウザの余計なお世話」をリセットするところから始めましょう。
—
ステップ1：まずは「すっぴん」に戻す
ブラウザが勝手につけているスタイルを解除するには、CSSで `border` を無効化するのが一番の近道です。
hr {
/ 1. まずは枠線を消す /
border: none;
/ 2. 背景色を消す /
background: none;
/ 3. 高さを0にして、自分の好きな高さで調整できるようにする /
height: 0;
}
これで、画面上から線が消えたはずです。「えっ、消えちゃった！」と焦る必要はありません。これでようやく、真っ白なキャンバスが手に入った状態です。ここから好きな色や形を塗っていきましょう。
—
ステップ2：自分だけの「区切り線」を描いてみよう
では、実際にオシャレな線を引いてみましょう。いくつかよく使うパターンを紹介しますね。
パターンA：シンプルで洗練された「細い線」
余計な装飾を省いた、今のトレンドに合うスタイルです。
hr.simple-line {
border: none;
border-top: 1px solid #ccc; / 上側に薄いグレーの線を引く /
margin: 40px 0; / 上下に余白を作ってスッキリ見せる /
}
パターンB：存在感のある「太めのドット線」
ちょっとポップなサイトなら、こんな線も可愛いですよ。
hr.dot-line {
border: none;
border-top: 4px dotted #ff6b6b; / 赤色のドット線 /
margin: 30px 0;
}
—
つまずきポイント：線を「短く」したいときは？
初心者が一番悩むのが、「画面の端から端まで線が伸びてしまう」ことではないでしょうか？ 実は `
` は、放っておくと親要素の幅いっぱいに広がってしまう性質があります。
これを調整するには、`width` を指定してあげればOKです。
hr.short-line {
border: none;
border-top: 2px solid #333;
width: 50px; / 線の長さを固定する /
margin: 20px auto; / autoを指定すると、左右の余白が均等になり真ん中にくる /
}
—
最後に：デザインは「引き算」から
ここまで色々紹介しましたが、一番大切なのは「その区切り線は、本当にそこに必要か？」という視点です。
実は、最近のWebデザインでは、`
` を使わずに `margin-bottom`（下の余白）だけで区切りを表現することも増えています。線を引きすぎると画面が窮屈に見えてしまうこともあるので、「ここぞ！」という場所にだけ、こだわりの一本を置いてみてください。
HTMLとCSSは、お料理と一緒です。最初はレシピ通りに作ってみて、慣れてきたら「もっと細くしようかな？」「次はドットにしてみようかな？」とアレンジを楽しんでみてくださいね。
皆さんのサイトが、たった一本の線でぐっと素敵になることを応援しています！ また次回の記事でお会いしましょう。
コメント