Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2012 web technology by RGBA group
Search
evenwu
January 12, 2013
Technology
140
15k
2012 web technology by RGBA group
RGBA 社群在 2012 年最常被詢問的問題大集合,包含了 重新認識 Web Design、工具軟體、使用 SASS、顏色與形狀、Web 字體、RWD 圖與文、Hi-DPI 設計...
evenwu
January 12, 2013
Tweet
Share
More Decks by evenwu
See All by evenwu
CSS 檔案管理技巧分享
evenwu
137
13k
RWD 一小時就上手
evenwu
107
17k
如何教設計師前端技術
evenwu
45
15k
twitter bootstrap 好用的網頁設計框架
evenwu
92
15k
Other Decks in Technology
See All in Technology
20250913_JAWS_sysad_kobe
takuyay0ne
2
260
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
340
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
410
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
180
組織を巻き込む大規模プラットフォーム移行戦略 〜50+サービスのマルチリージョン・マルチプロダクト化で学んだステークホルダー協働の実践〜 / Platform migration strategy engaging all stakeholders
toshi0607
2
250
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
daiksy
3
1.3k
Wantedlyの開発組織における生成AIの浸透プロジェクトについて
kotominaga
2
130
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい勘所を集めてみました! - / How to start Scrum that is not written in the Scrum Guide 2nd
takaking22
2
240
会社紹介資料 / Sansan Company Profile
sansan33
PRO
7
380k
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
1k
Snowflake×dbtを用いたテレシーのデータ基盤のこれまでとこれから
sagara
0
140
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
270
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Context Engineering - Making Every Token Count
addyosmani
3
64
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Documentation Writing (for coders)
carmenintech
74
5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Making Projects Easy
brettharned
117
6.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Transcript
9 2012 ⋧㏧ု⨶⍂ۢݨ &WFO8V
ⱨگ ‣ ۢݨḑޔࢢትۢݨḑ㌢ޔ ‣ ӱவዅൖ3(#"ݞ㐘㌉ ‣ ᜥፒ2"ࡻ᨟⼏፭⸽ዅʬϫ2"
ƛ &WFO ƛ ⋣㏣⭶⭟ഥ ƛ FWFOEFTJHO༦㉊⭶⭟ ƛ NPCJMF ৠ᳜ፇ௫ 5IF8BMM
ƛ ⋍3(#"ῢ⏪ "#065.&
๏ ⋣㏣⭶⭟⑫ፎ ๏ มⵍⵖ⼱ॆ⑫ፎ ๏ ๖⬋ʱᙖ˯ ๏ ṕխ̙ஂ።ƫᚖ⼞ʱƬ▐⻇㡛 ๏ IUUQSHCBUX
3(#"ݞ⼵ḕ ⮿ⱟ8FC%FTJHO Αᴣ4$44 㐟◠▒᭵ 8FCୗ㕸 38%࢘▒ቕ )J%1*⭺⭣
ྰ⮪ だተ⮿ⱟ8FC%FTJHO
1024 x 768
None
ᵑഌ
Ղᬝ
̩᨟छῂЦʬϫ⋣ڒ 0,⇄ޢ ʪ൘บՁ㋩⌄ ⒀⼱3FTQPOTJWF%FTJHO㡮 བྷ˯ḑ࢘▎Ꮜᕀ⾱⬋ぜΙ˯
ݞ㐜ࢢܛ⪚㡳 ✓ ⬙⬰ʵ℻ት⬕ᐩ ✓ ˶ֽ ✓ ⭄Ꮅ൷ࢇஂ ✓ ፫Ιխ⼋ऽཪ
ᨣͭ⬏だተ⮿ⱟ㡳 ✓ "HJMF ✓ ⁰㌴⬋ ✓ ፄ⭄Ꮅ൷ơፄ⪓⏀ ✓ ⭶⭟ᇪӑ෧㕸
⋧㏧ʳወᵑഌ ̩ϰ⬋ἃ⼶
ᵕᩬˤʳወʪ₋㗔⨶
⋧㏧ወⴁ⭤ឮ
None
None
¡ ၄
None
None
None
None
5IF.BUSJY
5IF.BUSJY
⋣㏣⭶⭟ዅ ⴁ⭤ឮ ḑቂ᱙
ྰ⮪ Αᴣ4$44
ػᴞ$44ፕ̍㞬ݞ㐜㡳 ✓ ᜥፒ᭱ ✓ ᜥፒⱽቆ ✓ ᜥ⻇Ц⭟Ⅼ ✓ ᜥ⻇GVODUJPOぜ⪯Βᴟ ✓
ᜥፒታθḑJFIBDL⭄ᜐታᐲ
ᨣͭ⬏ᴣ4$44㡳 ✓ ፒ᭱ ✓ ፒⱽቆ ✓ ٩Ц⭟Ⅼ ✓ ٩NJYJOぜ⪯Βᴟ ✓
ፒታθḑJFIBDL⭄ᜐታᐲ CZDPNQBTT
ᄂ⠩Αᴣ'JSFBQQ ᆿ4$44 ✓ IUUQGJSFBQQIBOEMJOPDPN ✓ NFOVCBS⒳ዬ⁰ ✓ ൎံ4$44⺨᨟$44 ✓ ⽞ፒӱ̝XFC⭶⭟ณᴟḑ֤ⓗ
.article { font-family: sans-serif; } .article a { color: blue;
} .article { font-family: sans-serif; a { color: blue; } } ᭵ /FTUJOH
.content-navigation { border-color: #3bbfce; color: #2b9eab; margin: 8px; } $blue:
#3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); margin: $margin / 2; } ⲁ 7BSJBCMFT
@mixin table-base($padding) { th { text-align: center; font-weight: bold; }
td, th { padding: $padding; } } .table { @include table-base(2px); } .data { @include table-base(10px); } .table th { text-align: center; font-weight: bold; } .table td, .table th { padding: 2px; } .data th { text-align: center; font-weight: bold; } .data td, .data th { padding: 10px; } 4$44.JYJOT $44
@import "compass"; .author-link { @include float-left; @include link-colors(blue, red); }
DPNQBTT TDTTGSBNFXPSL .author-link { display: inline; float: left; color: blue; } .author-link:hover { color: red; } 1 2
@import "compass"; .logo { @include replace-text-with-dimensions("logo.png"); } DPNQBTT TDTTGSBNFXPSL .logo
{ text-indent: -119988px; overflow: hidden; text-align: left; background-image: url('/images/logo.png?1357639334'); background-repeat: no-repeat; background-position: 50% 50%; width: 214px; height: 50px; }
4$44$PNQBTT ƛ 4$44 IUUQTBTTMBOHDPN ƛ $PNQBTT IUUQDPNQBTTTUZMFPSH
㐛◜▎᭱ ⋣㏣⭶⭟˥ྭ⮦ᝥ༦ḑ
None
ᠩḕᠱḕだ
None
◠だぢፑࡻᨣⒷዯ⑁ሡⲁ
None
㍻ৡḕḕだ
⯞ۙ
̖ৢৢᛖṺਔ $y: #fcd208; .title { color: $y; border-bottom: 5px solid
$y; } ̖ৢৢᛖṺਔ $y: #fcd208; $dark-y: darken($y, 10%); .title { color: $y; border-bottom: 5px solid $dark-y; } 㐟◠㌚ᩬʪᕿ͠CPSEFSةፕ̈ḕ༵ٖ㡳 ̨ϯ⬏⊰˯CPSEFSቕୗ⁶ጌḕ㐟◠
ਙᏂʳૹᑾḕ⮩㡫NJYJOڒ㡳 @mixin title-and-border($color) { color: $color; border-bottom: 5px solid darken($color,
10%); } ℿᚙᘢ⬏ᴣ⼓ᕿ⨲ˮ㡮 .title { @include title-and-border(#fcd208); }
None
ʫᕼḑ㉖㋣㡬
Ӱவ̌ẎṬⵋΘʴʫᕼ
None
None
NOA 5ZQFGBDF 'VUVSB
不運動,前情侶臉書鬧翻,影城禁漢堡外⻝⾷食。最 近沒時間整理推特.....每天都好忙,我對你,今天 ⼤大哥說,早上喝著咖啡,你喜歡就都給你。⾃自然 忘記他們⾏行程的遠近,雖受過欺負,這說是野蠻 的慣習,親戚們多贊稱我,但現在的曆法,覺得 分外悠遠,前回不是因得到勝利(他⼀一⼈人的批 判),實在是無意義的競爭,聽到泉聲和松籟的 奏彈 ⼓ወৡᕸ㐜 不運動,前情侶臉書鬧翻,影城禁漢堡外⻝⾷食。最
近沒時間整理推特.....每天都好忙,我對你,今天 ⼤大哥說,早上喝著咖啡,你喜歡就都給你。⾃自然 忘記他們⾏行程的遠近,雖受過欺負,這說是野蠻 的慣習,親戚們多贊稱我,但現在的曆法,覺得 分外悠遠,前回不是因得到勝利(他⼀一⼈人的批 判),實在是無意義的競爭,聽到泉聲和松籟的 奏彈 ⼓ወৡᕸ㐜
.circle { margin-left: -3px; } 不運動,前情侶臉書鬧翻,影城禁漢堡外⻝⾷食。最 近沒時間整理推特.....每天都好忙,我對你,今天 ⼤大哥說,早上喝著咖啡,你喜歡就都給你。⾃自然 忘記他們⾏行程的遠近,雖受過欺負,這說是野蠻 的慣習,親戚們多贊稱我,但現在的曆法,覺得
分外悠遠,前回不是因得到勝利(他⼀一⼈人的批 判),實在是無意義的競爭,聽到泉聲和松籟的 奏彈 ⼓ወৡᕸ㐜 不運動,前情侶臉書鬧翻,影城禁漢堡外⻝⾷食。最 近沒時間整理推特.....每天都好忙,我對你,今天 ⼤大哥說,早上喝著咖啡,你喜歡就都給你。⾃自然 忘記他們⾏行程的遠近,雖受過欺負,這說是野蠻 的慣習,親戚們多贊稱我,但現在的曆法,覺得 分外悠遠,前回不是因得到勝利(他⼀一⼈人的批 判),實在是無意義的競爭,聽到泉聲和松籟的 奏彈 ⼓ወৡᕸ㐜
Sign in Sign up password username Sign in Sign up
password username
.btn:first-child { margin-left: -3px; } Sign in Sign up password
username Sign in Sign up password username
8FCୗ㕸 ِ̩ፎ⼫՚ḑݞ㐘
None
None
ᨣ̍㞬˄ቕୗ⽸㞬〸㡳 ๏ ஆ℀ḑ㌱┗୕㕴ፒ㊶ ๏ 8JO㏰⭶Ïቭ⊁ኯ㕴 ๏ .BD㏰⭶Ï㞴㕴5$ ๏ ٵൕ٪ʵ⊶ʬ ๏
୕㕴܃ⴗ
ਙͭ⭈᜔㡳 ๏ 'MBTIÏṕխፒয়ぞ⪓⏀ʵሗᄺ'MBTI ๏ ࢘ᬜÏ͙ፖࠨⳚᇓয়ơ෧;[[ ๏ $BOWBTÏ⭶⭟ഥʵፎᴟ;[[ ๏ !GPOUGBDFÏ ⭶ஂ⪯㌜ơ୕ࣘფᘐ;[[ʺᗃᐲⵖয়
㌮℄ୗ㕸ፙׁ
8FCGPOUTፙׁ ๏ 5ZQFLJUÏᙁቒ IUUQTUZQFLJUDPN ๏ +VTUGPOUψቒ㡢⍑ ⇄㡣 IUUQXXXKVTUGPOUDPN ๏ 5ZQFTRVBSFነቒ
IUUQUZQFTRVBSFDPN
None
None
None
None
None
ʪ⬏ᴣናቕٽ5@5
None
None
8JOEPXT .BD #FGPSF
8JOEPXT .BD "GUFS
ⶤൗ٪⊺ʪୗࣘ
ု⨶ݞ㐜 㕍 㐷ῤ Өୗ㕸 ୗ㕸㉐ 㐷ῤ ተḕୗ㕸 ⻈⮻ٸEPNBJO нᡄ⬋ḑ୕ ځTFSWFS⬋ᛩ⊓ٸ୕㕴
ʳ୕㕴 ᡊᏤՁᎵ ୕㕴ʳ
ୗ㕸㉐ݞ㐜 '065 'MBTIPG6OTUZMFE5FYU ๏ IUUQEFNPFWFOEFTJHOUX
⭺⭣ധ༐⬏ᄁ՟ፇ㡠 ๏ ʵ⬋㐳ῠ〴୕ÏӨය୕Ӕ㋹⡃㡮 ๏ ℻୕㕴ӧทӻ㐳ῠ୕㕴 ๏ ഏ፟㐳ῠḑዏϸ٩̩ፄᏥۙ
㐷ῤ Өୗ㕸 ୗ㕸㉐ 㐷ῤ ተḕୗ㕸 XGMPBEJOH XGBDUJWF PS 讀取失敗時... XGJOBDUJWF
<html class="wf-loading" > <html class="wf-active" > <html class="wf-inactive" >
.title { // title style here }
.title { // title style here .wf-loading & { visibility:
hidden; } .wf-active & { visibility: visible; } } ⱺٕዒʳ㐷ῤ ⱺٕ֤ዒ㐷ῤ
.title { // title style here @include transition(opacity .3s linear);
.wf-loading & { visibility: hidden; opacity: 0; } .wf-active & { visibility: visible; opacity: 1; } } ⱺٕዒʳ㐷ῤ ⱺٕ֤ዒ㐷ῤ ⑁ʸᴣӧḕቶ්㐷ῤ㡠
%FGBVMU 04 $POEFOTFE'POU 5ZQFLJU ৡ˯㡮 .wf-active .date { font-size: 2em;
}
ု⨶ݞ㐜 ‣ ୕㕴ፖׁݘϱ ‣ Βᴟ₼ᩨ ᜥ⼙⋣ 㕍
.title { // title style here @include transition(opacity .3s linear);
.wf-loading & { visibility: hidden; opacity: 0; } .wf-active & { visibility: visible; opacity: 1; } .wf-inactive & { visibility: visible; opacity: 1; font-family: helvetcia, arial, sans-serif; } } ፙׁ৩ሪḕዒϷˤ٩̨⢫⏄
3FTQPOTJWF%FTJHO ࢘ቒḑቭݞ㐘
࢘
1 2 1
࢘ḕ᭵ᝈ <img src="foo.png"> @media (max-width: 320px) { img { max-width:
100%; } }
࢘ḕ᭵ᝈ <img src="foo.png" height="640" width="480"> @media (max-width: 320px) { img
{ max-width: 100%; height: auto; } }
1 2 1 2
0px 0px IFSF Loading...
1 2 Onload! 85'
⭈᜔ݞ㐜 ƛ ϰഏ፟࢘ᬜⱶٕ˘խḑ㕸൷ࢇஂ ƛ ᬜขᬜḑᚚΝ
⭈᜔ݞ㐜 100% auto img { width: 100%; height: auto; }
⭈᜔ݞ㐜 100% 100% / 16 * 9 img { width:
100%; height: 100% / 16 * 9; }
⭈᜔ݞ㐜 .img-wrapper { position: relative; width: 100%; height: 0; padding-top:
100% / 16 * 9; } img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .img-wrapper <img>
Ҽ⎟㟂 ƛ ٤ⓗࢇஂᚚΝ ƛ ㊣ᙎდֽ ƛ ࢘ᬜơขᬜḒ٩ ƛ ขᬜӱ⽆ᴟ㡢ൟ˚⾱ዅ℻ᚚ㡣
ቕ
1
1 咳咳,我現在還沒出 全⼒力呢...
咳咳,我還沒出全⼒力 呢... ⽘௬
卡卡弱特,你⾝身為賽亞 ⼈人的⾃自尊, 難道不會受傷 嗎 ⽘௬
卡卡弱特,你⾝身為賽亞⼈人的⾃自尊, 難道不會受傷 嗎 َ⽘௬
IUUQTHJUIVCDPNESZNBO.BDIPKT
咳咳,我還沒出全⼒力 呢... ⽘௬
咳咳,我還沒出 全⼒力呢... ⽢٩̨
卡卡弱特,你⾝身為賽亞 ⼈人的⾃自尊, 難道不會受傷 嗎 ⽘௬
卡卡弱特,你⾝身為賽亞 ⼈人的⾃自尊, 難道不會 受傷嗎 ⽢٩̨
卡卡弱特,你⾝身為賽亞⼈人的⾃自尊, 難道不會受傷 嗎 َ⽘௬
卡卡弱特,你⾝身為賽亞⼈人的⾃自尊, 難道不會 受傷嗎 ⽢٩̨
IUUQTHJUIVCDPNESZNBO.BDIPKT
)J%1* 3FUJOBEJTQMBZ
)J%1*ፕ̍㞬ਔ㡳 ✓ቭᤰ ✓࢘ᬜ㐳ῠፄᠳይ ✓ፄኴ㉬ⱶḑቒ୕
ሚᄽ)J%1*ፕ̍㞬ʳਔ㡳 ✓࢘ᗃⱽয়˯ ✓░ᦫ⬲ࠨ㞨⻇㡮 ✓ᬀာ⨱ᙛḑVTFS
̖ৢʳⰫ࢘
ᴣ̨࢘ḕ⽖ᇍ㡳
ሚᄽ)J%1*ḕӱ̜⽖ᇍ ✓ $44 ✓ 8FCGPOUT ✓ 47(
ṏぢΑᴣ$44 ✓ ⬶CPSEFSSBEJVT ✓ ㋉ขCPYTIBEPX UFYUTIBEPX ✓ ᤉఅMJOFBSHSBEJFOU SBEJBMHSBEJFOU
.box { border: 1px solid #ccc; box-shadow: 0 5px 10px
rgba(0,0,0,.3); border-radius: 10px; } $44 Αᴟᬜ
8FCGPOUT ✓ ᬿᙥḑ୕㕴ΒᴟXFCGPOUTʵ⬋ᴟ࢘ᬜ ✓ JDPOGPOUT ✓ ⎛㞾㡩ޢ◜
8FCGPOUT Αᴟᬜ AppWorks
None
TZNCPMGPOUT IPWFS XJUIPVUGPOUT
٩⩰ᅓ்
ʳㅣḕJDPOGPOUTⴁᢏ ✓ IUUQTZNCPMTFUDPN ✓ IUUQQJDUPTDD ✓ IUUQGPSUBXFTPNFHJUIVCDPN'POU "XFTPNF ✓ IUUQBEBNXIJUDSPGUDPNDMJNBDPOT
GPOU
47( 47(5JOZ ✓ ځぞᗃᐲ㡦ሡয়9˥ʵ ✓ ٩◜ ✓ *MMVTUSBUPS⪩͵⺨ୖأ٩ ✓ 47(5JOZ
✓ ʵሗᄺᕻ∳ơ㋉ข℻⪯㌜ఋ
None
ʳሚᄽ47(ḕ⬶ࠨ ✓ *& ✓ "OESPJE 㡢٩̩Ⅼ˯㡣
<a class="brand" href="/"> <!--[if IE]> <div class="logo logo_ie"></div> <![endif]--> <!--[if
!IE]--> <div class="logo logo_svg"></div> <!--[endif]--> </a> .logo { width: 220px; height: 30px; } .logo_svg { background: image-url("thewall-logo.svg"); } .logo_ie { background: image-url("thewall-logo.png"); } ፏ⇈ޢḕՓቴ
None
None
2013 だተ⮿ⱟ8FC%FTJHO Αᴣ4"44 㐟◠▒᭵ 8FCୗ㕸 38%࢘▒ቕ )J%1*⭺⭣
5IBOLT ᙍ⻜㌉⊛ൖ൷3(#"ݞ㐘㌉ ٍ֥IUUQSHCBUX ਗᎿፒ̵ͮݞ㐘ᙍ⻜'#⑶⊩ IUUQGBDFCPPLDPNFWFOXV &WFO