ホームへ

【CSS】before・afterで四角を作る方法

2021年12月30日

アイコンとして四角を使いたい!

画像を使わず、before・afterで四角を表現したい!

before・afterで四角を作る方法を解説します。

方法1.テキスト記号の■を使う

before・afterは本来テキストを表示する要素です。

テキストで「しかく」と打つと「■」や「□」、「◆」などが使えます。

「content:"■"」のように指定すると四角を表示できます。

サンプル
<style>
.example{
    padding: 5px 0 5px 10px;
    background: #eb762e;
    color: #FFF;
    display: flex;
    align-items: center;
}
.example::before{
    content:"■";
    font-size: 200%;
    margin-right: 10px;
}
</style>
<div class="example">サンプル</div>

四角の大きさはfont-sizeで調整可能です。

サイズを変えると縦のバランスが悪くなるため、display: flexとalign-items: centerで上下中央寄せしましょう。

この四角は環境依存文字ではありませんが、環境依存文字を使うと文字化けする場合があるため気を付けましょう。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

方法2.display:blockとwidthとheightを使う

before・afterをカラのhtmlタグとし、任意の形にする方法です。

四角にするにはdisplay:blockとwidthとheightを指定しましょう。

サンプル
<style>
.example2{
    padding: 15px 0 15px 50px;
    background: #eb762e;
    color: #FFF;
    position: relative;
}
.example2::before{
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: #FFF;
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    margin: auto;
}
</style>
<div class="example2">サンプル</div>

四角の色はbackgroundで指定します。

位置はposition: absoluteで調整しましょう。

positionについて詳しくはこちら↓

【まとめ】before・afterで四角を作る方法

方法1.テキスト記号の■を使い「content:"■"」のように指定する。

方法2.display:blockとwidthとheightを使い、任意の形を作る。

以上、before・afterで四角を作る方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ