Lesson を始める前に どんなプログラマーもこれを実践しました 超簡単に Web ページを作成 この解説書は Lesson が高レベルになっても参照用として利用して下さい この章の実践方法はまず解説ページ内にある HTML ソースコードをコピーして メモ帳などに貼り付けて 実行して 表示してそのあとで表示内容を解説します 最初は全然理解できない方でも 同じ HTML コードを繰り返し 繰り返 し実践する事で HTML というものが理解できるようになります
内容 HTML ファイルの作成と Web ブラウザーで表示... 2 テキストエディタを起動!... 2 ファイルを保存!... 3 ブラウザで開く!... 4 スタイルシートの原形を作成してみましょう... 10 スタイルシートの記述方法を理解する... 14 スタイルシートにもコメントタグがある... 16 スタイルシートを HTML 文書に適用させる 3 つの方法... 17 埋め込み式... 17 インライン方式... 18 外部リンク... 19 Skyocean Lesson のサイト 1
HTML ファイルの作成と Web ブラウザーで表示 手を動かして作業してみましょう まず メモ帳などのエディターで HTML コードを記入して Web ページとして表示する体験をしましょう テキストエディタを起動! 御利用の環境で利用できるテキスト エディタを起動してください Windows の場合は スタート メニューから Windows アクセサリ と開くと メモ帳 (notepad) があります メモ帳を選択して 起動してください 下記のソースコードをコピー FirstTrial <?xml version="1.0" encoding="shift_jis" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=shift-jis" /> <title> はじめての XHTML 1.0</title> </head> Skyocean Lesson のサイト 2
<body bgcolor="black"> <p style="color:#ffffff"> こんにちは XHTML 1.0!</p> <p style="color:#ffffff"><strong> 文字を強調しています </strong></p> <ol style="color:#ffffff"> <li> リスト行 1</li> <li> リスト行 2</li> <ol> </body> </html> 上記のコード <body bgcolor="black"> は ページ全体の背景色を黒にしています style="color:#ffffff" というコードは 白色の文字にするよう指定しています ファイルを保存! 上記のコードをメモ帳に貼り付けて メモ帳の ファイル メニューから 名前を付けて保存 を選択します 下図のように 設定して 保存します ファイル名 を first(1).html にして ファイルの種類 を すべてのファイル (* *) にします Skyocean Lesson のサイト 3
ブラウザで開く! 先程保存したファイル ( ドキュメントフォルダにあると思います ) をダブルクリックします 下図 自動で 次図のように Web ページとして表示されます <title> はじめての XHTML 1.0!</title> </head> <p style="color:#ffffff"><strong> 文字を強調して います </strong></p> <ol style="color:#ffffff"> <li> リスト行 1</li> <li> リスト行 2</li> <ol> 尚 Web ページを表示している Web ブラウザーは 普通に実行中のパソコンの中のインターネットを閲覧している Innterntet Explore が自動で立ち上がります Skyocean Lesson のサイト 4
つぎは 下図のような結果を表示する HTML コードを実践します 上図を表示する下記のコードをメモ帳に入力または コピーして SecondTrial.html という名前で保存して Web で表示してください SecondTrial <?xml version="1.0" encoding="shift_jis" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-type" content="text/html; charset=shift-jis" /> Skyocean Lesson のサイト 5
<meta http-equiv="content-style-type"content="text/css"> <title> はじめての XHTML 1.0</title> </head> <body bgcolor="black"> <p style="color:#ffffff"> こんにちは XHTML 1.0!</p> <p style="color:#ffffff"><strong> 文字を強調しています </strong></p> <h1 style="color:#ffffff">h1 の文字です </h1> <ol style="color:#ffffff"> <li> リスト行 1</li> <li> リスト行 2</li> <ol> </body> </html> 上記のコードのタグに対して style= color:#ffffff というコードで 白色を指定しています HTML コードではこのようにタグ毎に同じコードで指定しなければならず 冗長になってしまい 見た目も悪くコードも読みにくいです このような非合理的なことを解消するために スタイルシートという 文字サイズやカラー ページのレイアウトなど 文書の見た目を指定する方法がとられるようになりました 後の項でその基礎の基礎を体験します Skyocean Lesson のサイト 6
イメージの表示方法 Web ページといえば イメージ ( 画像 ) の表示は欠かせません 簡単に表示できます まず イメージ ( 画像 ) のファイル ( 例えば Windows の場合ピクチャというフォルダ内にある拡張子が jpg とか png 等の 画像ファイル ) を先程の html ファイルを保存した Document フォルダにコピペします 下図は私の ドキュメントフォルダ内に compute_ 休憩.jpg という画像ファイルを選択した画面です その cmpute_ 休憩.jpg というイメージ ( 画像 ) を Web ページ上に表示して見ましょう Skyocean Lesson のサイト 7
先程の SecondTrial.html のコードをメモ帳で開き 下記のように追加します 赤色の行を追加します. 途中省略 </head> <body bgcolor="black"> <p style="color:#ffffff"> こんにちは XHTML 1.0!</p> <p style="color:#ffffff"><strong> 文字を強調しています </strong></p> <h1 style="color:#ffffff">h1 の文字です </h1> <Image src="compute_ 休憩.jpg"> <ol style="color:#ffffff"> <li> リスト行 1</li> <li> リスト行 2</li> <ol> </body> </html> メモ帳のメニュー ファイル -> 上書き保存 して ドキュメントフォルダ内の SecondTrial.html というファイルをダブルクリックします 下図のように Web ページ内に画像が表示されます Skyocean Lesson のサイト 8
尚 画像の位置 大きさ等はもちろん html コードによって制御することが出来ます 次項で基本的な方法を説明しています Skyocean Lesson のサイト 9
文字サイズやカラー ページのレイアウトなど 文書の見た目を指定する方法を定義する まずは スタイルシートの原形を作成してみましょう サンプル 1 まずは下記のコードを Web ページとして表示してください StyleSheetTrial <?xml version="1.0" encoding="shift_jis" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <style type="text/css"> P{color:#FFFFFF;} h1{color:#ffffff;fontsize:250%;} ol{color:#ffffff;} </style> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-type" content="text/html; charset=shift-jis" /> <meta http-equiv="content-style-type"content="text/css"> <title> はじめての XHTML 1.0</title> </head> <body bgcolor="black"> <p> こんにちは XHTML 1.0!</p> Skyocean Lesson のサイト 10
<p><strong> 文字を強調しています </strong></p> <h1>h1 の文字です </h1> <ol> <li> リスト行 1</li> <li> リスト行 2</li> <ol> </body> </html> 実行画面は 下図のようになります Skyocean Lesson のサイト 11
スタイルシートの原形は 下記の赤いコード部分です <head> <style type="text/css"> P{color:#FFFFFF;} h1{color:#ffffff;fontsize:250%;} </style>.. </head> <body bgcolor="black"> <p > こんにちは XHTML 1.0!</p> <p><strong> 文字を強調しています </strong></p> <h1>h1 の文字です </h1> <ol > <li> リスト行 1</li> <li> リスト行 2</li> <ol> </body> </html> スタイルシートを定義しただけでこんなに HTML コードがすっきりしました Skyocean Lesson のサイト 12
サンプル 2 スタイルシートの原型を SecondTriala.html コード内に下記のように style タグ を追加します 赤色コード部分そして Image タグ 内に img というスタイルを適用します 省略 <head> <style type="text/css"> img{width: 150px; height: 100px;} </style> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-type" content="text/html; charset=shift-jis" /> <meta http-equiv="content-style-type"content="text/css"> <title> はじめての XHTML 1.0</title> </head> <body bgcolor="black"> <p style="color:#ffffff"> こんにちは XHTML 1.0!</p> <p style="color:#ffffff"><strong> 文字を強調しています </strong></p> <h1 style="color:#ffffff">h1 の文字です </h1> <Image class="img" src="compute_ 休憩.jpg">.. 省略 </body> </html> 上記の class= img の class の表記については 本格的なスタイルシート作成において 説明いたします 上記コード追加後 SecondTrial.html を上書き保存して 再度実行して スタイル適用後の写真を参照して下さい Skyocean Lesson のサイト 13
次にスタイルシートの基本を簡単に説明しておきます スタイルシートの記述方法を理解するスタイルシートでは セレクタ と呼ばれるスタイルを適用する対象に スタイルの種類を表す プロパティ を指定し その 値 を記述することで定義します 実際には セレクタ { プロパティ : 値 ;} という形で指定をします 記述例 P{color:#FFFFFF;} セレクタ プロパティ値 つまり セレクタの範囲をかぎ括弧 ({ }) で プロパティと値の対応をコロン (:) で プロパティの指定の終了をセミコロン (;) で記述します セレクタにはいくつかの種類がありますが ここではスタイルシートを適用させたい HTML の要素だと考えてください 1 つのセレクタに対して複数のプロパティを適用させることもできます 適用させるには ; の後に続けて プロパティ : 値 ; を指定します 記述例 h1{color:#ffffff; fontsize:250%;} また 要素やプロパティ 値などの間以外なら 半角スペースや改行 タブは自由に挿入することができます 一般的に これらを使ってスタイルシートのファイルを見やすいように記述します Skyocean Lesson のサイト 14
Skyocean Lesson のサイト 15
スタイルシートにもコメントタグがある スタイルシートにもコメントタグがあります /* と [*/ の間に記述します HTML のコメントタグ同様 ブラウザはコメントとして解釈します 何に対するスタイル指定なのか メモとしてこまめに挿入しておくことをオススメします また 一時的にスタイル設定を無効にする場合などに便利です 本書で用意したスタイルシートファイルにも スタイルの分類分けをする際の仕切りとしてコメントタグを使用しています コメント記述例 body{ /*color: red;*/ font-si ze: 13px; /* 本文の文字サイズ */ Line-height: 21 px; /* 本文の行間 */ } Skyocean Lesson のサイト 16
スタイルシートを HTML 文書に適用させる 3 つの方法スタイルシートを HTML ファイルに適用するには 次に 3 つの方法があります Skyocean の Lesson では主に外部リンクを使ってスタイルシートを学んでいきます 埋め込み式 head 要素内に <style> タグを記述し その中にスタノ ' ルシートを記述する方法です <style> タグには text/css を属性値とした type 属性を指定します これは この style 要素にスタイルシートが記述されていることを示します 埋め込み式によるスタイルシートの記述例 <head> <style type="text/css"> P{color:#FFFFFF;} h1{color:#ffffff;fontsize:250%;} </style>.. </head> 参考 :CSS とは Cascading Style Sheets といってウエッブページの出力の形式などを規格に沿って 定義したファイル 基本的にはこれだけで十分です 埋め込み方式は そのページ独自のスタイルを指定したいときに利用されます Skyocean Lesson のサイト 17
インライン方式 body 要素の中にある個別のタグに対して 直接スタイルシートを適応させる方法です 記述例 <body bgcolor="black"> 上記のように bgcolor= black というように タグに直接記述するため セレクタとその開始と終わりを示すかぎ括弧 ({ }) は記述しません その代わりにスタイルを指定したいタグに style 属性を指定し その属性値としてプロパティとその値を記述します また当該ページの HTML 文書の中にスタイルシートが記述されていることをブラウザに知らせるため head 要素の中に属性をもった <meta> タグを記述します 記述例赤色の部分が上記説明部分です <head> <meta http-equiv="content-script-type" content="text/css"> <title> はじめての XHTML 1.0</title> </head> <body bgcolor="black"> <p> こんにちは XHTML 1.0!</p> Skyocean Lesson のサイト 18
外部リンク HTML ファイルとは別にスタイルシートのファイルを用意し HTML ファイルからスタイルシートのファイルにリンクする方法です head 要素内に <link> タグを記述して スタイルシートファイルを読み込み HTML ファイル全体に適応させます スタイルシートの指定には link 要素の href 属性の属性値としてスタイルシートファイルへのパス ( 場所 ) を記述し スタイルシートファイルへのリンクであることを示すために rel 属性と type 属性も合わせて記述します 同じスタイルを複数ページに対して使う場合には とても便利な方法です この方法だと 後のサイトメンテナンス時においても スタイルシートファイルを 1 枚修正するだけですむので 作業の手間を省くことができます なお スタイルシートが記述されたファイルは 拡張子を.CSS とつけて保存します 下記の例では この HTML ファイルと同じフォルダ内にある common-css というスタイルシートファイルを参照しています 記述例 <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta charset="utf-8" /> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> く Link href="common-css" rel="stylesheet type="text/css" </head> 尚 この外部リンクについては skyoceanlesson のチュートリアルの中で 詳しく説明しています 以上で Lesson に入る前の 予備知識を終わります くれぐれも申し上げておきますが この準備編は 知識として 素通りするぐらいでいいと思います Lesson を進めるたびに何十回も参照することになります どんどん前に進みましょう 実践を重ねることが重要です 最新の CSS の高度な使用例と解説は Lesson(chutorial201_1_4 の中にあります http://www.skyocean.bz/leaning/downloads Skyocean Lesson のサイト 19
終わりにここまでの実践では 文字と画像の表示の Lesson でしたが 画像 ( 写真 ) を自由自在に表示させる知識についてはインターネットの情報のキーワード HTML 及び CSS 等で詳しく閲覧できますが Skyocean Lesson のサイト のページの中で レベル別のチュートリアル ( 教本 ) を実践すれば簡単に表示させることが出来ます Skyocean Lesson のサイト では あなたが Web サイト上で商品の販売が出来るまでを Lesson しています Skyocean Lesson のサイト 20