Upload
lina-katayose
View
91
Download
2
Embed Size (px)
Citation preview
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
最後に
普段使わない技術を別なことに使うのは疲れるが勉強になる。
電気ガス水道が止まった時のことも考えられる。 (つまり、何かで応用する力)
以上です。