CSSで形決め!「●」「▲」「■」を使い会社のロゴを作ってみた話。

 

 今回は、CSSで今勤めてる会社のロゴを作ってみました!株式会社Arinosってことでアリさんマークです。ここには「事業を創出するプロフェッショナルの巣」という意味が込められています。コーポレートビジョンは「世界を舞台に自由な発想で事業を創出し、社会を豊かにする」で世界を舞台に自由な発想ってカッコイイですよね!


Arinos


 上の画像を見て気がついた方もいると思いますが…このロゴはタイトルの通り「●」「▲」「■」を使って作っています。マウスホバーイベントをつけてるのでロゴなどにマウスをのせてみてください!仕組みがわかると思います。


HTMLはulとliで書いてるんですが、これは後からロゴの位置を指定しやすくするためです。liの・を消す時は、list-style:none;を使います。※携帯で見るとフォームが崩れていたりするので…できたらパソコンでご覧ください!

っとこんな感じで「●」「▲」「■」の高さや幅、長さや角を丸くしたり…図形を重ねてみたりして作ってのがあのアリさんマーク!作るのにあまり時間はかからなかったですが、記事を書く時の位置決めが難しかったです。position:absolute;を使ったポジション決めはなるべく使いたくないとこですね。

 

ポイントを下記にまとめておきます!

z-index:’レイヤー決め’;

border-radius:’角をどれだけ丸くするか’%;

transform: rotate(‘どれだけ傾けるか’deg);

list-style:none;

 

ぜひ、参考にして見てください!



2 thoughts on “CSSで形決め!「●」「▲」「■」を使い会社のロゴを作ってみた話。

  1. adidas nmd r1 返信する

    An attention-grabbing dialogue is worth comment. I believe that you should write more on this subject, it might not be a taboo subject but usually individuals are not enough to talk on such topics. To the next. Cheers

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です