CSSでテキストを鉤括弧「」で囲む方法!【コピペOK!】

webデザインCSS
スポンサーリンク

今回はCSSでテキストを鉤括弧「」で囲む方法を備忘録も兼ねて紹介していきたいと思います。

今回の備忘録はこんな方におすすめ!
  • 見出しのデザインの幅を広げたい!
  • テキストを鉤括弧で囲む方法を知りたい!
  • 疑似要素の使い方を知りたい!
マダラ蝶
マダラ蝶

鉤括弧で囲めるようになると、デザインの幅が広がりますよね!

スポンサーリンク

CSSで描く!角括弧のデザイン

CSSで描くと言いつつ、わかりやすいのでSCSSのコードです。すいません。

$bar-color: #ebb94d; //鉤括弧の色
$bar-style: solid;
$bar-size: 4px; //鉤括弧の太さ

.kagikakko {
  padding: 27px 0;
  position: relative;
  &::before,
  &::after {
    content: "";
    width: 20px; //横線の長さ
    height: 20px; //縦線の長さ
    position: absolute;
  }
  &::before {
    border-left: $bar-style $bar-size $bar-color;
    border-top: $bar-style $bar-size $bar-color;
    top: 0;
    left: 0;
  }
  &::after {
    border-right: $bar-style $bar-size $bar-color;
    border-bottom: $bar-style $bar-size $bar-color;
    bottom: 0;
    right: 0;
  }
}

実際のブラウザで確認してみましょう!codesandboxのSCSSのコンパイルの方法がわからなかったのでCSSでコーディングしてみました。

こんな感じで鉤括弧のデザインがスタイリングできていると思います。

widthheightborderの太さやカラーを変更することで自分好みな鉤括弧にカスタマイズすることも出来ます。

まとめ

今回は、鉤括弧のデザインをCSSまたは、SCSSでコーディングしました。鉤括弧のデザインができるようになるとデザインの幅が広がりますよね!コピペして試してみてください!

コメント

タイトルとURLをコピーしました