css3 講座Presented by boomerang

cssWEBページをスタイルを指定するための言語

　　　　html: 文書の構造を定義する

見出し段落1段落2表

見出し段落1

段落2 表

見出し

段落1

段落2

表

構造とスタイルの分離

cssを適用cssを適用html文書

記述場所

html内に直接記述 <style> スタイルを記述 </style> !

外部ファイルに記述 <link rel="stylesheet" href=“style.css" />

スタイルの指定

p { color : blue }

セレクタ：スタイルを適用する範囲の指定

プロパティ：適用するスタイルの種類

セレクタ 値プロパティ

セレクタ

・全称セレクタ *{ margin :0; } !

・子孫セレクタ div p{ color : blue }

id と classid (固有の識別子…文書内に一つだけ) html内記述 ：<p id=“main”> 本文 </p> css内記述 ：p#main{ font-size : 20px } !

class (分類名…文書内に複数可) html内記述 ：<p class=“group”> 本文 </p> css内記述 ：p.group{ font-size: 10px }

ボックスモデル(1/3)div#contents{ margin: 10px ; /*外側の余白*/ padding: 10px ; /*内側の余白*/ border: solid 1px green ; /*境界線*/ width: 100px ; height : 50px ; background: blue }

ボックスモデル(2/3)

div#contents

margin-top

margin-bottom

border-top

border-bottompadding-bottom

padding-toppadding-left

border-left

margin-left

padding-right

border-right

margin-right

<̶width̶><̶height̶>

ボックスモデル(3/3)• margin( padding )の省略 • 個別指定( margin-top, margin-left, … ) • margin と auto と width の関係 • Negative Margin(ネガティブ・マージン) • marginの相殺

!

参考：CSS： marginの正しい理解 - KOJIKA17

floatレイアウトする上で必須といえるプロパティ !

• ボックスのフロート（浮動化）を指定する - TAG index

• float段組の基本｜floatレイアウトホームページ作成講座 - CSS デザインサンプル

• 初心者がよくハマる、CSSのfloatプロパティ徹底攻略 - WeeeeB

スタイルの優先順位• CSSの制作者

• セレクタ

• 記述位置

などによって 優先順位が定まっている

ブラウザによってデフォルト値が変わるため、 全称セレクタで初期化しておこう

参考：スタイルの優先順位 - TAG index

コーディング課題

• kadai02.pngをコーディングしよう

• lesson1に使用する画像が添付されている

• 最低2つのブラウザで動作確認をすること

• 6/4(水)に進捗報告、6/11(水)を最終期限とする

発展課題• テキストリンクをブロックレベル要素にする

• スクロールしても位置が変わらないメニューを実装してみよう(positionプロパティ)

• 文字に陰をつけてみよう

• ボックスの角を丸くしてみよう

• ページを自由にカスタマイズしてみよう

参考

• 他人のソースを見て、レイアウトを実現している方法を参考にしよう。

• ブラウザ上で右クリックし、「ページのソースを表示」(chrome)などで確認可能。

• 「要素の検証」(chrome)なども活用しよう。 • ググって分からなければ相談・質問をしよう。