Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSSで非表示にする方法

53
November 13, 2020
Technology
0
70

 CSSで非表示にする方法

53

November 13, 2020
Tweet

More Decks by 53

See All by 53
ES2020 で来る7つの新機能
gotadano
1
95
Vue.js_x_Animation.pdf
gotadano
1
150
Vue.jsとNuxt.jsの学び方
gotadano
0
250
初めてnpmパッケージを公開した話.pdf
gotadano
0
34
JavaScriptで実装したVueJS プロジェクトをTypeScriptへ移行する話
gotadano
1
360

Other Decks in Technology

See All in Technology
コドモンのQAの今までとこれから -XPによる成長と見えてきた課題-
masasuna
0
140
小さく始めるDevOps 内製化支援から見えたDevOpsの始め方 / 20250317 Ken Takayanagi
shift_evolve
1
120
AWS CDK コントリビュート はじめの一歩
yendoooo
1
130
マルチアカウント管理で必須！AWS Organizationsの機能とユースケース解説
nrinetcom
PRO
1
120
コンソールで学ぶ！AWS CodePipelineの機能とオプション
umekou
3
130
出前館を支えるJavaとKotlin
demaecan
0
140
SaaSプロダクト開発におけるバグの早期検出のためのAcceptance testの取り組み
kworkdev
PRO
0
540
.mdc駆動ナレッジマネジメント/.mdc-driven knowledge management
yodakeisuke
6
1.3k
問題解決に役立つ数理工学
recruitengineers
PRO
8
2.4k
数百台のオンプレミスのサーバーをEKSに移行した話
yukiteraoka
0
770
SREが実現する開発者体験の革新
sansantech
PRO
0
120
LINEギフトのLINEミニアプリアクセシビリティ改善事例
lycorptech_jp
PRO
0
320

Featured

See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Adopting Sorbet at Scale
ufuk
75
9.3k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
How to Ace a Technical Interview
jacobian
276
23k
A Modern Web Designer's Workflow
chriscoyier
693
190k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
102
19k
A better future with KSS
kneath
239
17k
Navigating Team Friction
lara
184
15k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k

Transcript

  1. CSS Ͱඇදࣔʹ͢Δํ๏ 2020/11/13 גࣜձࣾGameWith ࣾ಺LT ୞໺ ߶ ෳ਺͋Δํ๏ͷಠࣗੑΛൺֱ͢Δ

  2. ΞΫηγϏϦςΟ Λ͔ͬ͠Γҙࣝ͠Α͏ͱ͍͏࿩୊Ͱ͢ɻ

  3. display ϓϩύςΟ

  4. εΫϦʔϯ͔ΒΞΫηεෆೳ ʹͯ͠Ӆ͍͚ͨͩ͠Ͱ͋Ε͹ ผͷํ๏΋ݕ౼͠·͠ΐ͏

  5. Ӆ͢ํ๏Λ෼ྨ 4ͭͷई౓Ͱ෼ղ • ΞΫηγϏϦςΟ • υΩϡϝϯτϑϩʔ • ϨϯμϦϯά • ΠϕϯττϦΨʔ

  6. ΞΫηγϏϦςΟ εΫϦʔϯϦʔμʔͰίϯςϯπ͕ಡΊΔ

  7. υΩϡϝϯτϑϩʔ ϨΠΞ΢τʹӨڹ͕͋Δͷ͔

  8. ϨϯμϦϯά ྖҬΛඳը͢Δͷ͔

  9. ΠϕϯττϦΨʔ ΫϦοΫ΍ϑΥʔΧεΛݕग़͢Δͷ͔

  10. • ΞΫηγϏϦςΟ: ✗ • υΩϡϝϯτϑϩʔ: ✗ • ϨϯμϦϯά: ✗ •

    ΠϕϯττϦΨʔ: ✗

  11. ը૾ϦΫΤετʹӨڹͤ͞Δ །ҰͷϓϩύςΟ (IE11͸ྫ֎)

  12. visibility ϓϩύςΟ

  13. • ΞΫηγϏϦςΟ: ✗ • υΩϡϝϯτϑϩʔ: ✔ • ϨϯμϦϯά: ✔ •

    ΠϕϯττϦΨʔ: ✗
  14. None

  15. opacity ϓϩύςΟ

  16. • ΞΫηγϏϦςΟ: ✔ • υΩϡϝϯτϑϩʔ: ✔ • ϨϯμϦϯά: ✔ •

    ΠϕϯττϦΨʔ: ✔
  17. None

  18. position ϓϩύςΟ

  19. • ΞΫηγϏϦςΟ: ✔ • υΩϡϝϯτϑϩʔ: ✗ • ϨϯμϦϯά: ✔ •

    ΠϕϯττϦΨʔ: ✔
  20. None

  21. hidden ཁૉʹϑΥʔΧεՄೳͳίϯςϯπؚ͕·Ε͍ͯΔ৔߹ɺ ϑΥʔΧε͕߹͍ͬͯΔͱ͖ʹͦͷཁૉ·Ͱϖʔδ͕ εΫϩʔϧͯ͠͠·͍ɺಥવͷδϟϯϓ͕ൃੜͯ͠͠·͍·͢ɻ ஫ҙ

  22. visually hidden Ϋϥε

  23. • ΞΫηγϏϦςΟ: ✔ • υΩϡϝϯτϑϩʔ: ✗ • ϨϯμϦϯά: ✗ •

    ΠϕϯττϦΨʔ: ✔
  24. None

  25. • ΞΫηγϏϦςΟ • υΩϡϝϯτϑϩʔ • ϨϯμϦϯά • ΠϕϯττϦΨʔ ίϯςϯπΛ ͲͷΑ͏ʹඇදࣔʹ͢Δ͔

    • display • visibility • opacity • position • visually hidden