超簡単にWebページを作成

Size: px

Start display at page:

Download "超簡単にWebページを作成"

きよたつのしろ
5 years ago
Views:

1 Lesson を始める前にどんなプログラマーもこれを実践しました超簡単に Web ページを作成この解説書は Lesson が高レベルになっても参照用として利用して下さいこの章の実践方法はまず解説ページ内にある HTML ソースコードをコピーしてメモ帳などに貼り付けて実行して表示してそのあとで表示内容を解説します最初は全然理解できない方でも同じ HTML コードを繰り返し繰り返し実践する事で HTML というものが理解できるようになります

2 内容 HTML ファイルの作成と Web ブラウザーで表示... 2 テキストエディタを起動!... 2 ファイルを保存!... 3 ブラウザで開く!... 4 スタイルシートの原形を作成してみましょうスタイルシートの記述方法を理解するスタイルシートにもコメントタグがあるスタイルシートを HTML 文書に適用させる 3 つの方法埋め込み式インライン方式外部リンク Skyocean Lesson のサイト 1

3 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" " <html xmlns=" xml:lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=shift-jis" /> <title> はじめての XHTML 1.0</title> </head> Skyocean Lesson のサイト 2

4 <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

5 ブラウザで開く! 先程保存したファイル ( ドキュメントフォルダにあると思います ) をダブルクリックします下図自動で次図のように 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"?> <!

6 つぎは下図のような結果を表示する HTML コードを実践します上図を表示する下記のコードをメモ帳に入力またはコピーして SecondTrial.html という名前で保存して Web で表示してください SecondTrial <?xml version="1.0" encoding="shift_jis" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" 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

7 <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

8 イメージの表示方法 Web ページといえばイメージ ( 画像 ) の表示は欠かせません簡単に表示できますまずイメージ ( 画像 ) のファイル ( 例えば Windows の場合ピクチャというフォルダ内にある拡張子が jpg とか png 等の画像ファイル ) を先程の html ファイルを保存した Document フォルダにコピペします下図は私のドキュメントフォルダ内に compute_ 休憩.jpg という画像ファイルを選択した画面ですその cmpute_ 休憩.jpg というイメージ ( 画像 ) を Web ページ上に表示して見ましょう Skyocean Lesson のサイト 7

9 先程の 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

10 尚画像の位置大きさ等はもちろん html コードによって制御することが出来ます次項で基本的な方法を説明しています Skyocean Lesson のサイト 9

11 文字サイズやカラーページのレイアウトなど文書の見た目を指定する方法を定義するまずはスタイルシートの原形を作成してみましょうサンプル 1 まずは下記のコードを Web ページとして表示してください StyleSheetTrial <?xml version="1.0" encoding="shift_jis" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" 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

12 <p><strong> 文字を強調しています </strong></p> <h1>h1 の文字です </h1> <ol> <li> リスト行 1</li> <li> リスト行 2</li> <ol> </body> </html> 実行画面は下図のようになります Skyocean Lesson のサイト 11

13 スタイルシートの原形は下記の赤いコード部分です <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

14 サンプル 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

15 次にスタイルシートの基本を簡単に説明しておきますスタイルシートの記述方法を理解するスタイルシートではセレクタと呼ばれるスタイルを適用する対象にスタイルの種類を表すプロパティを指定しその値を記述することで定義します実際にはセレクタ { プロパティ : 値 ;} という形で指定をします記述例 P{color:#FFFFFF;} セレクタプロパティ値つまりセレクタの範囲をかぎ括弧 ({ }) でプロパティと値の対応をコロン (:) でプロパティの指定の終了をセミコロン (;) で記述しますセレクタにはいくつかの種類がありますがここではスタイルシートを適用させたい HTML の要素だと考えてください 1 つのセレクタに対して複数のプロパティを適用させることもできます適用させるには ; の後に続けてプロパティ : 値 ; を指定します記述例 h1{color:#ffffff; fontsize:250%;} また要素やプロパティ値などの間以外なら半角スペースや改行タブは自由に挿入することができます一般的にこれらを使ってスタイルシートのファイルを見やすいように記述します Skyocean Lesson のサイト 14

16 Skyocean Lesson のサイト 15

17 スタイルシートにもコメントタグがあるスタイルシートにもコメントタグがあります /* と [*/ の間に記述します HTML のコメントタグ同様ブラウザはコメントとして解釈します何に対するスタイル指定なのかメモとしてこまめに挿入しておくことをオススメしますまた一時的にスタイル設定を無効にする場合などに便利です本書で用意したスタイルシートファイルにもスタイルの分類分けをする際の仕切りとしてコメントタグを使用していますコメント記述例 body{ /*color: red;*/ font-si ze: 13px; /* 本文の文字サイズ */ Line-height: 21 px; /* 本文の行間 */ } Skyocean Lesson のサイト 16

18 スタイルシートを 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

19 インライン方式 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

20 外部リンク 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 の中にあります Skyocean Lesson のサイト 19

21 終わりにここまでの実践では文字と画像の表示の Lesson でしたが画像 ( 写真 ) を自由自在に表示させる知識についてはインターネットの情報のキーワード HTML 及び CSS 等で詳しく閲覧できますが Skyocean Lesson のサイトのページの中でレベル別のチュートリアル ( 教本 ) を実践すれば簡単に表示させることが出来ます Skyocean Lesson のサイトではあなたが Web サイト上で商品の販売が出来るまでを Lesson しています Skyocean Lesson のサイト 20

Microsoft PowerPoint - ＣＳＳ（Cascading Style Sheets）の基本.pptx

Microsoft PowerPoint - ＣＳＳ（Cascading Style Sheets）の基本.pptx CSS(Cascading Style Sheets) の基本 1. CSSの基本的な考え方は HTMLの構造を表す要素 ( タグ ) に対しスタイルを定義するというもの 2. CSSではセレクタプロパティ値の3つを組み合わせてスタイルを設定する 3. セレクタは ,, や要素などコンテンツ内のどの要素にスタイルを適用するかを指定する 4. セレクタの次の