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
99
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
78
Other Decks in Programming
See All in Programming
実践AIチャットボットUI実装入門
syumai
7
2.4k
defer f()とdefer fの挙動を 誤解していた話
kogamochiduki
2
170
開発生産性を上げるための生成AI活用術
starfish719
1
150
CSS Linter の現在地 2025年のベストプラクティスを探る
ryo_manba
10
3.2k
CSC509 Lecture 03
javiergs
PRO
0
320
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
160
CSC509 Lecture 01
javiergs
PRO
1
430
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
290
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
1
580
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
340
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
1
430
Featured
See All Featured
Side Projects
sachag
455
43k
Scaling GitHub
holman
463
140k
Building Adaptive Systems
keathley
43
2.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Documentation Writing (for coders)
carmenintech
75
5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
4 Signs Your Business is Dying
shpigford
185
22k
A better future with KSS
kneath
239
17k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
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!