6. スタイルシートとは 6.1. デザインはスタイルシートで 1 学期は ホームページを作成するための HTML の基礎と コンテンツのパーツである画像を加工 作成する基本的な技術を学びました 次のステップとして ホームページに多くの色を統一的に付けたり レイアウト配置を細かく設定するための方法を学んでいきます HTML でも色やサイズを指定したりする方法を学びましたが ホームページの保守性などの面から 最近のホームページでは 構造の記述とスタイルを明確に ( ファイルを ) 分けて管理するようになっています そのスタイルを定義するのがスタイルシート (CSS: Cascading Style Sheets) です 1 6.2. スタイルシートの定義の方法 CSS では プロパティ といわれる 指定する対象を示すものに 具体的な 値 を指定することによっておこなわれます その間はコロン : で区切られます 一般書式 プロパティ : 値 2 具体例 background-color:gold プロパティ : 背景色を 値 : 金色にする 1
6.14. スタイルの定義場所 1 style の属性として指定する 2 head タグ内に記述 1 3 拡張子.css のファイルを作成し その中に記述する css ファイル 呼び出し側の html ファイル 2 2
表示画面 1 ここがビミョーに変わります 3
6.14. 複数のスタイルを定義する プロパティ : 値 をセミコロン ; で区切る 文字の背景色と文字色を指定する 1 2 表示画面 30 3 4
6.14. クラスセレクタを使用する 一般書式. クラス名 { プロパティ : 値 } 具体例.gold{background-color:gold}
表示画面 1 6
6.14. 要素をグループ化する 一般書式 <div> </div> 7
表示画面 1 8
6.7. 高さ 幅の指定 1 グループ化された要素の大きさを指定します 大きさを指定するときには 高さ と 幅 を指定します 指定する単位には ミリメートル, ポイント をはじめいくつか種類があります ここでは ピクセル を使って大きさを指定します class 名 : rect( 任意に指定可能 ) 指定内容 : width:400px; グループ化された要素の幅 height:300px; グループ化された要素の高さ color:yellow; 文字色 background-image:url(img/uz_p040.jpg); グループ化された要素の背景画像 img フォルダ内の uz_p040.jpg 画像 9
表示画面 1 rect という名前の class が幅 400 高さ 300 ピクセルで指定 その背景に img フォルダ内の uz_p040.jpg 画像が表示 img ファイルの大きさは 400 300 ピクセル Class の表示領域の大きさに合わせたもの 最前面に文字が黄色で表示
6.8. テキストの左右位置の指定 テキストの左右位置を設定することができます HTML では align= center のように属性で指定していましたが CSS で指定することが主流となってきています class 名 : center( 任意に指定可能 ) 指定内容 : text-align:center; 文字位置を中央揃え 表示画面 1 11
6.9. ブロックレベル要素の中央揃え 要素のグループの幅を設定したり 位置を指定することができます 指定タグ : h1( 任意にタグ指定可能 ) 指定内容 : width:0%; 幅をブラウザ幅の 0% に指定 text-align:center; 文字位置をブラウザの中央に指定 margin-left:auto; グループの空左側の空きを自動調整 margin-right:auto; グループの空右側の空きを自動調整 1 表示画面 12
6.. 縦方向の位置揃え ブロックを 縦方向 に揃える指定をすることができます Vertical-align プロパティを使います 一般書式 vertical-align: 位置 1 値 baseline( 初期値 ) bottom middle top sub text-bottom text-top 意味親要素のフォントのベースライン下に配置中央に配置上に配置下付き文字の位置下端を親要素のテキストの下端に合わせる上端を親要素のテキストの上端に合わせる vertical 垂直 (= 縦 ) horizon 水平 (= 横 ) いろんなところででてくる言葉ですので覚えましょう! 2 13
表示画面 文字の上端ライン 1 文字の下端ライン 2 縦方向の位置揃え と表示される文字がベースになります この文字の 上端のラインに合わせたものが Vertical-align の text-top です 同様に 下端のラインに合わせたものが Vertical-align の text-top です 30 14
6.11. 位置の指定 要素のグループを自由な位置に配置することができます position プロパティで absolute relative を指定します 一般書式 position:absolute/relative; top/bottom/right/left: 位置 ; 1 値 static( 初期値 ) relative absolute fixd 意味通常の配置相対位置指定絶対位置指定絶対位置 スクロール時も固定 1
このスタイルシート指定の中の position:absolute; top:30px; left:0px; の部分が位置指定の部分になります 表示画面 1 2 16
6.12. 重ね合わせの順番指定 重ね合わせた要素グループの位置関係を指定します 一般書式 z-index: 整数 ( 順序を示す数値 ) 1 17
表示画面 1 2 c l ass aaa,bbb,ccc で指定されている画像の位置関係にも注目してください 一番左の画像を基準として見ると ピクセル数の関連等がわかりやすいです それぞれの位置を変えてみましょう 18
6.13. 回り込みの設定 画像の横に文字を記述することができます 逆に言うと指定しない限り 画像を張り付けた行の横に 文字を記入することはできません 一般書式 float: 位置 1 値 left right none( 初期値 ) 意味画像を左に配置し続く文字などが右に回り込む画像を右に配置し続く文字などが左に回り込む回り込みなし 19
一般書式 clear: 解除方法 値 left right Both none( 初期値 ) 意味 float:left の解除 float:right の解除 float:left, float:right の解除解除しない 1 表示画面
練習問題 -1 下の図のようなホームページを ブロックの要素を使って作成してみましょう 1 2 30 3 上のブロック幅 :800 ピクセル高さ :0 ピクセル背景色 LightGrey 絶対位置指定上 :0 ピクセル左 :0 ピクセル 左のブロック幅 :0 ピクセル高さ :00 ピクセル背景色 Violet 絶対位置指定上 :0 ピクセル左 :0 ピクセル 右のブロック幅 :600 ピクセル高さ :00 ピクセル背景色 LemonChiffon 絶対位置指定上 :0 ピクセル左 :300 ピクセル 40 4 21
練習問題 -2 前問で作成したブロック具体的にコンテンツを埋め込んでみましょう 1 2 30 に 22
練習問題 -1: サンプルコーディング 1 2 30 3 40 4 <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> 練習 -ブロックの配置 </title> <style type="text/css"> <!--.aaa { position:absolute; top:00px;left:0px;width:800px;height:0px; background-color:lightgrey; z-index:3}.bbb { position:absolute; top:0px;left:0px;width:0px;height:00px; background-color:violet; z-index:2}.ccc { position:absolute; top:0px;left:300px;width:600px;height:00px; background-color:lemonchiffon; z-index:1} --> </style> </head> <body> <div class="aaa"> 背景色 LightGrey<br /> 幅 :800 ピクセル高さ :0 ピクセル <br /> 絶対位置指定上 :0 ピクセル左 :0 ピクセル </div> <div class="bbb"> 背景色 Violet<br /> 幅 :0 ピクセル高さ :00 ピクセル <br /> 絶対位置指定上 :0 ピクセル左 :0 ピクセル </div> <div class="ccc"> 背景色 LemonChiffon<br /> 幅 :600 ピクセル高さ :00 ピクセル <br /> 絶対位置指定上 :0 ピクセル左 :300 ピクセル </div> </body> </html> 23
練習問題 -2: サンプルコーディング 1 2 30 3 40 4 <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> 練習 -ブロックにコンテンツを埋める </title> <style type="text/css"> <!--.aaa {position:absolute; top:00px;left:0px;width:800px;height:0px; background-color:lightgrey; z-index:3}.bbb {position:absolute; top:0px;left:0px;width:0px;height:00px; background-color:violet; z-index:2}.ccc {position:absolute; top:0px;left:300px;width:600px;height:00px; background-color:lemonchiffon; z-index:1;}.left {float:left;} --> </style> </head> <body> <div class="aaa"> <h1 align="center"> 恩賜上野動物園 </h1></div> <div class="bbb"> ライオン <br /> ゴリラ <br /> あひる <br /> つる <br /> </div> <div class="ccc"> <img class="left" src="img/uz_p040.jpg" alt=" つる " /> <p> つるは一本足で立っているイメージがありますが 冷たい湖などでない普通の場所では 2 本足で立っています <br /> その方が安定感が良いみたいです </p> </div> </body> </html> 24
6.14. 背景画像の固定表示 背景の画像を固定して 本文 (<body>~</body> の部分 ) だけをスクロールさせることができます style の中で background-position background-repeat background-attachment を指定することで背景の固定表示ができます この後に ページをまたがるような長い文書が入ります 1 表示例 2 30 2
6.1 フォントサイズを指定する 一般書式 font-size: サイズ 1 単位 in cm mm pt px 意味インチセンチメートルミリメートルポイントピクセル 単位 ss-small x-small small medium large x-lage xx-lage lager smaller 意味最小小やや小普通やや大大最大親要素のフォントより 1 段大きく親要素のフォントより 1 段小さく 2 30 3 26
表示例 1 表示例 2 30 3 27
6.16 フォントの種類の指定 一般書式 font-family: フォント名, フォント名 1 一般名称 serif san-serif cursive fantasy monospace フォント例 MS 明朝, リュウミン Light-KL, 太ミン A1 Helvetica, 新ゴ,MS ゴシック Adobe Poetica Critter,Cottonwood Osaka- 等幅,Courier 2 30 表示例 3 40 文字の飾り付け 指定方法 文字を斜体にする font-style:italic 太字にする font-weight:bold 強調する <em>~</em> <strong>~</strong> 行間を指定する Line-height: 行間 (%) 4 28
課題制作 -1 1 2 30 指定されたグループで メンバーが協力してホームページを作成する テーマ : 安田学園の名物 ( 名所 ) 成果物 :1 ページの中に3つ以上のブロックを準備するそれぞれのブロックの内容 ブロック1 タイトルロゴなどを作成 Gimp,Wordart など今までに習ったものを使って作成 ブロック2 作成メンバーのリスト出席番号 氏名 担当作業 ブロック3 テーマに沿ったメインコンテンツブロックの配置等各グループで検討して決定背景色 写真等はグループで話し合って決定すること 作業分担作業分担に偏りが出ないように作業を分担して実施すること 作業スケジュール今週 何を作るか コンテンツ内容を決定作業分担を決定大まかな ブロック配置等を決定来週までコンテンツに載せるターゲットを取材写真撮影等を実施来週取材結果をもとにコンテンツを制作 29
ブロックのレイアウトパターン いろいろなパターンが考えられますアイデアを出して下さい タイトル タイトル 30