Enviar pesquisa
Carregar
Geek women japanのロゴをhtmlとcssで作る
•
Transferir como PPTX, PDF
•
0 gostou
•
366 visualizações
Lina Katayose
Seguir
HTMLとCSSで作ってみました!
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 17
Baixar agora
Recomendados
Geek women japanのロゴをhtmlとcssで作る2
Geek women japanのロゴをhtmlとcssで作る2
Lina Katayose
20140228 Movable Type Seminar
20140228 Movable Type Seminar
Six Apart
Wb tokyo 2013
Wb tokyo 2013
Hidekazu Ishikawa
141115 making web site
141115 making web site
Himi Sato
Htmlコーディングの効率化 前編
Htmlコーディングの効率化 前編
Yasuhito Yabe
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
Mignon Style
Movable Type as a Playground
Movable Type as a Playground
Taku AMANO
WordBench埼玉紹介 20130526
WordBench埼玉紹介 20130526
Yoshitaka KATO
Recomendados
Geek women japanのロゴをhtmlとcssで作る2
Geek women japanのロゴをhtmlとcssで作る2
Lina Katayose
20140228 Movable Type Seminar
20140228 Movable Type Seminar
Six Apart
Wb tokyo 2013
Wb tokyo 2013
Hidekazu Ishikawa
141115 making web site
141115 making web site
Himi Sato
Htmlコーディングの効率化 前編
Htmlコーディングの効率化 前編
Yasuhito Yabe
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
Mignon Style
Movable Type as a Playground
Movable Type as a Playground
Taku AMANO
WordBench埼玉紹介 20130526
WordBench埼玉紹介 20130526
Yoshitaka KATO
Markdownでドキュメント作成
Markdownでドキュメント作成
Yasuyuki Fujikawa
20180709 pronet study
20180709 pronet study
Six Apart
Rustで DDD を実践しながら API サーバーを実装・構築した(つもり)
Rustで DDD を実践しながら API サーバーを実装・構築した(つもり)
ShogoOkazaki
PHPカンファレンス関西2017 PHPにおけるDSL
PHPカンファレンス関西2017 PHPにおけるDSL
Hideharu MATSUFUJI
WordCamp2015 WordPressで自分の名前でドメイン取って ブログ作るとこまで 面倒みるワークショップ
WordCamp2015 WordPressで自分の名前でドメイン取って ブログ作るとこまで 面倒みるワークショップ
Sho Shirasaka
お安く、楽にWEBアプリを支える技術
お安く、楽にWEBアプリを支える技術
KeitoTakeda
バイラルメディアを作ったら3万いいね集まった!
バイラルメディアを作ったら3万いいね集まった!
Kato Tomo
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
文樹 高橋
WordPress プラグイン Advance Custum Fieldsを学ぶ
WordPress プラグイン Advance Custum Fieldsを学ぶ
Shigeki Takai
バイラルメディアを作ったら3万いいね集まった!
バイラルメディアを作ったら3万いいね集まった!
Kato Tomo
詳説 Movable type 7
詳説 Movable type 7
Yuji Takayama
W3C日本会議発表資料
W3C日本会議発表資料
Makoto Murata
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
20130225 pronet study
20130225 pronet study
Six Apart
JavaScriptテンプレートエンジンで活かすData API
JavaScriptテンプレートエンジンで活かすData API
Hajime Fujimoto
20170801 monaca ug_lt_public
20170801 monaca ug_lt_public
Six Apart
WooCommerce & AWS
WooCommerce & AWS
Hidetaka Okamoto
WordBench 東京 とは
WordBench 東京 とは
Mignon Style
Markdownもはじめよう
Markdownもはじめよう
masayoshi takahashi
Luz angela ospina rodríguez
Luz angela ospina rodríguez
Luz Angela Ospina Rodríguez
Putting the "Public" Back in Public Higher Ed
Putting the "Public" Back in Public Higher Ed
Robin DeRosa
Mais conteúdo relacionado
Mais procurados
Markdownでドキュメント作成
Markdownでドキュメント作成
Yasuyuki Fujikawa
20180709 pronet study
20180709 pronet study
Six Apart
Rustで DDD を実践しながら API サーバーを実装・構築した(つもり)
Rustで DDD を実践しながら API サーバーを実装・構築した(つもり)
ShogoOkazaki
PHPカンファレンス関西2017 PHPにおけるDSL
PHPカンファレンス関西2017 PHPにおけるDSL
Hideharu MATSUFUJI
WordCamp2015 WordPressで自分の名前でドメイン取って ブログ作るとこまで 面倒みるワークショップ
WordCamp2015 WordPressで自分の名前でドメイン取って ブログ作るとこまで 面倒みるワークショップ
Sho Shirasaka
お安く、楽にWEBアプリを支える技術
お安く、楽にWEBアプリを支える技術
KeitoTakeda
バイラルメディアを作ったら3万いいね集まった!
バイラルメディアを作ったら3万いいね集まった!
Kato Tomo
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
文樹 高橋
WordPress プラグイン Advance Custum Fieldsを学ぶ
WordPress プラグイン Advance Custum Fieldsを学ぶ
Shigeki Takai
バイラルメディアを作ったら3万いいね集まった!
バイラルメディアを作ったら3万いいね集まった!
Kato Tomo
詳説 Movable type 7
詳説 Movable type 7
Yuji Takayama
W3C日本会議発表資料
W3C日本会議発表資料
Makoto Murata
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
20130225 pronet study
20130225 pronet study
Six Apart
JavaScriptテンプレートエンジンで活かすData API
JavaScriptテンプレートエンジンで活かすData API
Hajime Fujimoto
20170801 monaca ug_lt_public
20170801 monaca ug_lt_public
Six Apart
WooCommerce & AWS
WooCommerce & AWS
Hidetaka Okamoto
WordBench 東京 とは
WordBench 東京 とは
Mignon Style
Markdownもはじめよう
Markdownもはじめよう
masayoshi takahashi
Mais procurados
(20)
Markdownでドキュメント作成
Markdownでドキュメント作成
20180709 pronet study
20180709 pronet study
Rustで DDD を実践しながら API サーバーを実装・構築した(つもり)
Rustで DDD を実践しながら API サーバーを実装・構築した(つもり)
PHPカンファレンス関西2017 PHPにおけるDSL
PHPカンファレンス関西2017 PHPにおけるDSL
WordCamp2015 WordPressで自分の名前でドメイン取って ブログ作るとこまで 面倒みるワークショップ
WordCamp2015 WordPressで自分の名前でドメイン取って ブログ作るとこまで 面倒みるワークショップ
お安く、楽にWEBアプリを支える技術
お安く、楽にWEBアプリを支える技術
バイラルメディアを作ったら3万いいね集まった!
バイラルメディアを作ったら3万いいね集まった!
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
WordPress プラグイン Advance Custum Fieldsを学ぶ
WordPress プラグイン Advance Custum Fieldsを学ぶ
バイラルメディアを作ったら3万いいね集まった!
バイラルメディアを作ったら3万いいね集まった!
詳説 Movable type 7
詳説 Movable type 7
W3C日本会議発表資料
W3C日本会議発表資料
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
20130225 pronet study
20130225 pronet study
JavaScriptテンプレートエンジンで活かすData API
JavaScriptテンプレートエンジンで活かすData API
20170801 monaca ug_lt_public
20170801 monaca ug_lt_public
WooCommerce & AWS
WooCommerce & AWS
WordBench 東京 とは
WordBench 東京 とは
Markdownもはじめよう
Markdownもはじめよう
Destaque
Luz angela ospina rodríguez
Luz angela ospina rodríguez
Luz Angela Ospina Rodríguez
Putting the "Public" Back in Public Higher Ed
Putting the "Public" Back in Public Higher Ed
Robin DeRosa
Blockchains 101
Blockchains 101
Nikhil Krishna Nair
Roman iovlev battle - typified or not tepified elements jdi vs selenide - Hei...
Roman iovlev battle - typified or not tepified elements jdi vs selenide - Hei...
Роман Иовлев
Eco 405 week 9 quiz strayer
Eco 405 week 9 quiz strayer
ninfaames
UADIGITALS 2017 Liquid7
UADIGITALS 2017 Liquid7
Elena Peday
UADIGITALS 2017 D2
UADIGITALS 2017 D2
Elena Peday
Derechos humanos en el mundo.
Derechos humanos en el mundo.
José María
Ready mix concrete
Ready mix concrete
SAN Sunny
Poetry
Poetry
Veah Frances Jamolin
Destaque
(10)
Luz angela ospina rodríguez
Luz angela ospina rodríguez
Putting the "Public" Back in Public Higher Ed
Putting the "Public" Back in Public Higher Ed
Blockchains 101
Blockchains 101
Roman iovlev battle - typified or not tepified elements jdi vs selenide - Hei...
Roman iovlev battle - typified or not tepified elements jdi vs selenide - Hei...
Eco 405 week 9 quiz strayer
Eco 405 week 9 quiz strayer
UADIGITALS 2017 Liquid7
UADIGITALS 2017 Liquid7
UADIGITALS 2017 D2
UADIGITALS 2017 D2
Derechos humanos en el mundo.
Derechos humanos en el mundo.
Ready mix concrete
Ready mix concrete
Poetry
Poetry
Semelhante a Geek women japanのロゴをhtmlとcssで作る
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
Mori Shingo
HTML入門
HTML入門
sayoko miura
HTML5 for IA
HTML5 for IA
Atsushi HASEGAWA, Ph.D.
Web development fundamental_v2
Web development fundamental_v2
Takuya Kumagai
メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目
Takashi Endo
WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様
株式会社GreenHack
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
Yusuke Kawabata
Ripps BootCamp 02
Ripps BootCamp 02
Shintaro Fujiwara
Htmlのコトバ
Htmlのコトバ
Masakazu Muraoka
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
HTML5コーディング環境を Dreamweaverで構築する
HTML5コーディング環境を Dreamweaverで構築する
Akira Maruyama
Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座
Atsushi Miura
Web講座 第1回
Web講座 第1回
nanametown
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
schoowebcampus
Dreamweaver コードヒントHowTo
Dreamweaver コードヒントHowTo
Akira Maruyama
Html1
Html1
Jun Chiba
【フロントエンド勉強会】 フロントエンド基礎知識
【フロントエンド勉強会】 フロントエンド基礎知識
Sota Takahashi
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
知己 久保
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
Masakazu Muraoka
Semelhante a Geek women japanのロゴをhtmlとcssで作る
(20)
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
HTML入門
HTML入門
HTML5 for IA
HTML5 for IA
Web development fundamental_v2
Web development fundamental_v2
メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目
WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
Ripps BootCamp 02
Ripps BootCamp 02
Htmlのコトバ
Htmlのコトバ
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
HTML5コーディング環境を Dreamweaverで構築する
HTML5コーディング環境を Dreamweaverで構築する
Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座
Web講座 第1回
Web講座 第1回
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Dreamweaver コードヒントHowTo
Dreamweaver コードヒントHowTo
Html1
Html1
【フロントエンド勉強会】 フロントエンド基礎知識
【フロントエンド勉強会】 フロントエンド基礎知識
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
Mais de Lina Katayose
Pythonで ハードウェアを動かす楽しさと ハードウェアハック始めたきっかけ
Pythonで ハードウェアを動かす楽しさと ハードウェアハック始めたきっかけ
Lina Katayose
Python×ドローンについて過去のPyConJP登壇から今までの進化。
Python×ドローンについて過去のPyConJP登壇から今までの進化。
Lina Katayose
実際にワーケーションを実践して思ったこと。
実際にワーケーションを実践して思ったこと。
Lina Katayose
過去2回の登壇内容からのPython×ドローンの進化アップデート内容と今後について展望
過去2回の登壇内容からのPython×ドローンの進化アップデート内容と今後について展望
Lina Katayose
Raspberry Piを使ったモーターのコントロールと応用
Raspberry Piを使ったモーターのコントロールと応用
Lina Katayose
海外のPyLadiesメンバーと交流して思ったこと
海外のPyLadiesメンバーと交流して思ったこと
Lina Katayose
スマホアプリを0から設計してリリースするまでのこと
スマホアプリを0から設計してリリースするまでのこと
Lina Katayose
PyLadies and the importance of community participation
PyLadies and the importance of community participation
Lina Katayose
Pyladies Tokyo LT 20181008
Pyladies Tokyo LT 20181008
Lina Katayose
Making a Drone by Python using RaspberryPi and Google VoiceKit
Making a Drone by Python using RaspberryPi and Google VoiceKit
Lina Katayose
Raspberry PiとPythonでできること
Raspberry PiとPythonでできること
Lina Katayose
Preparation for pycon 2018(cleveland)
Preparation for pycon 2018(cleveland)
Lina Katayose
Python Boot Camp のお話し
Python Boot Camp のお話し
Lina Katayose
すうがく初めの一歩
すうがく初めの一歩
Lina Katayose
Lina katayose pyladies3周年LT
Lina katayose pyladies3周年LT
Lina Katayose
ドローンのフライトコントローラをPythonで制御してみた話
ドローンのフライトコントローラをPythonで制御してみた話
Lina Katayose
私のPython学習法lt
私のPython学習法lt
Lina Katayose
Raspberry pi 3を使ってみてあれこれ
Raspberry pi 3を使ってみてあれこれ
Lina Katayose
Raspberry pi 3を使ってみてあれこれ
Raspberry pi 3を使ってみてあれこれ
Lina Katayose
Mais de Lina Katayose
(19)
Pythonで ハードウェアを動かす楽しさと ハードウェアハック始めたきっかけ
Pythonで ハードウェアを動かす楽しさと ハードウェアハック始めたきっかけ
Python×ドローンについて過去のPyConJP登壇から今までの進化。
Python×ドローンについて過去のPyConJP登壇から今までの進化。
実際にワーケーションを実践して思ったこと。
実際にワーケーションを実践して思ったこと。
過去2回の登壇内容からのPython×ドローンの進化アップデート内容と今後について展望
過去2回の登壇内容からのPython×ドローンの進化アップデート内容と今後について展望
Raspberry Piを使ったモーターのコントロールと応用
Raspberry Piを使ったモーターのコントロールと応用
海外のPyLadiesメンバーと交流して思ったこと
海外のPyLadiesメンバーと交流して思ったこと
スマホアプリを0から設計してリリースするまでのこと
スマホアプリを0から設計してリリースするまでのこと
PyLadies and the importance of community participation
PyLadies and the importance of community participation
Pyladies Tokyo LT 20181008
Pyladies Tokyo LT 20181008
Making a Drone by Python using RaspberryPi and Google VoiceKit
Making a Drone by Python using RaspberryPi and Google VoiceKit
Raspberry PiとPythonでできること
Raspberry PiとPythonでできること
Preparation for pycon 2018(cleveland)
Preparation for pycon 2018(cleveland)
Python Boot Camp のお話し
Python Boot Camp のお話し
すうがく初めの一歩
すうがく初めの一歩
Lina katayose pyladies3周年LT
Lina katayose pyladies3周年LT
ドローンのフライトコントローラをPythonで制御してみた話
ドローンのフライトコントローラをPythonで制御してみた話
私のPython学習法lt
私のPython学習法lt
Raspberry pi 3を使ってみてあれこれ
Raspberry pi 3を使ってみてあれこれ
Raspberry pi 3を使ってみてあれこれ
Raspberry pi 3を使ってみてあれこれ
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/ こちらで公開中!(macのみ、、、)
15.
Geek Women Japanで使った色 ミントな緑
■ #36DFB7 淡いピンク■ #FFC5C5 さわやかな白■ #FFFFFF
16.
最後に 普段使わない技術を別なことに使うのは疲れるが勉 強になる。 電気ガス水道が止まった時のことも考えられる。
(つまり、何かで応用する力)
17.
以上です。
Notas do Editor
学習目標および期待される成果/習得するスキル
学習目標および期待される成果/習得するスキル
学習目標および期待される成果/習得するスキル
学習目標および期待される成果/習得するスキル
学習目標および期待される成果/習得するスキル
学習目標および期待される成果/習得するスキル
学習目標および期待される成果/習得するスキル
学習目標および期待される成果/習得するスキル
学習目標および期待される成果/習得するスキル
学習目標および期待される成果/習得するスキル
学習目標および期待される成果/習得するスキル
学習目標および期待される成果/習得するスキル
学習目標および期待される成果/習得するスキル
学習目標および期待される成果/習得するスキル
講座、講義などのまとめ
講座、講義などのまとめ
Baixar agora