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
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
150
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
200
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
3
7.3k
AI エージェントと考え直すデータ基盤
na0
2
1.1k
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
280
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.8k
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
480
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
310
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Building an army of robots
kneath
306
45k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
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
おしまい