GEEK WOMEN JAPAN のロゴを HTML と CSS で作る

片寄里菜 (Lina Katayose)2017/03/04 　 Geek Women Japan×Microsoft 　 Geek になりたい人のためのミニカンファ

準備するもの

忍耐力

HTML5CSS3

自己紹介

片寄 里菜（かたよせ りな） Lina Katayose @se_lina08

よろしくおねがいします！

日ごろ何をしているのか。

今の仕事： WEB フロントエンド 兼 WEB チーフディレクター

ドローンも飛ばしています。 Python を勉強中です。

さて本題

HTML とはHyperText Markup Language （ハイパーテキスト マークアップ ランゲージ）、略記・略称 HTML （エイチティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語である。 文章の中に記述することでさまざまな機能を記述設定することができる。By Wikipedia

CSS とはCSS （ Cascading Style Sheets 、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。 ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。By HTMLQ

つまり

ロゴを描く技術ではない。

本当に描くなら

Photoshop か Illustrator を使いましょう。

では、なぜ作ったのか。

作ってみたいから

チャレンジ精神

メリットとデメリット

メリット画像編集ソフトを使わない。データ容量が軽くなる。

デメリットとても時間がかかる細かな表現がしにくいもっと良い方法がある。そもそもロゴを描く機能ではない。

実際のデータ量

HTML と CSS16KB（ HTML:3KB 　 CSS ： 13KB ）

画像データ (PNG)39.6KB （ WEB で使われているもの）

使った技術

HTML一つ一つの要素を <div>~~</div> で作る。

CSS丸、三角、四角の画像を重ね合わせ、Position relative, と z-index で配置して作る。

それで、できたのがこちら

画像データと比べると

はい。

やはり、ぎこちなさはありますが、ぱっと見た感じまではできました！

http://www.linadesign.jp/gwj/

こちらで公開中！ (mac のみ、、、 )

Geek Women Japan で使った色

ミントな緑 ■#36DFB7淡いピンク■#FFC5C5さわやかな白■#FFFFFF

最後に

普段使わない技術を別なことに使うのは疲れるが勉強になる。

電気ガス水道が止まった時のことも考えられる。 （つまり、何かで応用する力）

以上です。