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
HTML_CSS_前端基礎講座-4.pdf
Search
winwu
October 07, 2016
Programming
0
440
HTML_CSS_前端基礎講座-4.pdf
winwu
October 07, 2016
Tweet
Share
More Decks by winwu
See All by winwu
Google Data Studio 分享
winwu
0
110
Google Analytics 分享 3 - 內容分組/自訂廣告活動/目標/事件
winwu
0
100
Google Analytics 分享 2 - 版面配置/資訊主頁/資料層級
winwu
0
320
Google Analytics 分享 1 - 基礎知識篇
winwu
0
350
HTML/CSS 前端基礎講座-3
winwu
0
460
HTML/CSS 前端基礎講座-2
winwu
0
480
2016 HTML CSS 前端基礎講座-1
winwu
1
560
2016 中正大學 weic.tw - RWD
winwu
3
1k
JSON-LD 簡介
winwu
29
980
Other Decks in Programming
See All in Programming
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
270
CSC305 Summer Lecture 06
javiergs
PRO
0
100
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
600
AWS Serverless Application Model入門_20250708
smatsuzaki
0
130
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
880
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.5k
Langfuseと歩む生成AI活用推進
licux
3
300
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.3k
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
13
2.8k
The State of Fluid (2025)
s2b
0
200
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
1
2.1k
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
73
5k
A Tale of Four Properties
chriscoyier
160
23k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Embracing the Ebb and Flow
colly
87
4.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Transcript
#PPUTUSBQʧୗ 88$PEF5BJQFJ'&4UVEZ(SPVQ !ZJZJOHXV 4ZOUSFOE''SJEBZ 0DUPCFS
IUUQHFUCPPUTUSBQDPN
̿Bootstrap is the most popular HTML, CSS, and JS framework
for developing responsive, mobile first projects on the web.̀ y֜ၣ #PPUTUSBQJTn
Ӟ㮆ٍ磪毆戔 CSS 䰬ୗ, 奲կ犥现Ӟ犚 JavaScript 秇奲ጱ獮ᒒ Framework牧虏樄咳Ո㹓盠蝧樄咳獮ᒒՕ ᶎ牐 ౬̩༑Ⴍ ᄿ່ٙႭج
IUUQFYQPHFUCPPUTUSBQDPN ϞࡳԬၣ१݊͜#PPUTUSBQਂ̈Ըٙ
• (1) 虏䌘ෝ CSS/JavaScript 犋ᆧጱ樄咳Ո㹓牧ݝᥝ 䨝䌃 HTML牧䋊聜 Bootstrap 疰ݢ犥仂斕獮ᒒՕᶎ ጱ矎粚ದૣ牐ݚक़䨝አӞ讨
JavaScript牧犖胼墋㻌 狶ڊӞ犚चጱ㵕 UI牐 Ꮄැί
• (2) 犋ॡ磪碻樌蒂ቘ戔懯牧獍ݪ㴄অ犖䷱磪戔懯䒍 ጱ眐丆牐 Ꮄැί
• (3) 螕ݳ䌃 Code 穉叨ڊ Prototype ฎ PPT 螭ᥝ盠ጱՈ (犋螂蝡圵Ո盄މ...)
牐 Ꮄැί • (4) ॠኞ疰磪蒂ቘঅ RWD 犥现猋磪 Grid System牧螭磪 盄ग़অአጱ helper牧犥现 icon牐 • (5) 犋ॡ襑ᥝ臺碻樌戔懯ጱ盅ݣՕᶎ牐
• 犋螕ݳ翕ᒊ觓໒ Layout 螂ෝ粬獨ጱ翕ᒊ (ই篷ဩ瞟ڊ Grid System ฎತ犋ڊ粬磪憒㳷ጱ翕ᒊ)牐 • 獮๗䋊聜ใ娄य़夹Ӿ樌纷ଶ櫞牧֕舙盄毱耆ֵአک
Bootstrap牧獮๗ጱ䋊聜౮疰独牐 Εැί
νОක ЫცࠅՈ௪ਿ͉ٙ)5.-ঐɢf ЫცࠅՈ௪ਿ͉ٙ$44͜جf ЫცࠅϞԴ͜ᇜ፨ኜԸක೯)5.-$44 +BWB4DSJQUٙঐɢf ¨ਿ͉©ՇࡈοϞᓃᗭ່֛dШཫኪ୦வԬཫ௪ٝᗆ݊̀ࠅٙf
νОԴ͜ճ Ց֜ၣɨ༱#PPUTUSBQ ݟ(FUUJOH4UBSUFEࠫࠦdኪ୦νОί)5.- ˏɝቇٙ$44 +BWB4DSJQU ˏɝ#PPUTUSBQٙ+BWB4DSJQUʘۃɓ֛ࠅˏɝK2VFSZdΪމ#PPUTUSBQ ԱK2VFSZ Չྼτༀ#PPUTUSBQٙ˙όϞܘεdίϤ̥݊ᑘԷɨ༱ᇜᙇλٙ௰Գʷ
$44 +BWB4DSJQUٙᏦࣩdɨ༱ܝ༆Ꮐᐵܝ׳ՑІʉৣႡλٙၣࠫͦɨf
$44ணࠇ˙όʧୗ л͜#PPUTUSBQ່֛λٙ$44DMBTTOBNFd˸ʿภ ৣணࠇλٙ)5.-ഐʘɨdІ್̙˸ପ͛̈ՈϞ ഐٙ)5.-DPEF˸ʿɓߧٙ6*f
࢙ኜ$POUBJOFS л͜DPOUBJOFSא݊DPOUBJOFSGMVJE̍ᔧࠫࠦהϞ ٙ)5.-ʩdא݊ఊዹԴࣛ͜d͜Ը̍ᔧၣࣸӻ ୕ٙ)5.-ʩ९f
࢙ኜ$POUBJOFS DPOUBJOFS38%ШϞո֛௰ɽᄱdཫண̸̛ໄʕf DPOUBJOFSGMVJE38%˲Цတፃ࿇ᄱܓf .container .container-fluid TDSFFO TDSFFO
ၣࣸӻ୕(SJE4ZTUFN ̀׳ίDPOUBJOFSא݊DPOUBJOFSGMVJEʘʫf ɓΐ̍ίSPXd༁ࠦΎʲDPMVNO DPMYYY f
ၣࣸӻ୕(SJE4ZTUFN ίSPX༁ࠦٙDPMYYZZ YY˾ڌცࠅЪٙ͜CSFBLQPJOUٙ࠽dνYT TN NE MH ༉Ԉɨࠫ ZZ˾ڌDPMVNOٙ࠽d̙˸݊_dШίΝɓࡈSPX༁ࠦٙᐼᅰ ௰ε̥ঐf
SPX .col-md-10 .col-md-2
ၣࣸӻ୕(SJE4ZTUFN ண௪ᄱܓ DPMVNOۃၢ QY ˓ዚ DPMYT QY ̻ؐ DPMTN QY
ɓছፃ࿇ DPMNE QY ɽፃ࿇ DPMMH
IUUQHFUCPPUTUSBQDPNFYBNQMFTHSJE
੬ٙ͜$44ᅵό h ਿ͉ٙ)5.-ʩ९ᅵόҷᄳ IY Q DPEFn h 5BCMF h
'PSNT h #VUUPOT h *NBHFT h IFMQFSTn h Ⴍॆٙΐவჿεᒔʔν੭ɽ֜ၣܣჿˢ༰Ҟ
5BCMF h Դ͜ਿ͉ٙUBCMFʩ९dΎࢁ͜UBCMFDTTᅵό h ࡌུᅵό̙˸̋ɪUBCMFTUSJQFE UBCMFCPSEFSFE UBCMF IPWFS UBCMFDPOEFOTFE
'PSNT h ̥ࠅԴ͜GPSNᅺᜀఱึረʚᅵό h JOQVUʩ९ɽʱცࠅ̋ɪGPSNDPOUSPMٙDTT ˲ᄱܓึண֛މ XJEUI h Դ͜GPSNHSPVQภৣMBCFM༧JOQVU
TFMFDU UFYUVSFഃڌఊ)5.-ʩ९f
#VUUPOT h ˴ࠅԴ͜CUOவࡈDTTDMBTTOBNFԸࡌུᅵό h CUOவࡈᅵό̙˸͜ίB CVUUPO JOQVUɪࠦ
੬ٙ͜$44ଡ଼ $PNQPOFOU h /BWCBS h 1BHJOBUJPO h "MFSUT h #SFBEDSVNCT
1MFBTFWJTJUIUUQHFUCPPUTUSBQDPNDPNQPOFOUT
-BC5JNF ਗ˓ࣛග
ઋྤᕚ Ы݊ɧ௴'SJEBZ/JHIUʮ̡ආԸٙ'SPOUFOE ϼᒮၡܢცࠅ8FCʧ̘ࠦΣ܄˒࢝ͪอӻ୕ٙܝ̨d Ϥܝ̨̌ঐʔεdШࠅঐ࢝ͪ೮ɝd೮ɝܝٙࠫd ˸ʿପۜΐڌdପۜอᄣഃݴd༟ࣘே݊ٙӚᗫڷd ϼᒮႭ܄˒ɰ͊̀ึႩॆdШࠅӋݴනd ცࠅઆᏍώႡЪঐ࢝ͪϤݴٙ)5.-ࠫࠦf
ࡈɛจԈ h ึ͜#PPUTUSBQʔഃึᄳۃ၌dε˖f)5.-ʶ̍ࢁf ሗйɛᏍЫ$PEF3FWJFXא݊#PPUMJOUҢɰӚ͜ཀ h ᅠᄳልᄳ 0WFSSJEF ࡡٙ#PPUTUSBQٙ$44ࠅϞɓ֛ٙۆfʶᜫટ ˓ɛࡰชՑѢᓔf
h ߰ࠅࡌҷЍӻഃਪᕚးඎഛ͜$VTUPNJ[F#PPUTUSBQ̌ঐdʶᄳɓɽ਼ٙ PWFSSJEFf h ߰#PPUTUSBQཫணٙ38%CSFBLQPJOUʔୌΥЫࠅٙdɰ݊ீཀ $VTUPNJ[F#PPUTUSBQପ͛ІʉࠅٙCSFBLQPJOUf h #PPUTUSBQཫணԴ͜əOPSNBMJ[FDTTdʶΎ˓ਗˏ͜SFTFUDTTn ΪՇ٫ ݊̌ঐᗳЧ
ࡈɛจԈ h ᒱ್˂͛˕౪38%݊#PPUTUSBQٙᎴැdШ#PPUTUSBQʔ݊38%ٙ Ν່൚ ʔ݊ༀə#PPUTUSBQఱϞ38%dɰ݊ࠅৣΥ̴ٙ)5.- $44 ٙྌʑϞจ່ f h ͜əՈϞ38%ٙ#PPUTUSBQШ݊ɦʔซࠅ38%ܣჿ፬klཀ
ԸɛѓൡЫྼί݊Ϟᓃ௦d߰Ыٙၣ१ஹ(SJE4ZTUFNேʔცࠅא ݊ʔልᕏ͜ʔՑʡჿCPPUTUSBQٙतᓃdԟ৻ঌʔࠅ͜əы
һεٙ፯ ᗳЧ#PPUTUSBQவᅵٙۃ၌)5.-$44+BWB4DSJQU'SBNFXPSL ɰϞՉ˼ٙ፯dЫ̙˸ԱʔΝ࣪ݖٙतdνணࠇࠬࣸ )5.-ഐྌd $44նΤd˸ʿɓԬ੬͜ၣࠫʩd፯ቇΥઆٙ࣪ݖԸԴ͜f IUUQTFNBOUJDVJDPN IUUQGPVOEBUJPO[VSCDPN IUUQQVSFDTTJP Չ˼ਞϽ
$44'SPOUFOE'SBNFXPSLT5IF#FTUGPS.PEFSO8FC%FTJHO IUUQVTBCMJDBHJUIVCJP GSPOUFOEGSBNFXPSLTDPNQBSFIUNM IUUQBNB[FVJPSH
༟๕ 'SFFUIFNFTGPS#PPUTUSBQIUUQTCPPUTXBUDIDPN 4UBSU#PPUTUSBQIUUQTTUBSUCPPUTUSBQDPN IUUQUFDITMJEFTDPNUPQCPPUTUSBQUPPMTBOESFTPVSDFT IUUQXXXMBWJTICPPUTUSBQDPN
༟๕ IUUQTXXXDPEFTDIPPMDPNMFBSOIUNMDTT IUUQTXXXDPEFDBEFNZDPN
௰ܝ Ҏૐ̬ੀᑺࢭ˸Ըᜫɽ࿁ ᄳۃ၌Ϟጳሳ ᑽᑽ