CSS

演習2-1

演習1で作成したHTMLの次のようなスタイルシートを作成せよ．

文字のフォントを指定せよ．例： font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳＰゴシック", Verdana, Geneva, Arial, Helvetica, sans-serif;
文字の色を指定せよ．例：#556b2f
ヘッダーの背景色を指定せよ（例：#334d55）．文字色を指定せよ（例：#fff）．マージンとパディングを上下左右10pxとせよ．文字列を右寄せにせよ．
本文「HTML5で…」～「…各自で作成」の背景色を指定せよ（例：#FFF8DC）．
フッターの背景色を指定せよ（例：#c0ddc0）．文字色を指定せよ（例： #334d55）．マージンを上下左右10pxとせよ．文字列をセンタリングせよ．
ヘッダとフッタの間のマージンを10pxとせよ．
見出しの色を指定せよ（例： #334d55）．

演習2-1 解答例

別ウィンドウで表示

演習2-1 ソース

HTMLファイル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>セミナー演習２</title>
<link rel="stylesheet" href="02-css1.css" type="text/css" />
</head>
<body>
<header>田中(哲)セミナー定員8名情報工学セミナーⅠ&Ⅱ</header>
<div id="wrap">
省略（演習1と同じ内容）
</div>
<footer>このコンテンツの<a href="../images/seminar.pdf">PDFファイル</a></footer>
<body>
</html>

CSSファイル

@charset "utf-8";
body {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳＰゴシック", Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #556b2f;
}
header {
margin: 10px;
padding: 10px;
background-color: #334d55;
color: #fff;
text-align:right;
}
#wrap {
margin: 10px;
background-color:#FFF8DC;
}
h1,h2 {
color:#334d55;
}
h1.err {
color:#FF0000;
}
footer {
margin: 10px;
background-color: #c0ddc0;
color:#334d55;
text-align:center;
}

演習2-1 解説

HTML

6行目
- CSSをHTMLに適用する方法は次の2通り．解答例は2番目の方法．
  1. HTMLファイル内にstyle要素として記述
  2. 別ファイルにスタイルシートを記述して，link要素でHTMLファイルからリンク
11行目
- 本文（ヘッダとフッタの間）のマージンを指定するために，その部分をdiv要素としてidを付ける．

CSS

1行目
- 文字コードは@charsetで指定する．
3行目，8行目，16行目，20行目，24行目
- スタイルは
  - セレクタ {プロパティ名:値; プロパティ名:値;…}
  - の形式で指定する．
- 例えばbody要素の文字色は
  - body {color:red;}
- セレクタは「要素名」，「.クラス（ドットとクラス）」，「#ID（ハッシュとID）」等で指定する．
  - 3行目,8行目,20行目,24行目は要素名で指定している．
  - 16行目はIDで指定している．
  - 複数のセレクタを「，」（カンマ）で区切って並べると，その両方に同じスタイルが適用される．
  - 複数のセレクタを「」（スペース）で区切って並べる，ネストする要素を指定できる．
    - ul ul と書いたらul要素の中にあるul要素を指す．
4行目
- フォントはfont-familyプロパティで指定する．
- フォントファミリ名にスペースが含まれる場合は，その名前を引用符で囲む．
- 複数のフォントを指定すると，先に指定したフォントが利用できなければ，次のフォントを利用する．
- 総称ファミリ名を使用すると，ブラウザで設定された対応するフォントが使用される．
- 総称ファミリ名
  - sans-serif ゴシック体のようにヒゲのないフォント
  - serif 明朝体のように文字の上下にヒゲのあるフォント
  - monospace 固定幅フォント
  - fantasy 装飾系のフォント
  - cursive 筆記体系のフォント
5行目，12行目，21行目，27行目
- 文字の色はcolor属性で指定する．
- RGB値で色を指定するには，#のあとに16進数2ケタでR(赤)，G(緑)，B(青)の値を指定する．例えば，#556b2fはR(赤)が55，G(緑)がb2，B(青)が2fの色を表す．
- RGB1ケタずつで指定することのできる．その場合は，１桁目と２桁目が同じ数と解釈される．
- rgb()を用いて，RGBの各値を0～255の10進数で指定することもできる．
  - 例：rgb(255,0,0)など．
- 割合で指定することもできる．
  - 例：rgb(100%, 0%, 0%)など．
11行目．26行目
- 背景色はbackground-colorプロパティで指定する．
9,11,12行目，17行目，25,28行目
- マージンとパディング，センタリング，それぞれmargin，padding，text-alignの各プロパティで指定する．

演習2-2

演習2-1のスタイルシートに，更に次の変更を加えよ．

「HTMLとは，CSSとは，Javascriptとは」を非表示にせよ．
フッターの位置をabsoluteで指定し，常にウインドウの最下部に表示されるようにせよ．
QRコードを浮動体（float）とし，右寄せで表示せよ．その左右のマージンを10pxとせよ．

演習2-2 解答例

別ウィンドウで表示

演習2-2 ソース

HTMLファイル

追加のスタイルを別ファイル02-css2.cssで定義し，link要素でリンクする．

QRコードを浮動体表示したときの見た目を良くするために，画像を前に移動する．

CSSファイル

img {
float: right;
margin: 0 10px 0 10px;
}
ul ul {
display: none;
}
footer {
position: absolute;
width: 95%;
bottom: 10px;
}

演習 2-2 解説

1行目から4行目
- 浮動体として右寄せするには，float属性の値をrightとする．
- 左右のマージンを10pxとするために，margin属性の値を0 10px 0 10px としている（数値は上，右，下，左の順）．
6行目から8行目
- 要素を非表示にするにはdisplay属性の値にnoneを指定する．
- 「ul ul」でul要素の子孫のul要素を対象とすることを表す．
10行目から14行目
- フッターの位置を常に下から10pxの位置に配置するために，position属性の値をabsolute（絶対位置）とし，bottom属性の値でボトムからの距離を指定する．

演習2-3

演習2-2のスタイルシートに，更に次の変更を加えよ．

大見出しに影をつけよ．
小見出しの背景に色をつけ，ウィンドウ幅の50%の幅とせよ．また，角を丸くせよ．
outlineを使って，箇条書きを四角で囲め．

演習2-3 解答例

別ウィンドウで表示

演習2-3 ソース

HTML

演習2-2と同様に，追加のスタイルを別ファイル02-css3.cssで定義し，link要素でリンクする．

CSS

h1 {
text-shadow: 2px 5px 3px #c0ddc0;
}
h2 {
background-color: #c0ddc0;
padding: 5px 10px 0px 10px;
width: 50%;
border-radius: 5px;
}
ul {
outline: 1px solid green;
}

演習2-3 解説

2行目
- 影を付けるには，text-shadow属性を指定する．
- text-shadow: 2px 5px 3px #c0ddc0; は，右方向に2px，下方向に5pxずらし，5px分ぼかした，色#c0ddc0の影を付けます．
6行目：背景の色を指定するには，background-color属性を指定します．
8行目：幅を指定するには，width属性を指定する．
9行目：角を丸くするにはborder-radius属性を指定する．
12行目から14行目：境界線を表示するには，outline属性を指定する．