HTMLとCSS(とIbisPaint)でロゴを作った #CSS

はじめに

この記事は鈴鹿高専 Advent Calendar 2022 15日目の記事です。
初めて記事を書くので拙い部分もあると思います。

自己紹介

鈴鹿高専r04i(電子情報工学科)の者です。エコカープロジェクトとプロコンプロジェクトを兼部しています。

何を作ったのかとその経緯

エコカープロジェクトのロゴを制作しました。元はプロジェクト内で、大会等で着用する作業着を作ろうという話になり、それにあたり背面にプリントするロゴを募集されたことがきっかけです。
冬休みの前から募集自体はされており、そのときはせっかくだから自分も作ってみようと思っていました。
しかし、ロゴの作り方がわからず後で考えようと思ってしまい、学科で出された冬休み課題のweb制作などに~~熱中している~~追われているうちに存在を忘れていました。思い出したのは先輩が締め切り直前のリマインドをしてくださったときでした。

さて、どうしましょう。

なんとなくこういう案にしようと思っていたものはありますが、なにせロゴの作り方がわかりません。作成できるようなツールはよくわからないし、探しても自由度が低く案を実現できそうにないものばかりです。

そんなときに思い出したのが、高専に入学したての頃にHTMLとCSSで作ったTwitterのヘッダーの存在です。

当時は技術的な知識は全くなく、ただ動画を見よう見まねでなぞっただけでした。
しかし今の自分には、Web制作課題で試行錯誤したおかげで少しは知識も身についています。~~伏線回収~~
そんな今なら、ヘッダーのような複雑なものは作れなくとも、ロゴというシンプルなものなら自力で作れるのでは？

そんな流れで、期限ギリギリで作り始めました。

作り方

完成形はこれです。

コード

コードはこんな感じです。
HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div class="SUZUKA"><h1>SUZUKA</h1></div>
    <div class="ECOCAR"><h1>EC&nbsp;&nbsp;&nbsp;CAR</h1></div>
    <img src="AC34BDFD-D520-42AE-AE8C-A931BBEDD01A.png">
    </div>
    <div class="tire">
        <img src="タイヤのアイコン.png">
    </div>
    </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,750&display=swap');

body  {
    transform: rotate(-12deg);
    -moz-transform: rotate(-12deg);
    -webkit-transform: rotate(-12deg);
}

h1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 120px;
    transform: translate(275px,865px);
}

.ECOCAR {
    transform: translate(100px,-120px);
}

img {
    width: 70%;
    height: 50%;
    transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
}

.tire {
    width: 11%;
    transform: translate(516px,-300px);
}

文字

当初から「SUZUKA ECOCAR」という文字は入れたいと考えていました。なのでまずはその文字を入れていきます！~~順番が最悪ですね。先に大きいものを配置しましょう~~
エコカーのスピード感や力強さを表現するため、フォントはOpen Sansを使用、文字の太さも太めにし、そして全体を傾けました。
傾けるのにはtransform: rotateを使用しました。
「O」の部分にはベタですがタイヤのロゴを入れ込みました。そのスペースを空けるために を使用しました。
タイヤのアイコンは
https://fontawesome.com/
から使用しました。

チェッカーフラッグ

レースといえばチェッカーフラッグでしょう、という感じで。
最初は先ほどのサイトからアイコンを使用しようと考えていたのですが、思っていた感じのものがなかったので、IbisPaintで自作することにしました。
描いて、IbisPaint内に透過png変換できる機能があるので変換して、配置します。

あとは配置を調節して完成です。

あまり重要ではない話

これは最初に完成したもので、ロゴを決める投票に出したものです。
あまりにも時間がなかったため、もし選ばれたら細かいところ(チェッカーフラッグの模様の幅の不揃いや左上の繋ぎ目や文字のバランスなどなど)を直して完成にしようと思っていました。
ありがたいことに選んでいただき、初めに出した完成形に微調整して完成でした。(小泉構文)

反省

これは作業中の環境を再現したものです。
何を考えていたのか、フルスクリーンではありません。

提出する画像が正方形指定だったため、トリミングしようとしました。
しかしタブのメニュー部分など白でないところが入ってしまうので、余白を大きくするためにフルスクリーンにしました。

CSSは、急いでいてあまり深く考えずに書いていたため画像サイズは%で書いているし、positionプロパティはありません。

崩壊しました。

気をつけます。
そもそも期限はきちんと覚えておきましょう。

おわり

自分が頑張ってきていた技術で訳に立つことができてとてもうれしかったです。この経験を糧にまた技術を高められるようがんばっていきたいと思います。
最後まで読んでいただきありがとうございました。