Web概論 - PDF 無料ダウンロード

4.1 CSS の仕組みと書式 HTML とスタイルシートの仕組み HTML <html> <head> <link href= style.css type= text/css rel= stylesheet /> </head> <body> ファイルへのパス <h1> 見出し </h1> <p> 段落 </p> </body> </html> CSS(style.css ) @charset "utf-8"; h1 { color: red; 文字コードの設定 p { font-size: 24px; Copyright 2011 ZDRIVE, K.K. All rights reserved. 3

4.1 CSS の仕組みと書式 CSS の書式複数のプロパティをまとめて記述することも可能セミコロン (;) が区切りの役目を持つ要素名 { プロパティ : 値 ; プロパティ : 値 ; CSS(style.css ) @charset "utf-8"; h1 { color: red; セミコロン font-size: 24px; セミコロン最後のセミコロンは無くても良いが各行の最後にセミコロンを書くクセをつけることで書き忘れを防ぐことができる Copyright 2011 ZDRIVE, K.K. All rights reserved. 6

4.1 CSS の仕組みと書式 CSS の書式セレクタをまとめて記述することも可能コンマ (,) で区切る要素名, 要素名 { プロパティ : 値 ; CSS(style.css ) @charset "utf-8"; コンマ h1, p { color: red; font-size: 24px; Copyright 2011 ZDRIVE, K.K. All rights reserved. 7

4.1 CSS の仕組みと書式 CSS の基本書式コメントを記述する /* */ で囲むコメントはページ上での見た目に影響を与えない CSS(style.css ) @charset "utf-8"; /* 見出しと段落 */ h1, p { color: red; font-size: 24px; Copyright 2011 ZDRIVE, K.K. All rights reserved. 8

4.2 セレクタの種類クラスセレクタ書式 : 要素名. クラス属性の値 { プロパティ : 値 ; HTML. クラス属性の値 { プロパティ ; 値 ; <p class= error > これは赤い文字 </p> <p class= info > これは緑文字 </p> CSS p.error { color: red;.info { color: green; Copyright 2011 ZDRIVE, K.K. All rights reserved. 10

4.2 セレクタの種類 ID セレクタ書式 : 要素 #ID 属性の値 { プロパティ : 値 ; HTML #ID 属性の値 { プロパティ : 値 ; <p id= error > これは赤い文字 </p> <p id= info > これは緑文字 </p> CSS p#error { color: red; #info{ color: green; Copyright 2011 ZDRIVE, K.K. All rights reserved. 11

4.2 セレクタの種類子孫セレクタ書式 : 親要素子孫要素 { プロパティ : 値 ; 親要素と子要素 ( または孫要素 ) は半角スペースで区切る HTML <p> これは <span> 赤い </span> 文字 </p> <p> これは <span class= info > 緑 </span> 文字 </p> 半角スペース CSS p span { color: red; p span.info { color: green; Copyright 2011 ZDRIVE, K.K. All rights reserved. 12

4.2 セレクタの種類クラス ID の値のルール class 属性は 1 つの文書内で同じ値を重複して指定することができるが id 属性は同じ値を重複して使用することはできない <p> これは <span id= red > 赤い </span> 文字 </p> <p> これは <span id= red > 赤い </span> 文字 </p> <p> これは <span class= red > 赤い </span> 文字 </p> <p> これは <span class= red > 赤い </span> 文字 </p> Copyright 2011 ZDRIVE, K.K. All rights reserved. 13

4.2 セレクタの種類クラス ID の値のルール半角英数字ハイフン ( - ) アンダーバー ( _ ) を使用することができる大文字小文字は区別される数字から開始することはできない記号から開始することはできない <p> これは <span id= 1-a > 赤い </span> 文字 </p> <p> これは <span class= 1-a > 赤い </span> 文字 </p> <p> これは <span id= a-1 > 赤い </span> 文字 </p> <p> これは <span class= a-1 > 赤い </span> 文字 </p> Copyright 2011 ZDRIVE, K.K. All rights reserved. 14

4.3 文字の大きさを指定する font-size プロパティ書式 : { font-size: 値 ; 相対値の単位 px ピクセルモニター上の表示単位 % パーセント基準となる文字サイズに対し割合で指定 em エム文字の高さを 1 とする ex エックスハイト小文字の x の高さを 1 とする絶対値の単位 pt ポイント 1pt = 0.3514mm pc パイカ 1pc = 12pt = 4.2168mm cm センチメートル 1cm = 10mm キーワード xx-small 非常に小さい 9px 相当 x-small 小さい 10px 相当 small やや小さい 12px 相当 medium 通常サイズ 16px 相当 large やや大きい 18px 相当 x-large 大きい 24px 相当 xx-large 非常に大きい 32px 相当 larger ひとまわり大きい smaller ひとまわり小さい mm ミリメートル 1mm = 0.1cm in インチ 1in = 25.4mm Copyright 2011 ZDRIVE, K.K. All rights reserved. 15

4.3 文字の大きさを指定する文字サイズ指定の記述と表示例 HTML <p> 今日は <span> いい天気 </span> ですね </p> CSS p { font-size: 20px; p span { font-size: 2em; 1em は 1 文字分の大きさであり親要素の文字サイズに依存する例 ) 親要素の文字サイズが 20 ピクセルで子要素の指定が 2em だった場合子要素の文字サイズは 40 ピクセルとなる Copyright 2011 ZDRIVE, K.K. All rights reserved. 16

4.3 文字の大きさを指定する見出しタグをつけると文字の大きさが変わるブラウザが持っている CSS が適用される HTML <h1>h1 要素の文字の大きさ </h1> <h2>h2 要素の文字の大きさ </h2> <h3>h3 要素の文字の大きさ </h3> <h4>h4 要素の文字の大きさ </h4> <h5>h5 要素の文字の大きさ </h5> <h6>h6 要素の文字の大きさ </h6> Copyright 2011 ZDRIVE, K.K. All rights reserved. 17

4.4 文字の色を指定する color プロパティ書式 :{ color: 値 ; 値の種類指定方法記述例 16 進数表記 RGB を 16 進数で 2 桁ずつ指定 #FF0000 16 進数表記 RGB を 16 進数で 1 桁ずつ指定 #F00 10 進数表記 RGB を 10 進数で指定 ( 最大 255) rgb(255,0,0) % 表記 RGB を % で指定 rgb(100%,0%,0%) 色名色の名前で指定 red Copyright 2011 ZDRIVE, K.K. All rights reserved. 18

4.4 文字の色を指定する <span> タグ書式 :<span>~</span> 論理的な意味はない部分的に CSS の指定を変更するために使用する <span> タグと color プロパティを使用した記述と表示例 HTML <p> 今日は <span> いい天気 </span> ですね </p> CSS p span { color: #0000ff; font-size: 30px; Copyright 2011 ZDRIVE, K.K. All rights reserved. 20

4.5 文字を装飾する font-weight プロパティ書式 :{ font-weight: 値 ; プロパティ値説明数値 100~900(400が標準 ) font-weight normal bold bolder lighter 通常の太さ太字一段階太くする一段階細くする実際には 9 種類の太さをブラウザが表示できるわけではなく normal と bold の 2 種類しか表示できない Copyright 2011 ZDRIVE, K.K. All rights reserved. 22

4.5 文字を装飾する text-decoration プロパティ書式 :{ text-decoration: 値 ; プロパティ値説明 line-through 取り消し線をつける textdecoration underline overline blink none 下線をつける上線をつける点滅させる通常表示にする取り消し線をつける際は通常 <del> タグを使う Copyright 2011 ZDRIVE, K.K. All rights reserved. 24

4.5 文字を装飾する text-decoration を使用した記述と表示例 HTML <p class= under > 今日はいい天気ですね </p> <p> <a href= # > 今日はいい天気ですね </a> </p> CSS p.under { text-decoration: underline; /* p タグの中の a タグには下線を付けない */ p a { text-decoration: none; テキストに下線をつけるとテキストリンクのように見えるので使用時には注意が必要 Copyright 2011 ZDRIVE, K.K. All rights reserved. 25

4.6 行の高さを指定する line-height を使用した記述と表示例 1 HTML <h2> 新着情報 </h2> <dl> <dt>2012/02/23</dt> <dd> 新しい食感のパンが新登場!</dd> <dt>2012/02/22</dt> <dd> 春特集アップしました </dd> </dl> CSS dl { line-height: 2; line-height の値には単位をつけないことが多い Copyright 2011 ZDRIVE, K.K. All rights reserved. 31

4.6 行の高さを指定する line-height を使用した記述と表示例 2 HTML <div> <h1> プロパティ : line-height</h1> <p>line-height の値に単位は <span> つけない </span> ことが多い </p> <p>line-height の値に単位は <span> つけない </span> ことが多い </p> <p>line-height の値に単位は <span> つけない </span> ことが多い </p> </div> CSS div { font-size: 16px; line-height: 2em; background-color: yellow; p { font-size: 24px; span { font-size: 36px; line-height の値は div で計算された数値 (32px = 16 x 2) が p 要素と span 要素に対しても適用される Copyright 2011 ZDRIVE, K.K. All rights reserved. 32

4.6 行の高さを指定する line-height を使用した記述と表示例 3 HTML <div> <h1> プロパティ : line-height</h1> <p>line-height の値に単位は <span> つけない </span> ことが多い </p> <p>line-height の値に単位は <span> つけない </span> ことが多い </p> <p>line-height の値に単位は <span> つけない </span> ことが多い </p> </div> CSS div { font-size: 16px; line-height: 2; background-color: yellow; p { font-size: 24px; span { font-size: 36px; line-height の値は div の値である 2 が p 要素と span 要素に対しても適用される p 要素の line-height: 48px = 24 x 2 span 要素の line-height: 72px = 36 x 2 Copyright 2011 ZDRIVE, K.K. All rights reserved. 33

4.7 テキストを揃える text-align を使用した記述と表示例 html <p id="left"> この文章は左揃えとなります </p> <p id="center"> この文章は中央揃えとなります </p> <p id="right"> この文章は右揃えとなります </p> CSS p#left { text-align: left; p#center { text-align: center; p#right { text-align: right; Copyright 2011 ZDRIVE, K.K. All rights reserved. 36

4.8 テキストの字下げをする text-indent を使用した記述と表示例 CSS p#whole { text-indent: 1em; p#half { text-indent: 0.5em; HTML <p id="whole"> この文章は 1 文字分の字下げとなります </p> <p id="half"> この文章は 1 文字の半分の字下げとなります </p> Copyright 2011 ZDRIVE, K.K. All rights reserved. 38

4.9 HTML 内に CSS を書く style タグを使って head タグ内に書く HTML <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>html とスタイルシートの仕組み </title> <style type="text/css"> h1 { color: red; p { font-size: 24px; </style> </head> <body> <h1> 見出し </h1> <p> 段落 </p> </body> </html> Copyright 2011 ZDRIVE, K.K. All rights reserved. 39

4.9 HTML 内に CSS を書く style 属性を使って各タグの中に書くインラインスタイルシート HTML <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>html とスタイルシートの仕組み </title> </head> <body> <h1 style="color: red;"> 見出し </h1> <p style="font-size: 24px;"> 段落 </p> </body></html> Copyright 2011 ZDRIVE, K.K. All rights reserved. 40