基礎演習
CSSはどこに書くか？
外部ファイルにCSSを書く方法
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSの練習</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>大見出し</h1> <p>こんにちは！</p> </body> </html>
《style.css》
h1 { color: red; }
styleタグを使ったCSSを書く方法
- styleタグにtype属性は不要
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSの練習</title> <style> h1 { color: red; } </style> </head> <body> <h1>大見出し</h1> <p>こんにちは！</p> </body> </html>
CSSの書き方の基本
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSの練習</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>大見出し</h1> <p>こんにちは！</p> </body> </html>
《style.css》
/* セレクタ プロパティ 値 */ h1 { color: red; }
- 値を複数並べる必要がある書き方をする場合には、複数の値を識別できるように半角スペースが必要です
h1 { border: 1px solid #F00; }
セレクタを理解する
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSの練習</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>大見出し</h1> <p>こんにちは<span class="test">！</span></p> <div id="main">メインです！</div> </body> </html>
《style.css》
/* セレクタ */ h1 { color: red; } /* ID要素 */ #main { font-size:36px; } /* class要素 */ .test { font-size: 9px; } /* 複数の要素 */ #main, .test { border: 1px solid #CCC; }
テキストのスタイル
- テキストの色を指定する (color)
- フォントサイズを指定する (font-size)
- 太字を指定する (font-weight)
- 行揃えを指定する (text-align)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSのお勉強</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>大見出し</h1> <p>こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！</p> <p>こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！こんにちは！</p> </body> </html>
《style.css》
p { color: green; font-size: 14px; font-weight: bold; text-align: right; }
CSSで定義されている147色について
- redやgreenといった、CSSで定義されている色は以下でも確認することができます。全部で147色あるようです。
- http://www.147colors.com/
16進数のRGB(赤/緑/青)
- 色をあらわす16進数の表記は、先頭から2桁ずつ赤、緑、青の色の強さをあらわします。
- #FFFF00 だったら 赤=FF / 緑=FF / 青=00 となります。
「text-align」の値
- text-alignの値には left（左寄せ）、right（右寄せ）、center（中央揃え）の他、justify（両端揃え）というものもあるので覚えておきましょう。
演習課題
【CSS01】
- 文字色と背景色
<body> <h1>style要素</h1> <h3>style element</h3> <p>HTML文書内にまとめて設定します。</p> </body>
h1 { color: #3FA068; } h3 { background-color: #355584; color: #FFFFFF; } p { color:#000080; }
【CSS02】
- 文字色と背景色
<body> <h1>About wine</h1> <h2>Chianti Classico Riserva</h2> <p>1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあります。<br> 15世紀から現在に至るまで、キャンティワインの造り手たちの先導者であり続けるマッツェイの歴史は、キャンティワインの歴史といっても過言ではありません。キャンティの最高峰と呼ばれるマッツェイは、もっぱら地元の人のために造られる量り売りを飲んでいたぼくにとって、憧れのワイナリーでした。当時はおじいちゃんになったら飲めるかなと思っていましたが、こうして日本で、ましてや自分の店のリストに加えることができるなんて驚きです。</p> </body>
body { background-color:#8FBC8B; } h1 { font-size: 2.2em; color: #FFFFFF; } h2 { font-size: 1.2em; color: #FFFFFF; padding-left: 10px; background-color: #BC8F8F; } p { font-size: 0.85em; line-height: 2.0; padding: 10px; color: #333; background-color: #F5F5DC; }
【CSS03】
- 背景色と余白
<body> <h2>background-colorの設定</h2> <p>見出しには濃いめの色を背景に指定し、文字を白抜きにします。段落には見出しよりも薄い色を指定します。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを1em指定します。</p> </body>
h2 { color: #FFFFFF; font-size: 1.0em; background-color: #1565B5; } p { font-size: 0.875em; background-color: #BDD4EB; } h2,p { margin: 0; padding: 1.0em; }
【CSS04】
- 背景画像を設定
body { background-image: url("bee.gif"); }
【CSS05】
- 背景画像を設定（水平方向に繰り返し）
body { background-image: url("line1.jpg"); background-repeat: repeat-x; } h1 { color: #30647A; font-family: serif; }
【CSS06】
- 背景画像を設定（垂直方向に繰り返し）
body { background-image: url("line2.jpg"); background-repeat: repeat-y; } h1 { color: #FFFFFF; }
【CSS07】
- 背景画像と枠線
<body> <h1>Page Design</h1> <p>背景に色数を減らした画像を用意します。背景画像は、縦方向び繰り返しを指定しています。<br> また、見出しの文字は、大きく、インパクトの強い色を指定し、目を引くようにしています。<br> このように、やり方次第でデザインの幅が広がります。いろいろ試してみましょう。</p> </body>
body { margin: 0; background-color: #FFFFFF; background-image: url("mono.gif"); background-repeat: repeat-y; } h1 { color: darkred; border-bottom: dashed 4px #999999; } p { color: #333333; } h1, p { padding: 5px 20px; margin-left: 70px; }
【CSS08】
- 背景画像（繰り返さない）
<body> <h1>古池や蛙飛び込む水の音</h1> <p>芭蕉の「古池や蛙飛び込む水の音」の、連歌の発句として脇を予想したもとの形は「古池や蛙飛んだる水の音」でした。<br> 明らかに、「蛙飛んだる水の音」のほうが勢いがあり、連衆から脇句を引き出す挨拶の意味も込められていましたが、単独の文学作品としては、 「蛙飛び込む水の音」のほうが遙かに余情があるでしょう。<br> 明治以後、近代化された俳句が盛んになると共に、連歌は廃れてしまいました。しかし、近年連歌を巻く人が急激に増加しつつあるようです。<br> 発句には、何よりも連歌全体がそこから始まるという、共同製作の原点という面白さがあります。これまで、俳句だけを作ってこられた方に、是非とも、発句の面白さを経験して戴くために、発句の部屋を開設した次第です。</p> </body>
body { background-image: url("frog.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { font-size: 1.85em; font-family: serif; } p { width: 320px; } h1, p { margin: 40px 40px 0 160px; }
文字の囲み
- borderプロパティの値を指定する
- 文字と囲みとの空きは、paddingプロパティの値を指定する
<body> <div id="box1"> <p class="border1">テキストの囲みを表現したい［標準］</p> <p class="border2">テキストの囲みを表現したい［線の太さ］</p> <p class="border3">テキストの囲みを表現したい［線のカラー］</p> <p class="border4">テキストの囲みを表現したい［線のスタイル］</p> <p class="border5">テキストの囲みを表現したい［複数の指定］</p> <p class="border6">テキストの囲みを表現したい［複数の指定］</p> </div> </body>
body { font-size: 1.0em; } .border1, .border2, .border3, .border4, .border5, .border6 { margin: 12px 0; padding: 12px; } .border1 { border: 1px solid #666666; } .border2 { border: 4px solid #666666; } .border3 { border: 1px solid #FF0000; } .border4 { border: 1px dotted #666666; } .border5 { border-top: 4px solid #229966; border-right: 1px dotted #229966; border-bottom: 1px dotted #229966; border-left: 12px solid #229966; } .border6 { border-top: 2px solid #229966; border-bottom: 4px double #229966; border-left: 1px solid #229966; }
