1

Size: px

Start display at page:

Download "1"

ひでよりかくはり
5 years ago
Views:

1 6. スタイルシートとは 6.1. デザインはスタイルシートで 1 学期はホームページを作成するための HTML の基礎とコンテンツのパーツである画像を加工作成する基本的な技術を学びました次のステップとしてホームページに多くの色を統一的に付けたりレイアウト配置を細かく設定するための方法を学んでいきます HTML でも色やサイズを指定したりする方法を学びましたがホームページの保守性などの面から最近のホームページでは構造の記述とスタイルを明確に ( ファイルを ) 分けて管理するようになっていますそのスタイルを定義するのがスタイルシート (CSS: Cascading Style Sheets) ですスタイルシートの定義の方法 CSS ではプロパティといわれる指定する対象を示すものに具体的な値を指定することによっておこなわれますその間はコロン : で区切られます一般書式プロパティ : 値 2 具体例 background-color:gold プロパティ : 背景色を値 : 金色にする 1

2 6.14. スタイルの定義場所 1 style の属性として指定する 2 head タグ内に記述 1 3 拡張子.css のファイルを作成しその中に記述する css ファイル呼び出し側の html ファイル 2 2

3 表示画面 1 ここがビミョーに変わります 3

4 6.14. 複数のスタイルを定義するプロパティ : 値をセミコロン ; で区切る文字の背景色と文字色を指定する 1 2 表示画面

5 6.14. クラスセレクタを使用する一般書式. クラス名 { プロパティ : 値 } 具体例.gold{background-color:gold}

6 表示画面 1 6

7 6.14. 要素をグループ化する一般書式 <div> </div> 7

8 表示画面 1 8

9 6.7. 高さ幅の指定 1 グループ化された要素の大きさを指定します大きさを指定するときには高さと幅を指定します指定する単位にはミリメートル, ポイントをはじめいくつか種類がありますここではピクセルを使って大きさを指定します class 名 : rect( 任意に指定可能 ) 指定内容 : width:400px; グループ化された要素の幅 height:300px; グループ化された要素の高さ color:yellow; 文字色 background-image:url(img/uz_p040.jpg); グループ化された要素の背景画像 img フォルダ内の uz_p040.jpg 画像 9

10 表示画面 1 rect という名前の class が幅 400 高さ 300 ピクセルで指定その背景に img フォルダ内の uz_p040.jpg 画像が表示 img ファイルの大きさはピクセル Class の表示領域の大きさに合わせたもの最前面に文字が黄色で表示

11 6.8. テキストの左右位置の指定テキストの左右位置を設定することができます HTML では align= center のように属性で指定していましたが CSS で指定することが主流となってきています class 名 : center( 任意に指定可能 ) 指定内容 : text-align:center; 文字位置を中央揃え表示画面 1 11

12 6.9. ブロックレベル要素の中央揃え要素のグループの幅を設定したり位置を指定することができます指定タグ : h1( 任意にタグ指定可能 ) 指定内容 : width:0%; 幅をブラウザ幅の 0% に指定 text-align:center; 文字位置をブラウザの中央に指定 margin-left:auto; グループの空左側の空きを自動調整 margin-right:auto; グループの空右側の空きを自動調整 1 表示画面 12

13 6.. 縦方向の位置揃えブロックを縦方向に揃える指定をすることができます Vertical-align プロパティを使います一般書式 vertical-align: 位置 1 値 baseline( 初期値 ) bottom middle top sub text-bottom text-top 意味親要素のフォントのベースライン下に配置中央に配置上に配置下付き文字の位置下端を親要素のテキストの下端に合わせる上端を親要素のテキストの上端に合わせる vertical 垂直 (= 縦 ) horizon 水平 (= 横 ) いろんなところででてくる言葉ですので覚えましょう! 2 13

14 表示画面文字の上端ライン 1 文字の下端ライン 2 縦方向の位置揃えと表示される文字がベースになりますこの文字の上端のラインに合わせたものが Vertical-align の text-top です同様に下端のラインに合わせたものが Vertical-align の text-top です 30 14

15 6.11. 位置の指定要素のグループを自由な位置に配置することができます position プロパティで absolute relative を指定します一般書式 position:absolute/relative; top/bottom/right/left: 位置 ; 1 値 static( 初期値 ) relative absolute fixd 意味通常の配置相対位置指定絶対位置指定絶対位置スクロール時も固定 1

16 このスタイルシート指定の中の position:absolute; top:30px; left:0px; の部分が位置指定の部分になります表示画面

17 6.12. 重ね合わせの順番指定重ね合わせた要素グループの位置関係を指定します一般書式 z-index: 整数 ( 順序を示す数値 ) 1 17

18 表示画面 1 2 c l ass aaa,bbb,ccc で指定されている画像の位置関係にも注目してください一番左の画像を基準として見るとピクセル数の関連等がわかりやすいですそれぞれの位置を変えてみましょう 18

19 6.13. 回り込みの設定画像の横に文字を記述することができます逆に言うと指定しない限り画像を張り付けた行の横に文字を記入することはできません一般書式 float: 位置 1 値 left right none( 初期値 ) 意味画像を左に配置し続く文字などが右に回り込む画像を右に配置し続く文字などが左に回り込む回り込みなし 19

20 一般書式 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

21 練習問題 -1 下の図のようなホームページをブロックの要素を使って作成してみましょう上のブロック幅 :800 ピクセル高さ :0 ピクセル背景色 LightGrey 絶対位置指定上 :0 ピクセル左 :0 ピクセル左のブロック幅 :0 ピクセル高さ :00 ピクセル背景色 Violet 絶対位置指定上 :0 ピクセル左 :0 ピクセル右のブロック幅 :600 ピクセル高さ :00 ピクセル背景色 LemonChiffon 絶対位置指定上 :0 ピクセル左 :300 ピクセル

22 練習問題 -2 前問で作成したブロック具体的にコンテンツを埋め込んでみましょうに 22

23 練習問題 -1: サンプルコーディング <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" <head> <title> 練習 -ブロックの配置 </title> <style type="text/css">  </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

24 練習問題 -2: サンプルコーディング <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" <head> <title> 練習 -ブロックにコンテンツを埋める </title> <style type="text/css">  </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

25 6.14. 背景画像の固定表示背景の画像を固定して本文 (<body>~</body> の部分 ) だけをスクロールさせることができます style の中で background-position background-repeat background-attachment を指定することで背景の固定表示ができますこの後にページをまたがるような長い文書が入ります 1 表示例

26 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 段小さく

27 表示例 1 表示例

28 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

29 課題制作指定されたグループでメンバーが協力してホームページを作成するテーマ : 安田学園の名物 ( 名所 ) 成果物 :1 ページの中に3つ以上のブロックを準備するそれぞれのブロックの内容ブロック1 タイトルロゴなどを作成 Gimp,Wordart など今までに習ったものを使って作成ブロック2 作成メンバーのリスト出席番号氏名担当作業ブロック3 テーマに沿ったメインコンテンツブロックの配置等各グループで検討して決定背景色写真等はグループで話し合って決定すること作業分担作業分担に偏りが出ないように作業を分担して実施すること作業スケジュール今週何を作るかコンテンツ内容を決定作業分担を決定大まかなブロック配置等を決定来週までコンテンツに載せるターゲットを取材写真撮影等を実施来週取材結果をもとにコンテンツを制作 29

30 ブロックのレイアウトパターンいろいろなパターンが考えられますアイデアを出して下さいタイトルタイトル 30

スタイルシートでデザインを整えよう

スタイルシートでデザインを整えようスタイルシートでデザイン (2) CSS (Cascading Style Sheets) ここまで HTML は文章の意味的な役割を記述するもので表示はブラウザ次第であることを強調してきましたあるブラウザでの表示方法を前提に HTML で見た目を制御しようとすると他の環境では意味が通じにくい相互運用性の低い情報となってしまいます Web の表現を作者が指定するには HTML ではなくスタイルシートという別の機能をもちいます