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
Web班番外編 jQuery
Search
シュプレ
October 29, 2014
Technology
0
91
Web班番外編 jQuery
jQueryについての講義です. ロールオーバーまでいきたかった
シュプレ
October 29, 2014
Tweet
Share
More Decks by シュプレ
See All by シュプレ
エンジニア(?)にオススメの本
spre55
0
130
PHPエンジニアが転職してGoを書き始めたら楽しくなってきた話.pdf
spre55
2
1k
GCP使ってテスト自動化したい.pdf
spre55
0
180
はじめてのCode4兄弟
spre55
0
200
2016HACKDAYS_52_HelloAgain
spre55
0
59
LANケーブル圧着入門
spre55
0
85
できるSEO! ver 2.1
spre55
0
37
pre講義 jQuery
spre55
0
72
Other Decks in Technology
See All in Technology
長文から長文を生成するLLMツールをオープンソースで作ってみた。
tomohisa
2
140
単回帰分析について数式を追いながら実装してみた
kentaitakura
0
490
検証からプロダクトへ: シームレスなLLM開発の ためのしくみ作り
nunukim
1
110
KubeCon EU: Unlocking new Platform Experiences with Open Interfaces
salaboy
1
360
BDD(Cucumber)コミュニティが無料提供しているコンテンツの紹介と現在起きている危機
nihonbuson
4
730
エバンジェリスト活動を7年やってきて見えてきた、コミュニティとエバンジェリストの関係
soracom
PRO
1
190
バッチ処理のSLOをどう設計するか
rynsuke
7
540
統計的学習理論読み Chapter 1
kmatsui
3
570
初心者が行く!サーバレスWebアプリ開発の道
nagaharutogawa
0
440
Introduction to Jetpack Compose
pohjus
1
110
戦略的DDDを実践するための跳躍力 / OOC 2024
pictiny
6
3.2k
Evolutionary Optimization of Model Merging Recipes
fuyu_quant0
3
510
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
130
6.2k
Building Effective Engineering Teams - LeadDev
addyosmani
25
1.8k
GitHub's CSS Performance
jonrohan
1023
450k
Facilitating Awesome Meetings
lara
39
5.5k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Building Applications with DynamoDB
mza
88
5.6k
Infographics Made Easy
chrislema
237
18k
Agile that works and the tools we love
rasmusluckow
323
20k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Transcript
Follow me Twitter @spre55 Web班 番外編 4BJUB5BUTVZB 1
Follow me Twitter @spre55 本日のMENU 8FCք۾ͷɹ1 )5.-ͷɹɹ1 $44ͷɹ1 2 ຊͷMENU
Follow me Twitter @spre55 1.Web界隈の話 3 1.Webք۾ͷ
Follow me Twitter @spre55 クライアントサイドとサーバサイド 4 1.Webք۾ͷ ϒϥβͰಈ࡞ αʔόͰಈ࡞ HTTP
HTML CSS JavaScript (αʔόαΠυͰ͑Δ) PHP Ruby Python…
Follow me Twitter @spre55 ブラウザ間の差異 5 1.Webք۾ͷ ϨϯμϦϯάΤϯδϯ ˠσʔλΛɼ݅ϧʔϧʹ͕ͨͬͯ͠
ɹɹదͳܗʹ࠶ߏ͢ΔΤϯδϯ ↓ ֤ϒϥβͰҧ͏ͷΛ͍ͬͯΔ
Follow me Twitter @spre55 ブラウザ間の差異 6 1.Webք۾ͷ Webϒϥβ ϨϯμϦϯάΤϯδϯ Internet
Explorer Trident FireFox Gecko Safari Webkit Google Chrome Blink Opera Blink ֤ϒϥβͷϨϯμϦϯάΤϯδϯ(20141݄࣌)
Follow me Twitter @spre55 世界初のWebサイト 7 1.Webք۾ͷ )5.-ͷੜΈͷ ςΟϜɾόʔφʔζɾϦʔ ࣌$&3/ࡏ੶
888ͷΈΛ࡞ͬͨਓ ݄ʹઃཱɿੈքॳͷ8FCαΠτ IUUQJOGPDFSODIIZQFSUFYU8885IF1SPKFDUIUNM wikipediaΑΓ
Follow me Twitter @spre55 SublimeTextに恋しよう! 8 1.Webք۾ͷ ͍͘͢͢Δʹʜ ઃఆϑΝΠϧΛ͍͡Δ ϓϥάΠϯΛೖΕΔ
1BDLBHF$POUSPM IUUQTTVCMJNFXCPOEOFUJOTUBMMBUJPO
Follow me Twitter @spre55 参考サイト 9 1.Webք۾ͷ )551ͱ ʜ IUUQWJSBMDPNNVOJUZDPNPUIFSJUIUUQ
ϒϥβͷΈ IUUQXXXIUNMSPDLTDPNKBUVUPSJBMTJOUFSOBMTIPXCSPXTFSTXPSL 4VCMJNF5FYUΛΠϯετʔϧͨ͠Βʜ IUUQLFJESVOUVNCMSDPNQPTUUJQTTVCMJNFUFYUTVCMJNFUFYU αʔόαΠυ+BWB4DSJQUͷຊ໋ʮ/PEFKTʯʜ IUUQXXXBUNBSLJUDPKQBJUBSUJDMFTOFXTIUNM
Follow me Twitter @spre55 2.HTMLの話 10 2.HTMLͷ
Follow me Twitter @spre55 HTMLひな形 11 2.HTMLͷ %0$5:1&IUNM IUNM IFBE
UJUMFλΠτϧUJUMF IFBE CPEZ ͜Ε)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢ɽCS CPEZ IUNM
Follow me Twitter @spre55 HTMLひな形 12 2.HTMLͷ %0$5:1&IUNM IUNM IFBE
UJUMFλΠτϧUJUMF IFBE CPEZ ͜Ε)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢ɽCS CPEZ IUNM %0$5:1&એݴɿ )5.-ͷจॻͩΑ ͱએݴ͢Δ
Follow me Twitter @spre55 HTMLひな形 13 2.HTMLͷ %0$5:1&IUNM IUNM IFBE
UJUMFλΠτϧUJUMF IFBE CPEZ ͜Ε)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢ɽCS CPEZ IUNM )5.-λάɿ )5.-ͷൣғΛࣔ͢
Follow me Twitter @spre55 HTMLひな形 14 2.HTMLͷ %0$5:1&IUNM IUNM IFBE
UJUMFλΠτϧUJUMF IFBE CPEZ ͜Ε)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢ɽCS CPEZ IUNM )&"%λάɿ )5.-จॻશମͷใ
Follow me Twitter @spre55 HTMLひな形 15 2.HTMLͷ %0$5:1&IUNM IUNM IFBE
UJUMFλΠτϧUJUMF IFBE CPEZ ͜Ε)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢ɽCS CPEZ IUNM #0%:λάɿ )5.-จॻͷ༰
Follow me Twitter @spre55 開始タグと終了タグ 16 2.HTMLͷ CPEZ ͜Ε)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢CS
CPEZ
Follow me Twitter @spre55 開始タグと終了タグ 17 2.HTMLͷ CPEZˡ։࢝λά ͜Ε)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢CS
CPEZɹˡऴྃλά ˠλάͷద༻ൣғΛ͍ࣔͯ͠Δ
Follow me Twitter @spre55 単独タグ 18 2.HTMLͷ CPEZ ͜Ε)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢CS
CPEZ
Follow me Twitter @spre55 単独タグ 19 2.HTMLͷ CPEZ ͜Ε)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢CS
CPEZ ୯ಠλά
Follow me Twitter @spre55 単独タグ 20 2.HTMLͷ CSPSCS ˠͲͬͪͰ͚͑͑Ͳɼ
ɹɹɹɹɹ౷Ұ͓ͯ͠͏
Follow me Twitter @spre55 文字化け対策 21 2.HTMLͷ ҎԼΛIFBEλάʹՃ͢Δɽ NFUBIUUQFRVJW$POUFOU5ZQF DPOUFOUUFYUIUNMDIBSTFUVUG
ɹɹɹɹˣ)5.-Ͱ͘ग़དྷΔʂʂ NFUBDIBSTFUVUG
Follow me Twitter @spre55 文字化け対策 22 2.HTMLͷ ͦΕͰจࣈԽ͚ͨ͠Β ϒϥβͷઃఆΛ ม͍͑ͯͩ͘͞
Follow me Twitter @spre55 タグ(要素)と属性 23 2.HTMLͷ λάͷதʹଐੑΛࢦఆͯ͠ɼׂใ Λ࣋ͨͤΔ͜ͱ͕ग़དྷΔɽ ྫ
BISFGIUUQXXXYNMQSPPSH 9.-1SPެࣜαΠτB hrefଐੑͰϦϯΫઌΛ͍ࣔͯ͠Δ
Follow me Twitter @spre55 タグ(要素)と属性 24 2.HTMLͷ λάͷதʹଐੑΛࢦఆͯ͠ɼׂใ Λ࣋ͨͤΔ͜ͱ͕ग़དྷΔɽ ྫ
BISFGIUUQXXXYNMQSPPSH 9.-1SPެࣜαΠτB λάͰғ·Εͨ෦ = ཁૉ
Follow me Twitter @spre55 基本的なタグの紹介 25 2.HTMLͷ - جຊతͳλάͷհ
Follow me Twitter @spre55 文章の区別・改行 1 26 2.HTMLͷ - جຊతͳλάͷհ
λά ׂ هड़ྫ <a> ϋΠύʔϦϯΫՃ BISFGB͜͜B ΛΫϦοΫ <h1>~<h6> ݟग़͠ Iݟग़͠I <p> ஈམ QҰͭͷύϥάϥϑQ <br> վߦ վߦCS͢ΔΑ
Follow me Twitter @spre55 文章の区別・改行 2 27 2.HTMLͷ - جຊతͳλάͷհ
λά ׂ هड़ྫ <ul> Օॻ͖ൣғ MJλάͰ߲Λࢦఆ VM ɹMJ߲MJ ɹMJ߲MJ ɹMJ߲MJ VM <ol> ൪߸͖Օॻ͖ൣғ MJλάͰ߲Λࢦఆ PM ɹMJ߲MJ ɹMJ߲MJ ɹMJ߲MJ PM
Follow me Twitter @spre55 文章などをまとめる 28 2.HTMLͷ - جຊతͳλάͷհ λά
ׂ هड़ྫ <div> ίϯςϯπͷ·ͱ·ΓΛ ද͢ɽཁૉͷલޙʹվߦ ͕ೖΔ ϒϩοΫཁૉ จষEJWจষEJWจ ষ <span> ίϯςϯπͷ·ͱ·ΓΛ ද͢ɽཁૉͷલޙʹվߦ ೖΒͳ͍ ΠϯϥΠϯ ཁૉ จষTQBOจষTQBO จষ
Follow me Twitter @spre55 画像を表示させる 29 2.HTMLͷ - جຊతͳλάͷհ λά
ׂ هड़ྫ <img> ը૾ͷදࣔɽ TSDଐੑͰը૾ϑΝΠϧ 1/(ɼ(*'ɼ+1&( Λࢦఆɽ BMUଐੑͰը૾ͷΘΓʹද ࣔ͞ΕΔจࣈྻΛࢦఆɽ JNHTSDTBNQMFKQH BMUαϯϓϧࣸਅ
Follow me Twitter @spre55 HTMLにおけるコメント 30 ͜͜ʹίϝϯτΛॻ͖·͢ ίϝϯτ8FCϖʔδʹදࣔ͞Εͳ͍ 2.HTMLͷ -
جຊతͳλάͷհ ͜ΕͰғΉ
Follow me Twitter @spre55 やってみよう!part.1 31 ʮYQXFC@ʯϑΥϧμΛ࡞͠ɼͦͷதʹ ʮJOEFYIUNMʯΛ࡞Δ͠ʂ ʮJOEFYIUNMʯΛ͍ͬͯࣗ͡ͷࣗݾհϖʔδ Λ͖ͳΑ͏ʹ࡞Δ͠ʂʂ
ͳΜͰ͍͍͔Βը૾ΛຕҎ্͏͜ͱ 2.HTMLͷ
Follow me Twitter @spre55 参考サイト 32 2.HTMLͷ )5.-ΫΠοΫɾϦϑΝϨϯε IUUQXXXIUNRDPN $BO*VTFʜ
IUUQDBOJVTFDPN 8$όϦσʔλ IUUQWBMJEBUPSXPSH
Follow me Twitter @spre55 3.CSSの話 33 3.CSSͷ
Follow me Twitter @spre55 CSSとは 34 3.CSSͷ $44 $BTDBEJOH4UZMF4IFFU
ˠσβΠϯϨΠΞτͳͲɼ ɹจॻͷݟӫ͑ ελΠϧ Λࢦఆ͢Δ
Follow me Twitter @spre55 Webページの構成 35 3.CSSͷ .html .css .js
.css .js image other
Follow me Twitter @spre55 CSSの置き場所 36 3.CSSͷ ɾTUZMFଐੑͰࢦఆ ɾTUZMFཁૉͰࢦఆ ɾ֎෦ϑΝΠϧ͔ΒಡΈࠐΉ
Follow me Twitter @spre55 CSSの置き場所 37 3.CSSͷ ɾTUZMFଐੑͰࢦఆ ɾTUZMFཁૉͰࢦఆ ɾ֎෦ϑΝΠϧ͔ΒಡΈࠐΉˡ
Follow me Twitter @spre55 38 3.CSSͷ CSSの使い方 $44ϑΝΠϧΛ࡞ޙɼ)5.-ϑΝΠϧͷ IFBEλάʹԼهΛهೖ͢Δɽ MJOLSFMTUZMFTIFFUISFGTUZMFTDTT
͜͜ʹࣗͰ࡞ͨ͠ $44ϑΝΠϧͷॴΛهࡌ
Follow me Twitter @spre55 39 3.CSSͷ やってみよう!part.2 ̍ɽQBSUͰ࡞ͬͨࣗݾհϖʔδͱಉ͡ ॴʹۭͷʮTUZMFTDTTʯΛ࡞Δ͠ʂ ̎ɽࣗݾհϖʔδͷIFBEλάʹɼ
ʮTUZMFTDTTʯͱͷϦϯΫΛॻ͘͠ʂ
Follow me Twitter @spre55 要素の指定 40 )5.-ͷλά ཁૉ ʹଐੑΛࢦఆ͠ ͯใΛ࣋ͨͤΔ͜ͱ͕ग़དྷΔ
˞1_ 3.CSSͷ - ཁૉͷࢦఆ
Follow me Twitter @spre55 id属性とclass属性 41 3.CSSͷ - ཁૉͷࢦఆ άϩʔόϧଐੑ
ˠ΄΅ͯ͢ͷཁૉʹࢦఆͰ͖Δଐੑ ↓ id属性とclass属性
Follow me Twitter @spre55 id属性とclass属性 42 3.CSSͷ - ཁૉͷࢦఆ JEଐੑɹࣝผࢠ
JE Λࢦఆɽͭͷ υΩϡϝϯτʹಉ໊͡લͷJEଐੑ ͭͷΈ ɹྫ EJWJEOBNF_EJW
Follow me Twitter @spre55 id属性とclass属性 43 3.CSSͷ - ཁૉͷࢦఆ DMBTTଐੑΫϥε໊Λࢦఆɽͭͷ
υΩϡϝϯτʹෳͷಉҰΫϥεΛ ࢦఆՄೳ ྫ EJWDMBTTOBNF_EJW
Follow me Twitter @spre55 セレクタ 44 3.CSSͷ - ηϨΫλ
Follow me Twitter @spre55 適用先の指定 45 3.CSSͷ - ηϨΫλ ํ๏
ॻࣜ ηϨΫλ λάͰࢦఆ λά໊\^ λάͱΫϥε໊Ͱࢦఆ λά໊Ϋϥε໊\^ Ϋϥε໊Ͱࢦఆ Ϋϥε໊\^ JEͰࢦఆ JE໊\^ ෳͷཁૉʹࢦఆ λά໊ λά໊\^ ͯ͢ͷཁૉʹద༻ \^
Follow me Twitter @spre55 色を変える 46 3.CSSͷ - ηϨΫλ NZDPMPS\
DPMPSGG CBDLHSPVOEDPMPS ^ DTTϑΝΠϧ
Follow me Twitter @spre55 色を変える 47 3.CSSͷ - ηϨΫλ NZDPMPS\
DPMPSGG CBDLHSPVOEDPMPS ^ ηϨΫλ
Follow me Twitter @spre55 色を変える 48 3.CSSͷ - ηϨΫλ NZDPMPS\
DPMPSGG CBDLHSPVOEDPMPS ^ ϓϩύςΟ
Follow me Twitter @spre55 色を変える 49 3.CSSͷ - ηϨΫλ NZDPMPS\
DPMPSGG CBDLHSPVOEDPMPS ^ ϓϩύςΟͷ
Follow me Twitter @spre55 色を変える 50 3.CSSͷ - ηϨΫλ DPMPSจࣈ৭Λࢦఆ
CBDLHSPVOEDPMPSഎܠ৭Λࢦఆ
Follow me Twitter @spre55 色を変える 51 3.CSSͷ - ηϨΫλ ৭ͷࢦఆ
৭໊ SFE rgb()ͱ% SHC rgb()ͱ10ਐͷ SHC # ͱ16ਐͷ GG
Follow me Twitter @spre55 色を変える 52 3.CSSͷ - ηϨΫλ ΧϥʔίʔυҰཡ
)5.- $44Χϥʔίʔυ IUUQXXXOFUZBTVODPNIPNFDPMPSIUNM
Follow me Twitter @spre55 53 3.CSSͷ やってみよう!part.3 ̍ɽࣗݾհϖʔδΛDTTͰ০͢͠ʂ