[CSS] 「個別の十一人」のロゴをCSSで描いてみる

公開日:2018/08/22 更新日:2019/07/30

やりたいこと

CSSの練習がてら、攻殻機動隊2ndに登場する「個別の十一人」のロゴを描いてみたい
文字を好きに書き換えて、手軽にパロったロゴを作りたい

サンプルコード

html

<head>
    <link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
</head>

<div class="individual_11">
    <p>仇</p>
    <p>士</p>
</div>

CSS

.individual_11 {
    position: relative;
    width: 400px;
    height: 400px;
}
.individual_11::before {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    width: 240px;
    height: 240px;
    border: 18px solid #000;
    content: "";
}
.individual_11::after {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    transform: scaleY(0.8);
    font-size: 300px;
    line-height: 420px;
    text-align: center;
    content: "∞";
}

.individual_11 p {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 0px;
    margin: 0px;
    font-size: 60px;
    font-weight: bold;
    font-family: "Sawarabi Mincho";
}
.individual_11 p:nth-child(1) {
    top: 60px;
}
.individual_11 p:nth-child(2) {
    bottom: 60px;
}

仕組み、解説、補足など

「∞」の位置は「top: 50%; transform: translateY(-50%);」方式で上下中央を揃えようとしてもうまくいかず。line-heightで調整しています。
流石に笑い男のロゴはペイントツールを使いましょう

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。