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
92
CSS Layout w/ HTML5 & CSS3
Cesar
August 14, 2015
Tweet
Share
More Decks by Cesar
See All by Cesar
Webpack
cesar2535
1
440
Front-End workflows
cesar2535
0
70
Other Decks in Programming
See All in Programming
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
Honoとフロントエンドの 型安全性について
yodaka
4
250
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Thoughts on Productivity
jonyablonski
69
4.5k
Building an army of robots
kneath
302
45k
For a Future-Friendly Web
brad_frost
176
9.5k
Being A Developer After 40
akosma
89
590k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Fireside Chat
paigeccino
34
3.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Cult of Friendly URLs
andyhume
78
6.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Bash Introduction
62gerente
610
210k
A designer walks into a library…
pauljervisheath
205
24k
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!