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
#5 CSS入門・もろもろ
Search
sekaie
September 03, 2015
Technology
0
1.2k
#5 CSS入門・もろもろ
エンジニア勉強会でCSS入門をしました。
sekaie
September 03, 2015
Tweet
Share
More Decks by sekaie
See All by sekaie
sekaie-tech-talk01
sekaie
0
760
#6 ScssとCompass 再入門
sekaie
0
930
Other Decks in Technology
See All in Technology
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
Operating Operator
shhnjk
1
590
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
120
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
Model Mondays S2E04: AI Developer Experiences
nitya
0
150
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
20k
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.8k
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
390
Yahoo!しごとカタログ 新しい境地を創るエンジニア募集!
lycorptech_jp
PRO
0
120
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
130
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Optimizing for Happiness
mojombo
379
70k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
A better future with KSS
kneath
238
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
BBQ
matthewcrist
89
9.7k
The Invisible Side of Design
smashingmag
301
51k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Statistics for Hackers
jakevdp
799
220k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
What's in a price? How to price your products and services
michaelherold
246
12k
Transcript
CSS入門・もろもろ #5 エンジニア勉強会 2015/9/2
ほな、いこかー
・ドットインストール ・HTMLクイックリファレンス http://www.htmq.com/csskihon/index.shtml http://dotinstall.com/lessons/basic_css_v3
CSS ・CSSの基本 どの要素の { 何を: どのようにする; 何を: どのようにする; 何を: どのようにする;
}
CSS ・CSSの基本 h1 { color: red; background: #ccc; text-align: center;
}
CSS ・CSSの基本 h1 { color: red; background: #ccc; text-align: center;
} セレクタ
CSS ・CSSの基本 h1 { color: red; } セレクタ プロパティ
CSS ・CSSの基本 h1 { color: red; } セレクタ プロパティ 値
CSS ・CSSの基本 h1 { color: red; } セレクタ プロパティ 値
・複数のセレクタの指定 h1, p, .t_red { color: red; }
CSS ・CSSの基本 h1 { color: red; } セレクタ プロパティ 値
・複数のセレクタの指定 h1, p, .t_red { color: red; } セレクタはカンマ(,)区切りで 複数指定することもできるでー。
CSS ・CSSの基本 h1 { color: red; } ちなみに…
CSS ・CSSの基本 h1 { /* color: red; */ } ちなみに…
コメントアウトは /* コメント */ で囲うんやで。 気をつけなはれ。 // ↑は使えまへん。
基本的なセレクタ h1 セレクタ ・タイプセレクタ ・IDセレクタ ・classセレクタ ・擬似クラス ・擬似要素
基本的なセレクタ h1 セレクタ ・タイプセレクタ ・IDセレクタ ・classセレクタ ・擬似クラス ・擬似要素 → h1, p,
div, li → #header → .test → ◯◯◯:hover → ◯◯◯::after
よく使うプロパティ ・margin, padding ・float ・display ・position
よく使うプロパティ ・margin, padding
よく使うプロパティ ・margin, padding 麻雀の中にパン
よく使うプロパティ ・float
よく使うプロパティ ・float (浮かせる・浮かぶ)
よく使うプロパティ ・display ・インライン要素 ・ブロック要素 ・インライン-ブロック要素
よく使うプロパティ ・position
よく使うプロパティ ・position 初期値 static
よく使うプロパティ ・position 初期値 static そのため、absolute(絶対位置)を使用すると きは、その親要素にrelative(相対位置)を指 定する必要があるんやでー
ベンダープレフィックス ブラウザごとに仕様が異なるため、 記述するもの
ベンダープレフィックス -ms- ・・・・・・ Internet Explorer -webkit- ・・・・・・ Google Chrome、Safari -moz- ・・・・・・ Firefox -o- ・・・・・・ Opera ブラウザごとに仕様が異なるため、 記述するもの
ベンダープレフィックス 主要ブラウザの最新バージョンでは、 かなりの種類のCSS3プロパティがサポートされている
ベンダープレフィックス 主要ブラウザの最新バージョンでは、 かなりの種類のCSS3プロパティがサポートされている よく使うプロパティ(border-radius、word-break、opacity、box- shadow、transforms)なんかはほぼいけるで。 http://caniuse.com/
StyleDocco Node.jsで作られたスタイルガイドジェネレータ styledocco -n "Style Guide" css/style.css 実行 http://toybox-design.net/?p=640
SMACSS (CSSの設計・目標) ・予測しやすい ・再利用しやすい ・保守しやすい ・拡張しやすい
参考資料 ・CSS設計の教科書 ・フロントエンジニア養成読本 ・新WEBデザインの大原則 ・いろいろなサイト etc
おしまい