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
CSS Layout w/ HTML5 & CSS3
Search
Cesar
August 14, 2015
Programming
2
96
CSS Layout w/ HTML5 & CSS3
Cesar
August 14, 2015
Tweet
Share
More Decks by Cesar
See All by Cesar
Webpack
cesar2535
1
450
Front-End workflows
cesar2535
0
76
Other Decks in Programming
See All in Programming
slogパッケージの深掘り
integral0515
0
110
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.2k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
9.3k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
300
CDK引数設計道場100本ノック
badmintoncryer
2
550
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
1
220
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
140
TypeScriptでDXを上げろ! Hono編
yusukebe
3
850
「App Intent」よくわからんけどすごい!
rinngo0302
1
120
Porting a visionOS App to Android XR
akkeylab
0
900
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
0
350
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
680
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Code Review Best Practice
trishagee
69
19k
Visualization
eitanlees
146
16k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
990
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Transcript
CSS Layout WITH
HTML5 The 5th revision of HTML CSS3 New JavaScript APIs
+ +
CSS3
https://en.wikipedia.org/wiki/HTML5
Semantics Connectivity Offline & Storage Multimedia 3D graphics & effects
Performance & Integration Device Access Styling https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
Semantics Styling
Semantics Styling <header>, <footer>, <article>, <section>, <aside>, <nav>, <figure>, <audio>,
<video>, …
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
Semantics Styling <!DOCTYPE html> Simplified DOCTYPE
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
Semantics Styling
Semantics Styling
Semantics Styling
https://en.wikipedia.org/wiki/Cascading_Style_Sheets
• Selector • Box Model • Backgrounds & Border •
Text Effects • 2D/3D Transformations • Animations • Multiple Column Layout
box-radius: 5px; Box radius
box-radius: 50%; Box radius
box-shadow: 1px 1px 0px pink; Box shadow
box-shadow: 1px 1px 0px pink, -1px -1px 0px green; Box
shadow
text-shadow: 1px 1px 0px pink; Hello Hello Text shadow
h1:before, h1:after { content: “*”; color: pink; } *Hello* Pseudo
elements
@font-face { font-family: “PilGi”; src: “PilGi.otf”; } h1 { font-family:
“PilGi”; } Hello Web fonts
#container { background: #fff; display: flex; width: 900px; height: 400px;
} Flexible Boxes #container
Flexible Boxes #container #main { background: pink; } #right-col {
background: green; } #main #right-col #container { background: #fff; display: flex; width: 900px; height: 400px; }
Flexible Boxes #container #main { background: pink; width: 600px; }
#right-col { background: green; } #main #right-col #container { background: #fff; display: flex; width: 900px; height: 400px; }
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; }
Transitions div { width: 100px; } div:hover { width: 800px;
}
Transitions div { width: 100px; } div:hover { width: 800px;
}
Transitions div { width: 100px; transition: width 2s ease-in-out; }
div:hover { width: 800px; }
Transitions div { width: 100px; transition: width 2s ease-in-out; }
div:hover { width: 800px; }
Transforms Hi div { transform: rotate(45deg); }
Don’t forget vendor prefixes -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg);
-o-transform: rotate(45deg); transform: rotate(45deg);
Preprocessors
Preprocessors .css .css .styl .sass .scss .less Myth Less Sass
Stylus Postcss
Preprocessors
Question?
CSS Layout
FLEXBOX
10+ 22+ 21+ 6.1+ 12.1+ http://caniuse.com/#search=flexbox -webkit-
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.
TERMINOLOGY Flex Container 1 2 3 Flex Items
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
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
WITHOUT FLEXBOX 1 2 3
WITH FLEXBOX .container { display: flex; } 1 2 3
FLEX-CONTAINER PROPERTIES
flex-direction 1 2 3 row default 3 2 1 row-reverse
flex-direction 1 2 3 column 3 2 1 column-reverse
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
flex-flow row nowrap default 1 2 3 4 5 6
flex-direction
ALIGMENT align-items justify-content cross-axis main-axis
justify-content flex-start default 1 2 3 4 flex-end 1 2
3 4
justify-content center 1 2 3 4
justify-content space-between 1 2 3 4 space-around 1 2 3
4
align-items stretch default 1 2 3 4 flex-start 1 2
3 4
align-items flex-end center 1 2 3 4 1 2 3
4
align-items baseline 1 2 3 4
align-content stretch default 1 2 3 4 5 6 7
8 9
align-content flex-start 1 2 3 4 5 6 7 8
align-content flex-end 1 2 3 4 5 6 7 8
align-content center 1 2 3 4 5 6 7 8
align-content space-between 1 2 3 4 5 6 7 8
align-content space-around 1 2 3 4 5 6 7 8
1 2 3 FLEX-ITEMS PROPERTIES
order {number} 3 1 2 4 .item3 { order: -1;
}
flex-grow {number} 1 2 3 4 .item2 { flex-grow: 2;
}
flex-shrink {number} 1 2 3 4 .item2 { flex-shrink: 2;
}
flex-basis {size} 1 2 3 4 .item1 { flex-basis: 20px;
}
flex {number} 1 2 3 4 .item { flex: 0
1 auto; } flex-grow
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
Header Footer Body Aside 1 Aside 2 http://codepen.io/cesar2535/pen/KpYqwd
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
Question? THANK!