Movatterモバイル変換

最速 CSS 勉強会 Id:youzaka

前回の振り返り HTML を書きました見た目がシンプルすぎる -> デザインは CSS で

CSSって何? Cascading Style Sheets の略スタイルシートの一種スタイルシート : HTML の各要素をブラウザにどう表示させるかを定めたもの古いブラウザには JSSS (JavaScript Style Sheets) というものを実装をしたものもあったが、それは無視

CSSって何? Cited from: ユニバーサル HTML/XHTML

CSSって何? <h1> 勘違い学会 </h1> が ( 大きくて太いフォントに改行 ) と表示されるのは、ブラウザのデフォルトシートの効果 h1 { display: block; font-size: 2em; margin: .67em 0; font-weight: bolder; } (http://www.w3.org/TR/CSS21/sample.html を元に作成 )

セレクタ { プロパティ : 値 ;} h1 { display : block ; font-size : 2em ; margin : .67em 0 ; font-weight : bolder ; } セレクタはHTMLの要素などを指定するプロパティと値のペアを:(コロン)で指定するペアは;(セミコロン)で列挙できる CSSの書き方

CSS が短いなら <style> p {background: #000; color: #fff;} em {color: red;} </style> 普通は <link rel =" stylesheet " href =" path/to/css "> CSSの記述をHTMLに反映させる

最初に覚えるCSSプロパティ線 border 要素内余白 padding 要素間余白 margin 行の高さ line-height 文字列の行揃え text-align フォントの太さ font-weight 背景の色 background-color 文字の色 color フォントサイズ font-size 説明プロパティ名

p { font-size : 16px ; /* ピクセル指定 */ font-size : 200% ; /* 親要素からの相対指定 (%) */ font-size : 2em ; /* 親要素からの相対指定 (em) */ font-size : 3cm ; /* 絶対指定 */ font-size : xx-small ;/* 絶対キーワード指定 */ font-size : bigger ; /* 相対キーワード指定 */ } 文字の大きさを絶対指定するのはなるべく避け、親要素からの相対サイズを指定するようにする。 em は「文字” m” の横幅」を表す単位。 2em と 200% は同じ意味だが、 em で指定すると古い IE でいやなことに…… 文字の大きさを変えてみよう

p { color : #f00 ; /*RGB*/ color : #ff0000 ; /*RRGGBB*/ color : rgb(255, 0, 0) ; /*rgb()*/ color : red ; /* キーワード */ color : inherit ; /* 親要素の指定を継承する */ } R( 赤 )G( 緑 )B( 青 ) の組み合わせで色を表現することに慣れるようにする。赤 + 緑 = 黄、赤 + 青 = 紫、緑 + 青 = 青緑赤 + 緑 + 青 = 白色名はたくさん定義されているが、それより #RRGGBB に慣れたほうが良い文字の色を変えてみよう

p { background-color : #f00 ; /*RGB*/ background-color : #ff0000 ; /*RRGGBB*/ background-color : rgb(255, 0, 0) ; /*rgb()*/ background-color : red ; /* キーワード */ background-color : transparent ; /* 透明 */ } 背景色のほかに、背景画像の指定もできる p { background-image : url( path/to/image ) ; background-repeat : repeat-x ; background-position : bottom right ; } まとめて指定 p { background : #f00 url( image ) repeat-x bottom ; } 背景の色を変えてみよう

p { font-weight : bold ; /* 絶対指定 */ font-weight : bolder ; /* 相対指定 */ font-weight : 100 ; /* 数値指定 (100 ～ 900) */ } ただし、ほとんどのフォントは normal と bold しか区別してくれない。斜体にしたいときは p { font-style : italic ;} 等幅にしたいときは p { font-family : monospace ;} p { text-align : center ; line-height : 1.5 ; /* 数値指定 */ line-height : 15px ; /* 単位つき指定 */ line-height : 150% ; /* パーセント指定 */ } フォントの太さと行揃え、行間隔

上、右、下、左の値を指定 p { margin : 1em 10% 5px auto ; } 上、左右、下の値を指定 p { margin : 1em 10% 5px ; } 上下、左右の値を指定 p { margin : 1em 10% ; } 上下左右の値をまとめて指定 p { margin : 1em ; } margin, padding

margin を padding に変えても表示結果が同じように見える ? p { padding : 1em ; /* 上と下と右と左 1em * / } 線を引っ張ってみると違いが分かるはず p { boder : solid 1px #0f0 ; } margin, padding

margin, padding 実際に Firebug を使って、 CSS のボックスモデルについて見てみましょう。 Firebug での表示 margin …… 黄色 padding …… 紺青色 content …… 水色 Cited from: 基礎編 2 ボックスモデルと DOCTYPE スイッチ http://www.geocities.jp/multi_column/float/02.html

p { boder : solid 1px #0f0 ; } は p { boder-style : solid ; boder-width : 1px ; boder-color : #0f0 ; } と同じ意味。また、 p { boder-top : solid 1px #0f0 ; boder-right : solid 1px #0f0 ; boder-bottom : solid 1px #0f0 ; boder-left : solid 1px #0f0 ; } とも同じ意味。辺によって border の表現を変えたいときに簡単なほうを選ぶ border

border さまざまな種類のborderが用意されている p { border : solid 10px #0f0 ; border-style : double ; border-style : dotted ; border-style : dashed ; border-style : groove ; border-style : ridge ; border-style : inset ; border-style : outset ; }

次に覚えるCSSプロパティボックスの z 軸位置 z-index ボックスの x,y 軸位置 top, left ボックスの配置方法 position float 指定の無効化 clear ボックスの浮動制御 float ボックスの高さ height ボックスの幅 width 表示のされ方 display 説明プロパティ名

display p { display : block ; display : inline ; display : none ; display : list-item ; } HTML のブロック要素・インライン要素と CSS の block, inline を混同しないようにする p 要素に背景色や border をつけた状態で、 p 要素の display 値を inline にしてみよう

float, width, height, clear p { float : left ; width : 20% ; height : 10em ; } floatを指定する要素にはwidthの指定が必須 heightはなくてもいい (初期値のautoが適用) floatによる回り込み指定を解除するには、解除に使う要素に clear : both ; を指定する

floatとpositionの使い分け positionを悪用するとレイアウトが崩壊する ex: ホームページビルダーのどこでも配置モード HTMLとしての登場順序とデザインの兼ね合い融通の利く方向実際に書いてみればだんだんつかめるはず

レイアウト例 HTMLの登場順序タイトル > 本文 > 付属情報 > フッタ本文カラムにwidth + float: left 付属情報カラムに本文カラム+α分のmargin フッターカラムにclear: left タイトルカラム本文カラム付属情報カラムフッターカラム

レイアウト例 HTMLの登場順序タイトル > 本文 > 付属情報 > フッタタイトル、本文、フッターのカラムに付属情報カラム分のmargin 付属情報カラムはposition: absolute タイトルカラム本文カラム付属情報カラムフッターカラム

セレクタについてもっと詳しくこれまでの例はすべて、要素をセレクタにしていましたが、他にもいろんな指定ができます複数の要素に同じ指定を与える em, strong { color : #f00 ; font-weight : bold ; font-size : 150% ; }

セレクタについてもっと詳しく文脈セレクタ li em { color : #f00 ; } li 要素の子孫である em 要素は、色を赤くする子供セレクタ li + em { color : #f00 ; } li 要素の子である em 要素は、色を赤くする

セレクタについてもっと詳しく兄弟セレクタ h2 + p { text-indent : 0 ; } h2 要素の次に出てくる ( 弟である )p 要素は、インデントを入れない <h2> 中見出しだよ </h2> <p> その後の段落だよ </p>

セレクタについてもっと詳しく全称セレクタ * { margin : 0 ; } すべての要素について、マージンを０にする p * em { color : red ; } p 要素の子孫の任意の要素の子孫の em 要素の文字色を赤くする

セレクタについてもっと詳しくクラスセレクタ .notice { border : solid 1px #f00 ; } notice というクラスをもつすべての要素について、枠線を表示する .invalid.notice { border : solid 1px #f00 ; } invalid というクラスと notice というクラスを同時にもつすべての要素について、枠線を表示する p.notice { border : solid 1px #f00 ; } notice というクラスをもつ p 要素について、枠線を表示する

セレクタについてもっと詳しく ID セレクタ #example_notice { border : solid 1px #f00 ; } example_notice という ID をもつすべての要素について、枠線を表示するクラスセレクタや ID セレクタは便利だが、なるべく文脈セレクタを利用するべき。 CSS のために HTML に手を加えるのは控える

セレクタについてもっと詳しく属性セレクタ h2[title] {} /* title 属性を持つ h2 要素 */ input[type=“text”] {} /* type 属性が” text” である input 要素 */ 擬似クラスセレクタ a:link {} /* 未訪問 URI へのリンク */ a:visited {} /* 訪問済み URI へのリンク */ a:active {} /* 選択中のリンク */ a:hover {} /* マウスが載っているリンク */ 擬似要素セレクタ a:fitst-line {} /* 要素の最初の 1 行 */ a:first-letter {} /* 要素の最初の 1 字 */

CSSの「カスケーディング」 CSS の指定は、「誰による指定か」「セレクタの選択範囲はどれくらいか」「順序」によって優先順位が決められている誰による指定かブラウザの指定 < 読者による指定 < 作者による指定 !important キーワードで優先順位を上書き可能ユーザーシートの設定方法はブラウザによる順序後に読んだものが優先。指定があるごとにどんどん上書きされる

CSSの「カスケーディング」セレクタの選択範囲 p { color : #f00 ;} p.hoge { color : #00f ;} p#hage { color : #00f ;} <p class =“ hoge ” id =“ hage ”> 何色になる ? </p> 選択範囲が狭いものが優先 id セレクタ > クラスセレクタ > 要素セレクタ .hoge と p.hoge は p.hoge が優先。要素が指定されている分だけ選択範囲が狭い

CSSの「カスケーディング」継承 p { color : #f00 ;} em { font-size : large ;} <p> ああ <em> ああ </em> ああああ </p> em 要素に文字の色の指定はないが、親要素である p の文字色の指定が、子の em に継承される

Movatterモバイル変換

Change Language

CSS勉強会

Embed presentation

Recommended

More Related Content

Similar to CSS勉強会

CSS勉強会