カギ括弧のタイトルを作る

今回はカギ括弧を作る、SCSSとCSSです。見本は下になります。

タイトル

HTML

HTMLは以下になります。

<p class="kagi">タイトル</p>

シンプルなHTMLです。クラス名で「kagi」を指定。指定しない場合はすべてのpタグに適用されます。クラス名を付けるのが、一般的でしょう。次にSCSSを紹介します。

SCSS

.kagi{
position: relative;
padding: 20px;
&::before{
content: "";
width: 30px;
height: 30px;
border-top: 1px solid rgb(255, 0, 34);
border-left: 1px solid rgb(255, 0, 34);
position: absolute;
top: 0;
left: 0;
}
&::after{
content: "";
width: 30px;
height: 30px;
border-bottom: 1px solid rgb(255, 0, 34);
border-right: 1px solid rgb(255, 0, 34);
position: absolute;
right: 0;
bottom: 0;
}
}

.kagiに対してposition: relativeを指定します。ここが起点になります。あとは、beforeとafterで幅と高さ（widthとheight）で幅と高さを指定。色なんかも指定しています。

beforeで左上のカギ括弧、afterで右下のカギ括弧を指定しています。

CSS

CSSは以下になります。

.kagi {
  position: relative;
  padding: 20px;
}
.kagi::before {
  content: "";
  width: 30px;
  height: 30px;
  border-top: 1px solid rgb(255, 0, 34);
  border-left: 1px solid rgb(255, 0, 34);
  position: absolute;
  top: 0;
  left: 0;
}
.kagi::after {
  content: "";
  width: 30px;
  height: 30px;
  border-bottom: 1px solid rgb(255, 0, 34);
  border-right: 1px solid rgb(255, 0, 34);
  position: absolute;
  right: 0;
  bottom: 0;
}

CSSは少し複雑に感じますが、SCSSをCSSにコンパイルすると、こうなります。CSSを知っている人は、SCSＳにするといいでしょう。意外に簡単です。

さいごに

使いどころはあまりないかもですが、個性的な見出しデザインとなるかな。参考にして下さい。万一の為に、バックアップを取ってから対応しましょう。