Geek women japanのロゴをhtmlとcssで作ってみました。

1. Geek Women Japanのロゴを
HTMLとCSSで作る
片寄里菜(Lina Katayose)
2017/03/04 Geek Women Japan×Microsoft
Geek になりたい人のためのミニカンファ

2. 準備するもの
忍耐力
HTML5
CSS3

3. 自己紹介
片寄 里菜（かたよせ りな）
Lina Katayose
@se_lina08
よろしくおねがいします！

4. 日ごろ何をしているのか。
今の仕事：WEBフロントエンド
兼WEBチーフディレクター
ドローンも飛ばしています。
Pythonを勉強中です。

5. さて本題
HTMLとは
HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、
略記・略称HTML（エイチティーエムエル）とは、ウェブ上の文書を記述するた
めのマークアップ言語である。 文章の中に記述することでさまざまな機能を記
述設定することができる。
By Wikipedia
CSSとは
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、
ウェブページのスタイルを指定するための言語です。 ワープロソフトなどで作
成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートと
いいます。
By HTMLQ

6. つまり
ロゴを描く技術ではない。

7. 本当に描くなら
PhotoshopかIllustratorを使いましょう。

8. では、なぜ作ったのか。
作ってみたいから
チャレンジ精神

9. メリットとデメリット
メリット
画像編集ソフトを使わない。
データ容量が軽くなる。
デメリット
とても時間がかかる
細かな表現がしにくい
もっと良い方法がある。
そもそもロゴを描く機能ではない。

10. 実際のデータ量
HTMLとCSS
16KB
（HTML:3KB CSS：13KB）
画像データ(PNG)
39.6KB（WEBで使われているもの）

11. 使った技術
HTML
一つ一つの要素を<div>~~</div>で作る。
CSS
丸、三角、四角の画像を重ね合わせ、
Position relative,とz-indexで配置して作る。

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

13. 画像データと比べると

14. はい。
やはり、ぎこちなさはありますが、
ぱっと見た感じまではできました！
http://www.linadesign.jp/gwj/
http://www.linadesign.jp/gwj/win/
こちらで公開中！

15. Geek Women Japanで使った色
ミントな緑 ■
#36DFB7
淡いピンク■
#FFC5C5
さわやかな白■
#FFFFFF

16. 最後に
普段使わない技術を別なことに使うのは疲
れるが勉強になる。
 電気ガス水道が止まった時のことも考えられる。
（つまり、何かで応用する力）

17. 以上です。