HTML&CSS

【iSara模写コーディング】カギカッコの作り方

iSara模写コーディングで僕自信が困ったこと、つまづいた点シリーズ。

今回はiSaraでセクションの見出しなどに使われているカギカッコの作り方について解説します。

こんなやつですね。

では、解説していきます。

実装方法

結論としては要素の擬似要素を使用して実装します。

見出し(今回の場合はh2)部分を位置の基準とし、擬似要素のbeforeで左側、afterで右側に空白の四角を生成し、その四角の必要な部分に枠線を引くことで実現します。

詳しいイメージは以下の図を参考にして頂ければと思います。

参考ソース

codepenに参考ソースを記述しました。

See the Pen
isara_kagikakko
by Jyu2 (@Jyu2)
on CodePen.

まとめ

いかがだったでしょうか?

こういったカギカッコは頻出のレイアウトという訳ではありませんが、やり方を知ってるいるとHTMLとCSSだけでできることの幅が広がるので損はないと思います。

ここでしっかりとマスターしてレイアウト作成の幅を広げておきましょう。

ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す