1/2

Size: px

Start display at page:

Download "1/2"

さゆりやたけ
5 years ago
Views:

1 札幌学院大学社会情報学部 AO 入試課題用テキスト (3) 1 札幌学院大学社会情報学部 AO 入試課題用テキスト HTML の基礎知識 (3) 1. スタイル指定フォントの大きさや種類行間ページ上のレイアウトなどを文書のスタイルと呼びこのスタイルを指定するためのデータをスタイルシートと呼ぶ以下では CSS(Cascading Style Sheets) と呼ばれるスタイルシート言語を使用する 1-1 文字の色指定見出しの文字の色を変えてみよう見出しの開始タグ中で色指定を行なう赤を指定したい場合には次のようにする 3 種類の見出しの文字を赤緑青にしてみよう CSS を使うためには下図の枠内に示した指定を行なう必要がある ( このプリントでは特に断りがない限りこの指定が行なわれているものとする ) 注意 : 上記の color と red の間にある記号はコロンである色が赤に等しいという意味で使われているコロンと似た記号にセミコロンがあるコロンは上の図に示すように丸い点が 2 個上下に並んでいるがセミコロンは下の点がカンマになっている拡大図 : コロン : セミコロン ; スタイル指定を複数行うときにセミコロンで区切るのでそのときに間違えないようにしよう

2 札幌学院大学社会情報学部 AO 入試課題用テキスト (3) 2 <title> フォントの色を変える </title> </head> <h1 style="color:red"> 赤 </h1> <h2 style="color:green"> 緑 </h2> <h3 style="color:blue"> 青 </h3> ブラウザの表示結果は以下の通りである次の部分は CSS を使うための指定である ****************************************************************** 1-2 文字のサイズ指定文字サイズを変更する場合も上記と同じ要領で開始タグ内で行なうプロパティを color から font-size に変更し段落の文字サイズを変更してみよう

3 札幌学院大学社会情報学部 AO 入試課題用テキスト (3) 3 <title> フォントのサイズを変える </title> </head> <h1 style="color:red"> 赤い見出し </h1> <p style="font-size:24pt"> フォントを 24 ポイントにした </p> <p style="font-size:12pt"> フォントを 12 ポイントにした </p> ブラウザの表示結果は以下の通りである ****************************************************************** 1-3 フォントの色と文字サイズを変えるフォントの色と文字サイズを同時に変更するには開始タグ内で前述の 2 種類の指定を組み合わせれば良いこのとき 2 つの指定の間をセミコロン ; で区切る <title> フォントのサイズを変える </title> </head> <h1 style="color:red"> 赤い見出し </h1> <p style="font-size:24pt;color:green"> フォントを緑の 24 ポイントにした </p>

4 札幌学院大学社会情報学部 AO 入試課題用テキスト (3) 4 <p style="font-size:12pt;color:blue"> フォントを青の 12 ポイントにした </p> コロンとセミコロンの位置に注意しようブラウザの表示結果は以下の通りである ****************************************************************** 1-4 色の指定方法 ( 詳細 ) 前述の例では色の名称によって色指定を行なった予め準備されている色の名称 ( 色のキーワードと呼ばれる ) は次の通りである black, green, gray, olive, maroon, navy, purple, teal, silver, lime, white, yellow, red, blue, fuchsia, aqua コンピュータの画面上で表現される色の種類は実際にはもっとたくさんあり True Color モードでは約 1670 万色が表現できる具体的には RGB それぞれの輝度が 0~255 までの数値で表現され 0 が最も暗く 255 が最も明るい場合である RGB それぞれの値が 0~255 の値を取るので RGB を組み合わせた場合には = 通りの色を表現することが可能となる以下の図は画像加工ソフトウェア Photoshop で色を指定するためのカラーピッカ - である図中で輝度の数

5 札幌学院大学社会情報学部 AO 入試課題用テキスト (3) 5 値表現と書かれた部分に着目しよう R:179 G:95 B:191 はRGBの輝度の値を示しているこの場合には RとBの割合が高くなっているさて B35FBF は何を意味するのだろうか? これは上記の RGB の輝度を 16 進数で表したものであるまず記号を 2 個ずつ区切って B3 5F BF とするここで 10 進数と 2 進数 16 進数との関係の復習をしておく 10 進数 2 進数 16 進数 A B C D E F

6 札幌学院大学社会情報学部 AO 入試課題用テキスト (3) 6 16 進数の 1 桁の数は 0 から F までの記号を用いて表現される 16 進数で 2 桁の数を 10 進数に置きかえるための計算はそれぞれの桁の数を 10 進数に置き換えて 2 桁目の数桁目の数である B3 5F BF のそれぞれをこの式にあてはめて計算してみよう B3 : = 179 5F : = 95 BF : = 191 この結果は最初に 10 進数で表したと一致していることがわかる R:179 G:95 B:191 これらの値を使って実際に色指定を行なってみよう最初が 10 進数次が 16 進数による指定である <title> フォントのサイズを変える </title> </head> <h1>rgb の輝度を直接指定する </h1> <p style="color:rgb(179,95,191)"> 輝度を 10 進数で指定 </p> <p style="color:#b35fbf"> 輝度を 16 進数で指定 </p> 表示結果は以下の通りであるいずれの指定方法を使っても同じ結果になっているはずである

7 札幌学院大学社会情報学部 AO 入試課題用テキスト (3) 7 ここで代表的な16 個の色の16 進数表現を掲載しておく色名 16 進表現色名 16 進表現 black green silver C0C0C0 lime 00FF00 gray olive white FFFFFF yellow FFFF00 maroon navy red FF0000 blue 0000FF purple teal fuchsia FF00FF aqua 00FFFF 注 ) 光の 3 原色の説明に基づけば green の 16 進表現は 00FF00 であるはずだが HTML の定義では lime を 00FF00 とし相対的に暗い緑に見えるを green と呼んでいる ****************************************************************** 1-5 余白と段落幅を指定段落を見やすくするために開始位置と表示幅を指定することができるブラウザ画面左側からの余白はで指定し表示幅は marigin-left: ピクセル数 width: ピクセル数で指定するピクセルとは画面上の表示の最小単位である画素とも呼ばれる以下の例では左の余白を 50 ピクセル段落幅を 400 ピクセルとしている <title> 余白と段落幅指定 </title> </head> <h3> 余白 ( マージン ) と段落幅を指定する </h3> <p style="margin-left:50px;width:400px">cg( コンピュータグラフィックス ) のモデリングや作図方法などに関する基礎知識 CG 制作やホームページ作りの基礎を学びコンピュータ上で作品を作ることを経験します </p>

8 札幌学院大学社会情報学部 AO 入試課題用テキスト (3) 8 表示結果は以下の通りである margin-left,width が示す部分を確かめよう ****************************************************************** 1-6 段落に色をつける上記の段落に色をつけてみよう開始タグに background-color( 背景色 ) プロパティを追加する色の指定方法は文字の場合と同じであるここでは 16 進数で EFAFEF を指定し全体的に明るい色にしている <title> 色指定 </title> </head> <h3> 段落に色を指定する </h3> <p style="margin-left:50px;width:400px;background-color:#efafef">cg( コンピュータグラフィックス ) のモデリングや作図方法などに関する基礎知識 CG 制作やホームページ作りの基礎を学びコンピュータ上で作品を作ることを経験します </p> ブラウザの表示結果は以下の通りである

9 札幌学院大学社会情報学部 AO 入試課題用テキスト (3) 9 今度は段落を 2 つにして異なる背景色を与えてみよう色の指定を 16 進数と 10 進数の 2 通りにしている <title> 色指定 </title> </head> <h3> 段落に色を指定する </h3> <p style="margin-left:50px;width:400px;background-color:#efafef">cg( コンピュータグラフィックス ) のモデリングや作図方法などに関する基礎知識 CG 制作やホームページ作りの基礎を学びコンピュータ上で作品を作ることを経験します </p> <p style="margin-left:70px;width:300px;background-color:rgb(200,200,150)"> 学んだ基礎知識を応用しその成果を公表するまでの ( 試行錯誤を含む ) 一連の過程を経験しますゼミナールで学んだことの集大成です </p> ****************************************************************** 1-7 ページ背景色の設定ページの背景色を設定するには body の開始タグ内で以下のような指定を行なえば良い <title> 背景色指定 </title> </head>

札幌学院大学社会情報学部 AO 入試課題用テキスト (3) 10 <body style="background-color:#00e0e0"> <h3> 段落に色を指定する </h3> <p style="margin-left:50px;width:400px;background-color:#efafef">cg( コンピュータグラフィックス )

10 札幌学院大学社会情報学部 AO 入試課題用テキスト (3) 10 <body style="background-color:#00e0e0"> <h3> 段落に色を指定する </h3> <p style="margin-left:50px;width:400px;background-color:#efafef">cg( コンピュータグラフィックス ) のモデリングや作図方法などに関する基礎知識 CG 制作やホームページ作りの基礎を学びコンピュータ上で作品を作ることを経験します </p> <p style="margin-left:70px;width:300px;background-color:rgb(200,200,150)"> 学んだ基礎知識を応用しその成果を公表するまでの ( 試行錯誤を含む ) 一連の過程を経験しますゼミナールで学んだことの集大成です </p> ************************************************************** 1-8 行間隔文字間隔の指定行間隔 : 行間隔は line-height プロパティによって設定する font-size プロパティとの関係を以下の図で確かめよう <title> 行間隔 </title> </head> <h3> 行間隔を指定する </h3> <p style="width:300px;font-size:12pt;line-height:36pt">cg( コンピュータグラフィックス ) のモデリングや作図方法などに関する基礎知識 CG 制作やホームページ作りの基礎を学びコンピュータ上で作品を作ることを経験します </p>

札幌学院大学社会情報学部 AO 入試課題用テキスト (3) 11 line-height プロパティの値を font-size プロパティの値よりも小さくすると下図のように文字が重なってしまうことは容易に推測がつくだろう <title> 行間隔 </title> </head> <h3> 行間隔を指定する </h3> <p

11 札幌学院大学社会情報学部 AO 入試課題用テキスト (3) 11 line-height プロパティの値を font-size プロパティの値よりも小さくすると下図のように文字が重なってしまうことは容易に推測がつくだろう <title> 行間隔 </title> </head> <h3> 行間隔を指定する </h3> <p style="width:300px;font-size:12pt;line-height:10pt">cg( コンピュータグラフィックス ) のモデリングや作図方法などに関する基礎知識 CG 制作やホームページ作りの基礎を学びコンピュータ上で作品を作ることを経験します </p> 文字間隔 : 文字間隔は letter-spacing プロパティによって設定する

12 札幌学院大学社会情報学部 AO 入試課題用テキスト (3) 12 <title> 文字間隔間隔 </title> </head> <h3> 文字間隔を指定する </h3> <p style="width:300px;font-size:12pt;line-height:16pt;letter-spacing:12pt">cg( コンピュータグラフィックス ) のモデリングや作図方法などに関する基礎知識 CG 制作やホームページ作りの基礎を学びコンピュータ上で作品を作ることを経験します </p> ************************************************ 練習問題 3: 練習問題 1 で作った説明文に色をつけてみよう

1/2

1/2 札幌学院大学社会情報学部 AO 入試課題用テキスト (4) 1 札幌学院大学社会情報学部 AO 入試課題用テキスト HTML の基礎知識 (4) 1 スタイル指定 1-1 段落を罫線 ( ボーダー ) で囲む前回はスタイル指定を行なって段落に色をつけた今度は罫線で囲んで見ようこれまでと同様に開始タグの中に罫線の指定を行なえばよい HTML 文書は次の通りである下線部が罫線を引くためのスタイル指定である