益 子 貴 寛 株 式 会 社 サイバーガーデン なんでも 知 っておかないとマズい ディレクター という 立 ち 位 置
|
|
|
- かんじ とくやす
- 9 years ago
- Views:
Transcription
1 新 しいマークアップ 環 境 に キャッチアップ! CSS Nite LP, Disk 31:Shift7 益 子 貴 寛 小 山 田 晃 浩
2 益 子 貴 寛 株 式 会 社 サイバーガーデン なんでも 知 っておかないとマズい ディレクター という 立 ち 位 置
3 小 山 田 晃 浩 株 式 会 社 ピクセルグリッド バリバリの フロントエンドエンジニア という 立 ち 位 置
4 コンビ3 年 目 これまでの 内 容 は 当 たったのか!?
5
6
7
8
9
10
11
12
13
14
15
16
17
18 1,700 DOCTYPE
19
20 HTML5 9.4% 59.4%
21 CSS Preprocessor
22 CSS3
23
24
25
26
27
28
29
30 Sass
31 CSS Nite LP, Disk32 Sass3.3
32 コンテンツのパーツ 化
33 OOCSS, SMACSS, BEM and others
34 BEM?
35
36
37
38
39
40
41
42 Block Block Block Block Block
43
44 Block Block Block Block Block
45
46 Element Element Element Element Element Element
47
48 modifier
49
50 Element Element
51
52 Element Element Element Element Element Element Element Element
53 modifier modifier
54 Class
55 <div class="pagination"> <div class="pagination prev"> 前 </div> <ul class="pagination list"> <li class="pagination item">1</li> <li class="pagination item">2</li> <li class="pagination item">3</li> </ul> <div class="pagination next"> 次 </div> </div>
56 <div class="pagination"> <div class="pagination prev"> 前 </div> <ul class="pagination list"> <li class="pagination item">1</li> <li class="pagination item">2</li> <li class="pagination item">3</li> </ul> <div class="pagination next"> 次 </div> </div>
57 <div class="pagination"> <div class="pagination prev pagination prev_disable_true"> 前 </div> <ul class="pagination list"> <li class="pagination item pagination item_current_true">1</li> <li class="pagination item">2</li> <li class="pagination item">3</li> </ul> <div class="pagination next"> 次 </div> </div>
58 Block Element modifier pagination item_current_true
59 Block Element modifier pagination item_current_true property value
60 MindBeming
61 mod-gallery-image--current
62
63 スタイルガイド
64
65
66 Starbucks
67 reference/styleguide/
68 reference/styleguide/
69 GitHub
70
71
72
73 CSSフレームワーク
74
75
76
77
78 bootstrap.less // Core variables and "mixins.less"; // "normalize.less"; "print.less"; // Core "grid.less"; "tables.less"; "buttons.less";
79
80
81 CSS
82 ビルドタスクはGruntが 主 流 に
83
84
85
86
87
88
89
90 進 化 を 続 けるInternet Explorer
91 10 17 IE11
92
93
94
95 WebKitと 決 別 したChrome
96
97
98
99 Chrome Blink
100 ますます 存 在 感 を 失 うOpera
101
102 Opera15 Chromium
103 まとめ
104
105 CSS Preprocessor
106
107
108
109
110
_勉強会_丸山さつき_v3
CSS 2019/6/21 1 CSS CSS CSS!2 CSS Web!3 CSS HTML CSS CSS!4 CSS!5 !6 Id class id class CSS!7 !8 body 16px p 16px px, rem, em, %!9 !10 body 16px p 16px 1 CSS!11 !12 CSS CSS!13 CSS 4 CSS 1. OOCSS 2. SMACSS
p { color: yellow } div#hoge { color: green; } div.fuga { color: red; } div { color: orange; } div[id=hoge] { color: blue; } div#hoge
【お試し版】Web制作者のためのCSS設計の教科書（非売品）
UI Frontrend JS Girls html5j HTML5 CSS3 iphone Twitter : http://twitter.com/hiloki : http://inkdesign.jp GitHub : https://github.com/hiloki/ URL http://www.impressjapan.jp/books/1113101128 Web 10 IT UI
HTML5 による Webサイト制作の基本 株式会社サイバーガーデン 益子 貴寛 2012年4月7日 土曜日 CSS Nite in OKAYAMA, Vol.2 with Microsoft アップル http://www.apple.com/jp/ ローソン http://www.lawson.co.jp/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 http://www.moj.go.jp/press/090130-1.html 55 56 57
31 Jul.2012 API Application Program Interface Markup SEMANTICS OFFLINE & STORAGE DEVICE ACCESS CONNECTIVITY MULTIMEDIA 3D, GRAPHICS EFFECTS PERFORMANCE INTEGRATION CSS3 HTML5 CSS3 JavaScript WHATWG
Homepage HTML+CSS Flash JavaScript Homepage Homepage Homepage Homepage Web HTML Hyper Text Markup Language XHTML XHTML HTML5 CSS Cascading Style Sheet
2012 Homepage HTML+CSS Flash JavaScript Homepage Homepage Homepage Homepage Web HTML Hyper Text Markup Language XHTML XHTML HTML5 CSS Cascading Style Sheets CSS2 CSS3 Web Web2.0 Web3.0 Web IT Web Homepage
1 1 1.......................... 1 2........................... 1 3 CSS CSS.................... 2 4........................... 3 2 4 1................
HTML 1 1 1.......................... 1 2........................... 1 3 CSS CSS.................... 2 4........................... 3 2 4 1................ 4 2..................... 6 3.....................
1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1..............................
1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1.............................. 4 2.............................. 6 3...........................
Flash Player ローカル設定マネージャー
ADOBE FLASH PLAYER http://help.adobe.com/ja_jp/legalnotices/index.html iii................................................................................................................. 1...........................................................................................................
3 65 1 4 5 67 1 2 5 5 3 6 68 23 69 2 6 8m 10m 1. 2. 3. 70 66 600km 11 3 16 21 3 0 3m 2m 0 5m 71 11 3 17 0 5 0 0 72 73 74 75 3 76 77 4 78 79 5 80 81 82 83 2 83 . 84 6 a b c d e f g a b c 3 85 16 86 87 7
1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6.....................
web 0448039 1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6...................... 3 7 HTML CSS.................... 3 8....................
2 2 2 2 3 Opera Browser 2 5-12
Opera Browser 2 5 1 5-11 2 2 2 2 3 Opera Browser 2 5-12 1 2 2 5 1 1 2 5-13 1 2 21 1 2 2 5-14 1 2 5 3 2 5-15 1 2 1 2 2 2 22 2 2 5-16 3 1 2 3 4 5 5 2 1 2 1 5-17 1 2 3 1 2 3 1 2 5-18 2 5 5-19 1 1 1 1 5-20
9 Bootstrap Font Awesome 52 + gem 'bootstrap', '4.0.0.alpha6' 53 + gem 'tether-rails' Gem bootstrap tether-rails Bootstrap JavaScript Tether Ctrl-C Ra
9 Bootstrap Font Awesome Bootstrap Font Awesome Simple- Greeter 9.1 Bootstrap CSS/JavaScript Bootstrap PC Web SimpleGreeter Bootstrap Bootstrap 4 Bootstrap 4 2017 1 Bootstrap 4 Gemfile Gemfile 49 gem 'spring-watcher-listen',
textbook.indd
02 XHTML+CSS part2 CSS Topics 前 回 習 得 した 基 礎 CSS を 元 に ボックス CLASS ID の 概 念 を 習 得 ボックスレイアウトを 用 いた 2 カラムのサイト 構 築 をします An Introduction to Webdesign + XHTML/CSS Coding 18 01. XHTML+CSS 2 19 20 21 22 23 24
23回会社説明会資料（HP用）
FFG Part FFG 09 09 1 20074 Core Core Bank Bank 170 50 32 12 68 IT 4050 4050 Core Core Value Value Part Part 2006 3 06/3 06/12 06/3 30.0% 4.5% 25.5% 26.2% 0.7% 47,500 6,300 41,200 42,200
to-r
to-r We re targeting a 1.0 release within the next few weeks. 1.0 IE6 jquery Mobile Sample
1 1 1........................... 1 2.............................. 1 2 2 1........................... 2 2...................... 3 3...................
0448051 1 1 1........................... 1 2.............................. 1 2 2 1........................... 2 2...................... 3 3.................... 4 4........................ 6 5...........................
4 15 4.1..................................... 15 4.2....................................... 15 4.2.1................................... 15 4.2.2......
2011 1 26 1 3 2 3 2.1......................................... 3 2.2..................................... 3 2.3 QRedit................................. 4 2.3.1..................................... 5 2.3.2
2 Rails pico planner camel case camel pico planner _ pico_planner snake case snake - chain case chain pico planner pico-planner CSS id class 2.3 Rails
2 Rails 2.1 DBMS PicoPlanner SimpleGreeter DBMS Ruby on Rails 3 PostgreSQL MySQL SQLite3 SQLite3 2.2 Web PicoPlanner pico planner 11 2 Rails pico planner camel case camel pico planner _ pico_planner snake
¥Í¥Ã¥È¥ï¡¼¥¯¥×¥í¥°¥é¥ß¥ó¥°ÆÃÏÀ
HTTP/2 HTTP/1.1 (1999 ) 2015 5 RFC7540! Google SPDY ( ) 1 TCP TCP TLS HTTP Upgrade HTTP 1 HPACK 1 / 24 3 : HTTP : HTML4 2 / 24 testform.html: POST testform2.html: GET iedemo: IE default.css: CSS proxy.pac:
untitled
PC Internet Explorer Windows SafariMac OS X Mozilla FireFoxWindows / Macintosh Google ChromeWindows / Macintosh IE + Google Windows 1 Internet Explorer 10.x (O)(A) Internet Explorer (O) (B) (B) (B) 2 Web
Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード]
![Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード]](/thumbs/39/20117447.jpg "Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード]")
COPYRIGHT 2013 CYBRiDGE CORPORATION COPYRIGHT 2013 CYBRiDGE CORPORATION 2 TEL [] COPYRIGHT 2013 CYBRiDGE CORPORATION 3 CSS CSS2.1 CSS3 CSS CSS3IEhtc js CSS ファイル 名 内 容 格 納 フォルダ common.css style.css xxx.css
untitled
25 10 12 11 24 (1) 14 (2) 26 10 44 (3) (4) (5) 27 10 68 (6) (7) (8) 25 10 ( ) (1) (2) (3) ) city.yokohama.lg.jp city.yokohama.jp WEB WEB WEB WEB WEB WEB 1 25 10 WEB WEB (1) (2) (3) (4) 25 10 (1) WEB (2)
54 144 144 144 144 144 80 152 84 122 HTML
54 144 144 144 144 144 80 152 84 122 HTML P20 P24 P28 P40 P54 P84 P122 P138 P144 P152 P220 P234 P240 P242 1 1-1 1-2 1-3 1-4 1-5 1 1-6 1 2 2-1 2-2 A C D E F 2 G H I 2-3 2-4 C D E E A 2
untitled
MoogaOne 1. MoogaOne... 1 2. MoogaOne... 1 3.... 1 4.... 1 5.... 2 6.... 2 1.... 2 2.... 2 3. Template.htm... 2 4. index.htm... 4 [ ]... 4 5.... 4 6.... 6 7.... 6 8.... 6 [Template.htm Template-e.htm
経営論集2011_07_小松先生.indd
20 1 2010 103 125 HTML+CSS HTML CSS CMS Web CMS CMS CMS CMS DreamWeaver Web Web CMS Web Web CSS Web Eclipse HTML CSS Web Web HTML CSS Web HTML CSS Web HTML CSS Web 1 Web Web HTML Web 103 HTML+CSS Web HTML
CMS 2006 0 10 20 30 40 50 60 70 80 90 100 CMS 2010 0 10 20 30 40 50 60 70 80 90 100 次世代CMSの話 興味深い話がありましたので ご紹介します CSS Nite in Ginza, Vol.50 2010年7月22日 次世代のCMSに求めるもの 中川 直樹さん アン ティー ファクトリー
untitled
16.4 35.6 44.6 49.3 49.3 51.8 60.5 69.0 81.0 78.2 78.7 77.9 82.9 88.4 88.5 98.7 26,931 25,31 11,03 16,256 10,32 6,872 60.36 40.80 62.26 11,189 10,62 12,56 11,46 6,985 60.95 12,87 7,919 61.53 12,44 7,657
INSメイトV30Slim取扱説明書（5版2008.3）
79 1 CD-ROM 80 1 Internet 81 1 8 8 1 1 5 6 8 1 7 85 1 86 1 5 6 87 1 88 89 1 5 6 1 90 1 5 6 7 91 8 9 10 11 9 1 1 1 1 9 15 16 17 9 1 18 19 95 1 96 1 97 1 98 1 5 99 6 7 8 100 1 1 101 5 6 10 1 10 10 1 105
山梨県ホームページ作成ガイドライン
17 7 ...1...4...4...4...4...5...5 W3C...5...6...6...6...7...8...8...10...10...10... 11...12...12...13...13...13...14...14...14...15...15...16...16...16...16...16...17...18 15 (2003 ) 69.7 81.1 43.6 19.6
() 50 84 63 22 25 63 22 () () () () () () () () () () () () () 56 26 9 3 2 3 750m 139 25 13 26 152 36 191 300 100 39 () Twitter )
HTML教科書 HTML5レベル1読者特典
f i t a c i r t e i o H T M HTML HTML5 1 n L 90 5 s P r o f e C l a n o i s HTML HTML5 1 HTML5 2 HTML HTML5 1 1 A. GET B. TRACE C. SAVE D. PUT E. OPTIONS 2 A. Authorization B. Referer C. User-Agent D.
0序文‐1章.indd
本 書 に 記 載 されたURL 等 は 執 筆 時 点 でのものであり 予 告 なく 変 更 される 場 合 があります 本 書 の 使 用 ( 本 書 のとおりに 操 作 を 行 う 場 合 を 含 む)により 万 一 直 接 的 間 接 的 に 損 害 が 発 生 し ても 出 版 社 および 著 者 は 一 切 の 責 任 を 負 いかねますので あらかじめご 了 承 下 さい Microsoft
WCAN
Web or App Web or App App 1.PC 2. 3. HTML Web design skill app design skill? ターゲットが必要 Web or App Web PC PC PC Web PC Web Web Media Queries CSS3 HTML responsible design PC Media
公図閲覧操作マニュアル
2009/03/09 NeoGIS 2010/08/06 NeoGIS - -------------------------------------------------------------- 4 -------------------------------------------------------------- 5 --------------------------------------------------------------
コンピュータグラフィックス - 第4回 色彩の表現
.. 4 2013 10 9 ( ) 2013 10 9 1 / 22 3 3 3 ( ) 2013 10 9 2 / 22 380 nm 780 nm 1 nm = 10 9 m ( ) 2013 10 9 3 / 22 3 3 (S M L ) 3 3 3 ( ) 2013 10 9 4 / 22 加法混色 光の 3 原色を組み合わせることで 様々な色を表現できる 光を重ねて別の色を作ることを加法混色と呼ぶ
16 1 8 29 12 1 ... 3... 4 1.... 4 2.... 5... 6 3.... 6 4.... 6 5.... 6 6. HTML... 7... 8 7.... 8 8.... 10 9.... 12... 15 10.... 15 11.... 16... 19 12.... 19... 20 13... 20... 21 14.... 21 15.... 22...
Web制作者のためのSassの教科書 お試し版
Web 2013 1 Web CSS Space http://latele.co.jp/ http://css-happylife.com/ http://nekonekocube.com/ Web EC Web EC Sou-Lab http://sou-lab.com/ http://blog.sou-lab.com/ http://bebe-log.com/ Latele WEBCRE8.jp
IE9 Beta版のここがいい、ここは直して欲しい ～裏HTML5～ Microsoft 2010 MVP Open Day Japan
HTML5 の衝撃 ~ なぜ HTML5 なのか?HTML5 が目指す世界とは ~ CSS Nite in Shinagawa HTML5+IE9 Web Camp 2011 年 3 月 6 日 有限会社 futomi 代表取締役羽田野太巳 http://www.html5.jp/ http://www.futomi.com/ http://twitter.com/futomi/ 羽田野
5V 2.4 DSOF 4 1 1-1 1-2 5V 1-3 SET RESET 5V 5V 1-4 1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 1 2 3 4 5 2 2-1 SET RESET 5V 5V 2-2 1 2 3 5V 5V 1 2 3 4 2-3 2-4
slide.key
Responsive Web Design Adaptive Web Design マルチ 環 境 対 応 の 考 え 方 考 え 方は? 違 いは? Responsive Web Design.content {! position: absolute;! }! @media screen and (min-width: 768px) {!.content {! position: relative;!
54 5 PHP Web hellow.php 1:<?php 2: echo "Hellow, PHP!Y=n"; 3:?> echo PHP C 2: printf("hellow, PHP!Y=n"); PHP (php) $ php hellow.php Hellow, PHP! 5.1.2
53 5 PHP Web Web 1 Web OS (Web) HTML Web Web Web 5.1 PHP Web PHP ( ) 5.1.1 hellow.php ( ) Hellow, PHP! PHP hellow.php PHP HTML PHP 54 5 PHP Web hellow.php 1:
PDF PDF Windows Vista Windows Vista Windows Windows XP Windows XP Windows Microsoft Office Excel 2007 Excel 2007 Excel Microsoft Office Excel 2003 Excel 2003 Excel Windows Internet Explorer 7 Internet
about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理
CSS Taichi Kaminogoya 2007-03-24T13:30:00+09:00 about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理 CSS photo by timlovesbrian. http://www.flickr.com/photos/cmsspork/417022096/ http://creativecommons.org/licenses/by/3.0/
本棚表示キット
14 製 -SU010436-02 第 2 版 :2015 年 5 月 26 日 第 1 章 はじめに... 3 1-1. 本 棚 表 示 キットとは?... 4 1-2. 動 作 環 境 ( 閲 覧 側 )... 5 第 2 章 基 本 的 な 使 い 方... 6 2-1. テンプレートの 構 成... 7 2-2. 作 成 手 順... 11 2-3. コンテンツの 格 納... 12 2-4.
transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動
1225-8 練習 8 Translate Balls(translateX, translatey, translate) transform プロパティの translate 関数を使用して 2 つのボールを斜めに転がすトランジシ ョンを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると 2 つのボールが斜 めに転がります 動きの仕組み このトランジションは
Web 設計入門
情報処理技法 ( マルチメディアと表現 )I 第 12 回 CSS によるレイアウトデザイン (2) D.Mitsuhashi 1 クロスブラウジング D.Mitsuhashi 2 クロスブラウジング ブラウザや OS によって レンダリングには少なからず差異が存在する 同じソースで記述しても 表示が異なる場合がある なるべく 表示の差異を最小化し, 共通の視覚的デザインを提供すべき D.Mitsuhashi
Student Help
(Activity Help) システム 推 奨 環 境... 2 PC 要 件... 2 MAC 要 件... 2 よくある 質 問... 2 Smart Choice Online Practice を 起 動 するために 必 要 なハードウェアまたはソフトウェアは?.. 3 Flash Player のダウンロード 方 法 は?... 3 個 人 情 報 の 変 更 方 法 は?( 名 前 パスワード
CSSNiteLP51-s7-kubo.key
CSS Nite LP51 Reboot Dreamweaver Dreamweaver 10th .foo width: 980px margin: auto p margin: 1em 0 a color: #000 text-decoration: none .foo { width: 980px; margin: auto; p { margin: 1em 0; a { color:
2004-2006 2004-2006 CSS Web Quiz LOVE PC 2012 4 Windows 8 / CPP Fluid PE CSS3 RWD Quiz 1. 2. 3. 4. 1. 2. 3. 4. CSS3 #btn {! display:block;! width:300px;! font-size:28px;! font-weight:bold;!
/ 0/0/ : 実 結 果 HTMLファイルを 表 します 下 図 の 画 が 表 されます " 出 し"の 部 分 をクリックすると"コンテンツですよ "の 字 が 表 されます もう 度 " 出 し"をクリックすると"コンテンツですよ "の 字 が 非 表 になります 折 りたたみパネルの 基
/ 0/0/ : [CSS] 折 りたたみ 可 能 なパネルの 作 成 - CSSのみを 利 した 折 りたたみ 領 域 / アコー ディオンパネル このページのタグ:[CSS] [アコーディオンパネル] 新 着 記 事 覧 タグ 覧 トップページ ipentec.com CSSのみを 利 した 折 りたたみ 可 能 なパネル( 折 りたたみ 可 能 領 域 )を 実 現 するコードを 紹 介 します