CSSで頑張らなくても、SVGで楽にできるときもある
個人サイトをリニューアルをしています。
ノート風のデザインを目指して、スタイルを調整していました。
ノートの見た目は、現実にあるノートを再現しようとCSSを書いていました。
現在、以下の画像のようなノートになっています。
上記の画像の赤枠の箇所について、CSSで書くのに苦労しました。
というのも、現実にあるノートのスタイルを再現したく、以下の見た目を作りたかったのです。
- タイトルの下にある線から、縦の線を下方向に生やしたい
- 縦の線は、一定の間隔で繰り返して表示したい
- 縦の線は、大きい線と小さい線を分けたい
- 縦の線の下側を、丸くしたい
CSSで書く
そこで、CSS で 以下のようなスタイルを書いて対応していました。
<div class="notebook-heading">
<h1 class="notebook-title">
Title Text
</h1>
<!-- 長い棒（4px / 128px ピッチ） -->
<div class="notebook-line notebook-line--large"></div>
<!-- 短い棒（2px / 16px ピッチ） -->
<div class="notebook-line notebook-line--small"></div>
</div>:root {
--border-color: #ccc;
}
/* 親コンテナ */
.notebook-heading {
position: relative;
width: 100%;
}
/* 見出し */
.notebook-title {
border-bottom: 1px solid var(--border-color);
}
/* 共通の罫線スタイル */
.notebook-line {
position: absolute;
left: 0;
width: 100%;
}
/* 長い棒（4px 高・128px ピッチ） */
.notebook-line--large {
bottom: -4px;
height: 4px;
background-image: repeating-linear-gradient(
to right,
var(--border-color) 0 2px,
transparent 2px 128px
);
}
/* 短い棒（2px 高・16px ピッチ） */
.notebook-line--small {
bottom: -2px;
height: 2px;
background-image: repeating-linear-gradient(
to right,
var(--border-color) 0 2px,
transparent 2px 16px
);
}考えとしては、.notebook-line を基準として 高さを2px,4pxで、横幅100% まで広げた領域に対して、背景色を repeating-linear-gradient で塗っていく方法です。
この方法だと、実現したい1,2,3はクリアするのですが、4がクリアできないのです。
４. 縦の線の下側を、丸くしたい
4について、CSSで解決できる方法があるのかもしれませんが、他の方法がないのかと思案しました。
SVGで書く
『縦棒の下部分を丸くするというのは、図形を書こうとしている？』と思い、SVGでいけそうだなと考えました。
そこで、以下のような方法で解決できました。
実際のコードではなく、イメージのコードです。
<div class="notebook-heading">
<h1 class="notebook-title">Title Text</h1>
<!-- 長い棒（6px 高 / 128px ピッチ / 下だけ丸い） -->
<svg class="notebook-svg notebook-svg--large" aria-hidden="true">
<defs>
<pattern
id="dash-bottom-rounded-6"
patternUnits="userSpaceOnUse"
width="128"
height="6"
>
<!-- 幅 2px の縦棒。下側だけ円弧で丸める -->
<path
d="
M 0 0
H 2
V 5
A 1 1 0 0 1 1 6
A 1 1 0 0 1 0 5
Z
"
class="notebook-dash"
/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#dash-bottom-rounded-6)" />
</svg>
<!-- 短い棒（3px 高 / 16px ピッチ / 下だけ丸い） -->
<svg class="notebook-svg notebook-svg--small" aria-hidden="true">
<defs>
<pattern
id="dash-bottom-rounded-3"
patternUnits="userSpaceOnUse"
width="16"
height="3"
>
<!-- 幅 2px の縦棒。下側だけ円弧で丸める -->
<path
d="
M 0 0
H 2
V 2
A 1 1 0 0 1 1 3
A 1 1 0 0 1 0 2
Z
"
class="notebook-dash"
/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#dash-bottom-rounded-3)" />
</svg>
</div>:root {
--border-color: #ccc;
}
/* 親コンテナ */
.notebook-heading {
position: relative;
width: 100%;
}
/* 見出し */
.notebook-title {
border-bottom: 1px solid var(--border-color);
}
/* SVG 下線（共通） */
.notebook-svg {
position: absolute;
left: 0;
width: 100%;
display: block;
}
/* 長い棒（6px） */
.notebook-svg--large {
bottom: -6px;
height: 6px;
}
/* 短い棒（3px） */
.notebook-svg--small {
bottom: -3px;
height: 3px;
}
/* パターン内の棒の色（CSS 変数で制御） */
.notebook-dash {
fill: var(--border-color);
}SVGとして縦棒を表現していて、.notebook-line に連続して表示しているみたいです。
正直SVGについて理解が浅いため、また今回を機に SVG について興味が湧いてきました。
リニューアル後は、SVGについて学んでみたいなと思います。
終わりに
図形に関しては、SVGで書いちゃう方が楽でした。
CSS 達人のトリックを披露するでも良いのですが、保守性の面では SVG の方が好みです。
CSS、SVG それぞれ得意とするもので書いていきたいですね。
-
s※ ログイン不要で投稿できます。
※ 同じブラウザから投稿を削除できます。
0
読み込み中...
関連する記事
タグ「フロントエンド」の記事
Webmention というのを最近知りました。 名前の通り、Web 上でメンションすることができます。 受信側、送信側、どちらも対応したので感想を残そうと思います。 Webmention ざっくりと Web AサイトにBサイトのリンクをつ
ITヲタクな AI くんにピッタリな仕事の一つは、モジュールアップデート。 特に、メジャーアップデートが超助かる。 昔だったら 数ヶ月掛かった移行も、数日たらずに対応できるようになったので、 さすが ITヲタクくん。 対応してよかったフロー
以下で書いた通り、プロダクトコードを写経したテストコードを削除しました。 "こぶりー" ( https://kobliy.vercel.app/ ) という個人ブログを読むアプリのコードです。 https://silverbirder.gi