CSSでロゴマーク

2017-11-26 by ノムラ@gimmickdock Category:ロゴ

週に一回はブログ記事書こうと思っていたのに、気づけば前回の投稿から10日経っているという体たらくです。
ネタのストックは結構あるんですが、他人が読んで有益なレベルまで深く、かつわかりやすく書こうとするとえらい時間とエネルギーを要しますね。

そんなわけで、今回の投稿は小ネタです。ロゴマークをCSSで書いてみましたよ、という話。

（このロゴの話です。）

まずはロゴのデザインについて軽く想いを述べます。

ロゴデザインはなるべくシンプルであるべし、という想いがありまして、かつ、言葉で説明しやすいのが良いな、と思うのです。
Softbankのロゴなら「太い２本の横棒」で通じるし、マクドナルドなら「黄色いM字」で通じる。こういうのが好ましいと考えております。

かつ、「Webでよく見かける、見慣れた形」にしたかったんです。

Web見ててよく見かける形… というと、ブラウザのUIかなと。
ブラウザ左上の「戻る」「進む」「更新」あたりかなと。

(chromeの左上部分)

と、そんな想いを抱えつつ、”GIMMICK DOCK”と名乗ることを決め、更新アイコンっぽい形状で”G”を描いてロゴとすることにしました。
このロゴの形を言葉で説明するなら、

「矢印が反時計回りに円を描いてる」

というくらいの短い言い回しで通じるんじゃないでしょうか。（通じて欲しい。）
何にせよ皆さんブラウザの更新ボタン見るにつけ私を思い出す呪いにかかれば良い。

もう一つ、個人的にロゴに対して込めた想いとしては、「自分のスキルとか個性とかを表現できるものであるべし」というのがありました。
なので、このロゴはHTMLとCSSで表現できるようになっています。

以下のロゴをChromeデベロッパツールとかでソース確認してみてください。
ビットマップ画像でもSVGでもなく、HTML要素であることが見て取れることと思われます。background-imageも使ってません。

GIMMICK DOCK LOGO

以下、コードの説明を載せます。
まずはHTML。

<span class="c-logo">GIMMICK DOCK LOGO</span>

タグはspanです。
「ロゴはh1であるべきだろ」とか「ロゴは図表の部類と見なしてfigureだろ」とか論争し始めると本記事の主旨から外れてしまうので、あえて意味をもたないspanを使用しています。
クラス名の記法はBEMです（細かく言うと、FLOCSSです… と言っても、span一つだけなんでほとんど意味ないですが）。2017年現在最も一般的な記法がBEMのようなので採用しました。個人的な推し記法はCSS Modulesです。この辺についてもいつかブログ語りたいところですが、超大作記事になってしまいそうなので多分書きません。

さて、それではCSSを書きます。マークアップしたspanに加えてbefore疑似要素とafter疑似要素を駆使し、実質3要素によって描画します。

半円

    width: 210px;
    height: 210px;
    border: 24px solid #000;
    border-radius: 50%;
    box-sizing: border-box;
    clip: rect(0, 210px, 100px, 0);

1/4の円弧

    width: 210px;
    height: 210px;
    border: 24px solid #000;
    border-radius: 50%;
    box-sizing: border-box;
    clip: rect(100px, 100px, 210px, 0);

三角形

    border-style: solid;
    border-width: 75px 43px 0 43px;
    border-color: #000 transparent transparent transparent;

この3つの図形の組み合わせで描きます。楽勝じゃん、と思っていたのですが結構手こずりました。
一番大きい図形である半円をspanで描いて、内側の疑似要素で1/4円弧と三角形を描こうとしていたのですが、半円にはclipプロパティを使っているので、半円の内部に置かれた要素が見切れてしまいます。

というわけで、一つのspan（+擬似要素）でGIMMICK DOCKロゴを表現するなら、三角形をspanで描いて、疑似要素で半円と円弧を描くという、なんだか違和感あるソースになってしまいます。
（見た目上小さいものの内側に大きいものが内包されている。）

イマイチ扱いづらいソースになってしまいました… とは言え、なんとか形になりました。

GIMMICK DOCK LOGO

■以下、全ソース

<style>
　　.c-logo{
 　　　display: inline-block;
 　　　vertical-align: middle;
 　　　width: 0;
 　　　height: 0;
 　　　border-style: solid;
 　　　border-width: 75px 43px 0 43px;
 　　　border-color: #000 transparent transparent transparent;
 　　　color: rgba(0, 0, 0, 0);
 　　　user-select: none;
 　　　transform: translate(183px, 180px) rotate(-10deg);
 　　　margin-right: 180px;
 　　　margin-bottom: 180px;
 }
　　.c-logo:before,
　　.c-logo:after{
　　　　content: '';
 　　　position: absolute;
 　　　width: 210px;
 　　　height: 210px;
 　　　border: 24px solid #000;
 　　　border-radius: 50%;
 　　　box-sizing: border-box;
 　　　top: -224px;
 　　　left: -170px;
 　　　transform: rotate(-33deg);
 　}
　 .c-logo:before{
 　　　clip: rect(0, 210px, 100px, 0);
 　}
 　.c-logo:after{
 　　　clip: rect(100px, 100px, 210px, 0);
 　}
 </style>
 <span class="c-logo">GIMMICK DOCK LOGO</span>

なお、当ブログ左上のロゴではCSSでロゴを描いた上に、SVG画像をかぶせてアニメーションつけてます。特に意味のない、ただの飾りのアニメーションなんでこれはそのうち消す気がします。

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル