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 それぞれ得意とするもので書いていきたいですね。
シェアする
フォローする
関連する記事
タグ「フロントエンド」の記事
最近、ヒューマンインターフェース ガイドライン（HIG）という言葉を知りました。 「ヒューマンインターフェイスガイドライン」には、どのAppleプラットフォームでも優れた体験を設計できるようにするためのガイドとベストプラクティスが含まれてい
2026-01-24
主にWeb関連の個人開発をしている際に心がけていることを書きます。 月末に近づくにつれ、AIの利用上限に達してしまうことがあります。 その状況になった時、以下のいずれかの選択肢が私の中では残っています。 課金して利用上限を増やす 無料モデル
2026-01-22
Web のフロントエンド実装において、次のようなミスによってデザイン崩れを起こしてしまったことはありませんか。 flex-shrink の指定を忘れて、要素が押しつぶされてしまった z-index の指定を間違えて、要素が意図せず前面（また