SlideShare ist ein Scribd-Unternehmen logo
1 von 28
CSS基本。
CSSとは?
Cascading Style Sheetsとは?WEBサイトのレイアウトやデザインを指定する。HTMLは『構造言語』CSSは『表現言語』
CSSを使うメリット1.高度で柔軟なデザイン
CSSを使うメリット2.デザインの統一1つのCSSファイルがあればHTMLファイルがいくつあってもページのデザインをそろえることができます。
CSSを使うメリット3.デザインの切り替え1つのCSSファイルでデザインを統一しておけばCSSを修正するだけで複数のページの見栄えを一度に変えられます。HTMLを1ページずつ修正する手間は要りません。
CSSの文法
CSSの基本的な記述方法
CSSの基本的な記述方法2
ほかにもクラスでデザインスタイルを指定。IDでデザインスタイルを指定。が、ありますが
今日は省略。
では次。
CSSの読み込み方
1.HTML内にCSSを組み込む。
2.CSSファイルを読み込む。
以上CSS基本。でした。
ここでちょこっとおさらい。
要素、属性といえば?
HTML
セレクタ、プロパティといえば?
CSS
構造言語は?
HTML
表現言語は?
CSS
しつこいですが
骨組みはHTML装飾はCSSですよーー。
お疲れ様でした。

Weitere ähnliche Inhalte

Was ist angesagt?

今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
 
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
 
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
 
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろうメンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
 

Was ist angesagt? (20)

CSS の歩き方
CSS の歩き方CSS の歩き方
CSS の歩き方
 
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
 
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
 
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
 
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
 
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティーヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
 
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
 
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレHTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
 
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
 
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話もOocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
 
コーディングが上達するコツ
コーディングが上達するコツコーディングが上達するコツ
コーディングが上達するコツ
 
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
 
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing  at HTML5 Conference 2016E2E CSS Testing  at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
 
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろうメンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
 
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
 
UAスタイルシートと リセットCSS
UAスタイルシートと リセットCSSUAスタイルシートと リセットCSS
UAスタイルシートと リセットCSS
 
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろうイマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
 
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
 
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
 
Webコーディングの基本+α
Webコーディングの基本+αWebコーディングの基本+α
Webコーディングの基本+α
 

css基本。