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

CSS Layout w/ HTML5 & CSS3

Avatar for Cesar Cesar
August 14, 2015
Programming
100
2

CSS Layout w/ HTML5 & CSS3

Avatar for Cesar

Cesar

August 14, 2015

More Decks by Cesar

See All by Cesar
Webpack
Avatar for Cesar cesar2535
1
470
Front-End workflows
Avatar for Cesar cesar2535
0
92

Other Decks in Programming

See All in Programming
PHP 7.4でもOpenTelemetryゼロコード計装がしたい！ / PHPerKaigi 2026
Avatar for Arthur arthur1
1
460
CS教育のDX AIによる育成の効率化
Avatar for ニフティ株式会社 niftycorp
PRO
0
180
野球解説AI Agentを開発してみた - 2026/02/27 LayerX社内LT会資料
Avatar for Shinichi Nakagawa shinyorke
PRO
0
380
モックわからないマン卒業記 ~振る舞いを起点に見直した、フロントエンドテストにおけるモックの使いどころ~
Avatar for Tasuku Watanabe tasukuwatanabe
3
440
Coding at the Speed of Thought: The New Era of Symfony Docker
Avatar for Kévin Dunglas dunglas
0
4.1k
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
Avatar for o8n o8n
4
1.5k
Geminiをパートナーに神社DXシステムを個人開発した話（いなめぐDX 開発振り返り）
Avatar for T. Fujiba fujiba
0
130
AI時代の脳疲弊と向き合う ~言語学としてのPHP~
Avatar for Sakurai sakuraikotone
1
1.8k
forteeの改修から振り返るPHPerKaigi 2026
Avatar for muno92 muno92
PRO
3
110
ローカルで稼働する AI エージェントを超えて / beyond-local-ai-agents
Avatar for geeawa gawa
1
220
今からFlash開発できるわけないじゃん、ムリムリ! (※ムリじゃなかった!?)
Avatar for Sora Arakawa arkw
0
170
20260320登壇資料
Avatar for 松井遼(まついはるか) pharct
0
140

Featured

See All Featured
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
130
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
1
170
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.8k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.8k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
1k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.2k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
190
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
210

Transcript

  1. CSS Layout WITH

  2. HTML5 The 5th revision of HTML CSS3 New JavaScript APIs

    + +

  3. CSS3

  4. https://en.wikipedia.org/wiki/HTML5

  5. Semantics Connectivity Offline & Storage Multimedia 3D graphics & effects

    Performance & Integration Device Access Styling https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

  6. Semantics Styling

  7. Semantics Styling <header>, <footer>, <article>, <section>, <aside>, <nav>, <figure>, <audio>,

    <video>, …

  8. Semantics Styling body div id=“header” div id=“sidebar” div id=“content” div

    class=“article” div class=“article” div id=“footer” body header aside section article article footer HTML4 HTML5

  9. Semantics Styling <!DOCTYPE html> Simplified DOCTYPE

  10. Semantics Styling <!DOCTYPE html> Compare with HTML 4.01: <!DOCTYPE HTML

    PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3c.org/TR/html4/strict.dtd”> Simplified DOCTYPE

  11. Semantics Styling

  12. Semantics Styling

  13. Semantics Styling

  14. https://en.wikipedia.org/wiki/Cascading_Style_Sheets

  15. • Selector • Box Model • Backgrounds & Border •

    Text Effects • 2D/3D Transformations • Animations • Multiple Column Layout

  16. box-radius: 5px; Box radius

  17. box-radius: 50%; Box radius

  18. box-shadow: 1px 1px 0px pink; Box shadow

  19. box-shadow: 1px 1px 0px pink, -1px -1px 0px green; Box

    shadow

  20. text-shadow: 1px 1px 0px pink; Hello Hello Text shadow

  21. h1:before, h1:after { content: “*”; color: pink; } *Hello* Pseudo

    elements

  22. @font-face { font-family: “PilGi”; src: “PilGi.otf”; } h1 { font-family:

    “PilGi”; } Hello Web fonts

  23. #container { background: #fff; display: flex; width: 900px; height: 400px;

    } Flexible Boxes #container

  24. Flexible Boxes #container #main { background: pink; } #right-col {

    background: green; } #main #right-col #container { background: #fff; display: flex; width: 900px; height: 400px; }

  25. Flexible Boxes #container #main { background: pink; width: 600px; }

    #right-col { background: green; } #main #right-col #container { background: #fff; display: flex; width: 900px; height: 400px; }

  26. Flexible Boxes #container #main { background: pink; width: 600px; }

    #right-col { background: green; flex: 1; } #main #right-col #container { background: #fff; display: flex; width: 900px; height: 400px; }

  27. Transitions div { width: 100px; } div:hover { width: 800px;

    }

  28. Transitions div { width: 100px; } div:hover { width: 800px;

    }

  29. Transitions div { width: 100px; transition: width 2s ease-in-out; }

    div:hover { width: 800px; }

  30. Transitions div { width: 100px; transition: width 2s ease-in-out; }

    div:hover { width: 800px; }

  31. Transforms Hi div { transform: rotate(45deg); }

  32. Don’t forget vendor prefixes -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg); transform: rotate(45deg);

  33. Preprocessors

  34. Preprocessors .css .css .styl .sass .scss .less Myth Less Sass

    Stylus Postcss

  35. Preprocessors

  36. Question?

  37. CSS Layout

  38. FLEXBOX

  39. 10+ 22+ 21+ 6.1+ 12.1+ http://caniuse.com/#search=flexbox -webkit-

  40. DEFINITION The main idea is to give the “container” the

    ability to change the width & height of its children to best fill the blank space and prevent overflow.

  41. TERMINOLOGY Flex Container 1 2 3 Flex Items

  42. PROPERTIES Flex Container Flex Item ✦ display ✦ flex-direction ✦

    flex-wrap ✦ flex-flow ✦ justify-content ✦ align-items ✦ … ✦ order ✦ flex-grow ✦ flex-shrink ✦ flex-basis ✦ align-self

  43. GET STARTED <div class=“container”> <div class=“item”>1</div> <div class=“item”>2</div> <div class=“item”>3</div>

    </div> Flex Items Flex Container

  44. WITHOUT FLEXBOX 1 2 3

  45. WITH FLEXBOX .container { display: flex; } 1 2 3

  46. FLEX-CONTAINER PROPERTIES

  47. flex-direction 1 2 3 row default 3 2 1 row-reverse

  48. flex-direction 1 2 3 column 3 2 1 column-reverse

  49. flex-wrap nowrap default 1 2 3 4 5 6 wrap

    1 2 3 4 5 6 wrap-reverse 1 2 3 4 5 6

  50. flex-flow row nowrap default 1 2 3 4 5 6

    flex-direction

  51. ALIGMENT align-items justify-content cross-axis main-axis

  52. justify-content flex-start default 1 2 3 4 flex-end 1 2

    3 4

  53. justify-content center 1 2 3 4

  54. justify-content space-between 1 2 3 4 space-around 1 2 3

    4

  55. align-items stretch default 1 2 3 4 flex-start 1 2

    3 4

  56. align-items flex-end center 1 2 3 4 1 2 3

    4

  57. align-items baseline 1 2 3 4

  58. align-content stretch default 1 2 3 4 5 6 7

    8 9

  59. align-content flex-start 1 2 3 4 5 6 7 8

  60. align-content flex-end 1 2 3 4 5 6 7 8

  61. align-content center 1 2 3 4 5 6 7 8

  62. align-content space-between 1 2 3 4 5 6 7 8

  63. align-content space-around 1 2 3 4 5 6 7 8

  64. 1 2 3 FLEX-ITEMS PROPERTIES

  65. order {number} 3 1 2 4 .item3 { order: -1;

    }

  66. flex-grow {number} 1 2 3 4 .item2 { flex-grow: 2;

    }

  67. flex-shrink {number} 1 2 3 4 .item2 { flex-shrink: 2;

    }

  68. flex-basis {size} 1 2 3 4 .item1 { flex-basis: 20px;

    }

  69. flex {number} 1 2 3 4 .item { flex: 0

    1 auto; } flex-grow

  70. align-self 1 2 3 4 .item1 { align-self: flex-start; }

    .item2 { align-self: stretch; } .item3 { align-self: flex-end; } .item4 { align-self: center; } default:auto

  71. Header Footer Body Aside 1 Aside 2 http://codepen.io/cesar2535/pen/KpYqwd

  72. RESOURCES Learn • https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties • https://css-tricks.com/snippets/css/a-guide-to-flexbox/ • http://heydesigner.com/flexbox/ • http://philipwalton.github.io/solved-by-flexbox/

    • http://sixrevisions.com/css/learn-flexbox/ Bugs • https://github.com/philipwalton/flexbugs

  73. Question? THANK!