ホームページビルダーにおけるHTML とCSS (1)

by user

on 28 марта 2017

Category: Documents

>> Downloads: 2

views

Report

Comments

Description

Download ホームページビルダーにおけるHTML とCSS (1)

Transcript

ホームページビルダーにおけるHTML とCSS (1)

1/5
ホームページビルダーとＨＴＭＬ
ホームページビルダーにおけるＨＴＭL とＣＳＳ (1)
１．起動時
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.1.0 for Windows">
<title></title>
</head>
<body></body>
</html>
２．タイトルを入れる
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.1.0 for Windows">
<title>ホームページビルダーとＨＴＭL</title>
</head>
<body></body>
</html>
3. ページにタイトルを表示する
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.1.0 for Windows">
<title>ホームページビルダーとＨＴＭL</title>
</head>
<body>
ホームページビルダーとＨＴＭＬ
</body>
</html>
４．タグと タグ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.1.0 for Windows">
<title>ホームページビルダーとＨＴＭL</title>
</head>
<body>
ホームページビルダーとＨＴＭＬ 
 
~1~
2/5
ホームページビルダーとＨＴＭＬ
タグ＝「段落を作る」
 ＝改行
</body>
</html>
タグ（ ∼ ）
段落をつくる
終了のは省略してもよいとの定めがあるので、のみで使われることもある。
５．「ホームページビルダーとＨＴＭL」をタイトルとしてフォントサイズを大きくする
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.1.0 for Windows">
<title>ホームページビルダーとＨＴＭL</title>
</head>
<body>
ホームページビルダーとＨＴＭＬ 
 
タグ＝「段落を作る」
 ＝改行
</body>
</html>
６．「ホームページビルダーとＨTML」のフォントカラーを「青」にして「下線」をつける
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.1.0 for Windows">
<title>ホームページビルダーとＨＴＭL</title>
</head>
<body>
ホームページビルダーとＨＴＭＬ 
 
タグ＝「段落を作る」 

タグ ＝改行
</body>
</html>
この段階で「ブラウザー」で見てみる。
ブラウザーの「表示」→「文字サイズ」と入って「最大」と「中」を選択すると文字サイズが
変化するのがわかる。
~2~
3/5
ホームページビルダーとＨＴＭＬ
７．「ホームページビルダーとＨTML」に「ＣＳＳ」を設定する
「ページ編集」または「ページソース」で「ホームページ
ビルダーとＨTML」をクリックしてピンク色の枠で囲う
（範囲選択）。枠内で右クリック、表示されるメニュー
から「スタイルの設定」をクリック。スタイルの設定ダイ
アログで下図のように設定する。
ＨＴＭＬの記述は下記参照
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.1.0 for Windows">
<title>ホームページビルダーとＨＴＭL</title>
</head>
<body>
ホームページビルダーとＨＴＭＬ 
 
タグ＝「段落を作る」 

タグ ＝改行
</body>
</html>
（ブラウザーの文字サイズで「最大」∼「最少」のどれを選択しても文字サイズは変化しなくなっているのを確認）
~3~
4/5
ホームページビルダーとＨＴＭＬ
８．行間も含めて２つの文も「ＣＳＳ」設定する
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.1.0 for Windows">
<title>ホームページビルダーとＨＴＭL</title>
</head>
<body style='font-size : 11pt;font-family : "ＭＳＰゴシック";font-weight : normal;text-decoration : none;'>

ホームページビルダーとＨＴＭＬ 
 
タグ＝「段落を作る」 

タグ ＝改行
</body>
</html>
ブラウザーで「ＣＳＳ」が設定されたことを確認。
タイトル、文、行間が「ＣＳＳ」設定によって固定されて、表示メニューの「文字のサイズ」を如何様
に変更しても文字サイズ、行間が変化しないことがわかる。
~4~
5/5
ホームページビルダーとＨＴＭＬ
９．ホームページビルダーにおける「スタイルシート（ＣＳS）」
ＣＳＳ (Cascading Style Sheet) はＷ３Ｃ (World Wide Web Consortium) によって１９９６年に初めて提唱
されたホームページの書式を制御するための規格。
ＨＴＭＬを使ったホームページでは、見出しの大きさは＜Ｈ１＞∼＜Ｈ６＞までの６段階でしか制御できな
かったが、スタイルシートを使うと、ＨＴＭL タグ、任意に作成したクラスやＩＤなどの要素に対して自由な書
式でレイアウトを定着して、それをホームページ上で表現することができるようになる。
また行間、文字間隔、段落間隔、ページ上の位置、段組み、リストなどを自由に指定できるので、ＨＴＭＬ
による書式属性と比較すると、レイアウトの自由度は格段に上がる。サイト全体に統一感をもたせる場合
は、スタイルを定義したＣＳＳファイルを独立した外部ファイル（拡張子は css）として保存し、それぞれの
ＨＴＭＬファイルとリンクして適用することができる。
スタイルシートの書式
セレクタ｛プロパティ：値；｝
プロパティと値はセミコロン（；）で区切るといくつでも同時に指定することができる。
セレクタは、どの要素や属性に指定するかを決める「Ｈ１やＡ」といった要素クラス、ＩＤなど。
プロパティは「フォントサイズ(font-size)や色(color)」など書式の属性を指定する。
値はプロパティで指定した属性の値。通常はすべて小文字で指定する。
書式の実例
H1{font-size: 20pt;} ← Ｈ１タグに文字サイズを２０ｐｔ
.link {font-color: red;} ← link クラス属性の指定された要素の文字色を赤に。
#navi {width: 120px;} ← navi の ID 属性の指定された要素の幅を１２０ピクセルに。
セレクタプロパティ値
スタイルシートの指定方法
ＨＴＭＬ要素（タグ）
クラス
ＩＤ
ＨＴＭＬ要素のすべてに適用
クラス属性（<html 要素 class= クラス名 >）で指定されたコンテンツに指定される
ID 属性（<html 要素 id= ＩＤ名 >）で指定されたコンテンツに指定される
~5~