ｉｔ研修講座 aki
TRANSCRIPT
ＩＴ研修講座NPO 法人全国女性シェルターネット企画講座
WEB サイト作成
ホームページの構成要素
• ＨＴＭＬ – .html .htm (.cgi .php .jsp)
• ＣＳＳ– .css
• 画像ファイル– .jpg .gif .png
• javascript– .js
css
img
js
index.html
layout.cssside.css
image01.gifimage02.gif
rollover.jsiepngfix.js/
inquiry
about
index.html
index.html
root
ＵＲＬと絶対パスと相対パス
• URL– http://annulus.jp/temp/index.html
• 絶対パス– /var/www/vhosts/greenapple.jp/httpdocs/
• 相対パス– ./index.html ../temp/index.html
HTML の基本構成要素
<html> <head> </head> <body> </body></html>
HTML HTML で記述されたドキュメントであることを宣言
head HTML ファイルの情報を記述
body ブラウザに表示する内容
タグの基本ルール
<p class=“velue”> 内容がここに入ります</p>要素名 属性名 値
属性
開始タグ 終了タグ
要素
タグの基本ルール 2
• 開始タグと終了タグ <p>~</p> <br /> <img src=“~” />
• 属性と値• 値は「“」で囲む• ファイル名は半角英数で。記号は「 - 」か「 _ 」が使えます
• ソースは小文字で記述する• タグはまたがない ×<p> 今日は <b> いい </p></b> てんき
です。
• コメントは <!-- このように書く -->• ブロック要素とインライン要素
DOCTYPE 宣言
ＤＯＣＴＹＰＥ宣言<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="jp" lang="jp">バージョン
HTML4.01 Strict/HTML4.01 Transitional/HTML4.01 FramesetXHTML1.0 Strict/XHTML1.0 Transitional/XHTML1.0 Frameset/
XHTML1.1標準準拠モードと過去互換（後方互換）モードhttp://spreadsheets.google.com/pub?key=pbrvd2wQKc03fJ5QWgYr-Cw&gid=3
タイトル<title> ~ </title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />キーワード<meta name=“keywords” content=“ ー , ー , ー” /><meta name=“description” content=“ ～ " />
W3C
World Wide Web Consortium （ワールド・ワイド・ウェブ・コンソーシアムは World Wide Webで使用される各種技術の標準化を推進する為に設立された標準化団体、非営利団体。略称はW3C （ダブリュースリーシー）。 MITや CERNが中心となって1994年10月1日発足。 2007 年現在、 MIT/LCS 、ERCIM、慶應義塾大学が中心となって活動している。
XHTML とは
2000 年 1 月 26 日に W3C の勧告となったXHTML （ Extensible HyperText Markup Language ） [XHTML10] は、素朴な文書構造記述言語として発展してきた（あるいは混乱してきた） HTML に、 XML[XML1] の持つ柔軟性、拡張性を取り入れたものです。 HTMLは SGML の実装の一つで、書式にそれなりに自由度がありましたが、 XHTML は XML の実装であるため、書式が厳密になっています（ XML は、 SGML の書法をシンプルで厳密なものにすることで、アプリケーションの開発や互換性をとりやすくした）。
文章を構成する基本のタグ
見出し
<h1>~</h1><h2>~</h2><h3>~</h3><h4>~</h4><h5>~</h5><h6>~</h6>
文章を構成する基本のタグ 3
• リスト– <ul><li>~</li> <li>~</li> </ul>
• 定義リスト– <dl><dt> ~ </dt><dd> ~ </dd></dl>
• 表– <table><tr><th></th><td></td></tr></table>
文章を構成する基本のタグ 2
• 段落– <p>~</p>
• 改行– <br />
• ブロック– <div>~</div>
課題 1
次の文章を以下の DOCTYPE と、 meta タグ、基本のタグを使用して HTML にしてください。
鎌倉の隠れカフェ 大佛次郎茶亭 大佛次郎茶亭は鎌倉、大佛次郎記念館の中にあるカフェです。作家、大佛次郎氏の書斎兼茶亭、大正 9 年に建てられた茅葺きの木造平屋建で昭和 27 年に大佛
氏が購入。通常は土日・祝日だけカフェとして営業。メニューコーヒー紅茶チーズケーキあんみつインフォメーション住所 鎌倉市雪ノ下 1-11-22
アクセス 鎌倉駅から徒歩 10分copy right(c)2008 osaragi café. All Rights Reserved.
ＣＳＳ カスケーディングスタイルシート
CSS を HTML ファイルに組み込む方法は 3 種類
• 1.Style 要素を使って head 内に指定する
• 2.Style 属性を使って要素に直接指定する
• 3.Link 要素で外部の css ファイルをリンクさせる
1.Style 要素を使って head 内に指定する
ＨＴＭＬファイル内の head 内のソース<head><style type=“text/css”><!--h1{
color:#66cc66;}--></style></head>
2.Style 属性を使って要素に直接指定する
HTML ファイル内の body 内のソース
<body><h1 style=“color:#ff0000”> 見出し </h1><p> このように <span
style=“color:#ffff00”> ＨＴＭＬ要素に直接スタイルを定義 </span> します。 </p>
</body>
3.Link 要素で外部の css ファイルをリンクさせる
HTML<head><link href=“style.css” rel=“stylesheet”
type=“text/css” /></head>CSSh1{ color:#ff0000;}
ＣＳＳの基本
• 要素名｛プロパティ：値；｝h1{
color:blue;}
• コメント /* コメント */
※ソースを記述する際、スペースはいれないように
（ css html とも）
セレクタ
複数のプロパティをまとめる定義方法
h1{color:blue;font-size:14px;
}h1,h2{
margin-bottom:30px;}
セレクタの種類
• 基本セレクタ （ div や p などの HTML 要素に）p{font-size:14px;}
• クラスセレクタ (複数要素に )– CSSp.blue{color:blue;} .red{color:red;}– HTML<p class=“blue”>青 </p><p class=“red”>赤 </p>
セレクタの種類 2
• ＩＤセレクタ（一つの要素だけに）– CSS
#main{width:300px;border:1px solid #ccc;}– HTML
<div id=“main”>グレーの枠がついた 300ｐｘの箱です。</div>
セレクタの種類 3
• 擬似クラス– クラスやＩＤでは表現できない性質について設定できるセレクタ擬似クラスは「 : 」にあらかじめ決められた予約語を組み合わせて定義します
。
-CSSa:link{color:red;}a:visited{color:green;}a:hover{color:yellow;}a:active{color:blue;}-HTML<a href=“#”> リンク </a>
セレクタの種類 4
• 子孫セレクタ– 特定の要素の子要素、または子孫の要素にスタイルを適用させま
す。要素との間には半角スペースで区切って指定する。
– CSSp span{color:#fff0000;}p .red{color:#ff0000;}– HTML<p> 入れ子になった <span> ところが </span>子孫です </p>
<p>重なっているところが <strong class=“red”>子孫</strong> なわけです。 </p>
課題 2
テキストを装飾しましょう。
CSS ファイルを作成して、さきほど作成した HTMLファイルからリンクをはってください。
CSS は以下を参考にして記述してみましょう。
見出しを工夫して目立たせてください。
メニューとインフォメーションには別々のクラスセレクタを設定してください。
ページ全体の背景にも色をつけてください。
余白
• margin(マージン）– マージンとは、要素を囲む領域（ボックス）の外側の余白のことをいいます。
• padding( パディング）– パディングは、要素を囲む領域（ボックス）の内側の余白のことで、その要素の内容とボーダーとの余白のことをいいます。
マージン
• margin:0 10px 0 20px;• margin:0 auto;• margin:15px;• margin-top:10px;• margin-bottom:0;• margin-left:20px;• margin-right:5px;
パディング
• padding:0 10px 0 20px;• padding :0 auto;• padding :15px;• padding -top:10px;• padding -bottom:0;• padding -left:20px;• padding -right:5px;
課題 3
テキストの余白を調整してみましょう。
さきほどの HTML を使用して、ページ全体と見出しとフッター（コピーライト）に余白をいれてみましょう。
パディングとマージンの違いに注意してください。
ボックスの構造ボックスモデル
高さ
height
幅 width
内容を表示する領域
paddingborder
margin
課題 4
「大佛次郎茶亭は鎌倉、大佛次郎記念館の中にあるカフェです。～アクセス鎌倉駅から徒歩 10分」までを大きなひとつのボックスで囲って、背景色を入れて、余白をいれてみましょう。ボックスの設定は IDセレクタで cont という名称にしてください。ボックスは margin を使用して中央寄せにしてください。
また、「メニュー コーヒー 紅茶 チーズケーキ あんみつ」と「インフォメーション 住所 鎌倉市雪ノ下 1-11-22 アクセス 鎌倉駅から徒歩 10分」もそれぞれボックスで囲って、それぞれ背景色をいれて、余白をつけましょう。ボックスの設定は IDセレクタでメニューは menu 、インフォメーションはinfo としてください。
課題 5
• 画像を加工してみましょう
http://www.picnik.com/ image.jpg を 幅 327px 高さ 327px にトリミング（カット）して、 image02.jpgで保存してください。
画像は img フォルダを作成して、そこに入れてください。
画像について
• jpg• gif• png
画像の張り込み
<img src=“URL” width=“—px” height=“—px” alt=“ 画像の説明” />
回り込み
• 回り込みを指定– float:left;– float:right;
• 回り込みを解除– clear:left;– clear:right;– clear:both;
課題 6
• 画像を貼り付けて、文字を回り込みさせましょう。
• メニューより下は回りこみを解除させましょう。
• 画像には border をつけてください。色は白で、幅は10px です。
• 背景に画像をいれてみましょう。
• 「インフォメーション」から class=”type02” をはずして、「インフォメーション」のみに css を反映させる仕方を考えましょう。（子孫セレクタを利用しましょう）
リンクをはる
リンクをはる
< a href=“URL”>テキスト </a>メーラーを起動するリンク
<a href=“mailto: メールアドレス” >address</a>
サイト内リンク
<a name=“ ～ " id=“ ～ "></a><a href=“# ～” >テキスト </a>
課題 7
• ページ内リンクをはってみましょう。
• コピーライトの上、 #contボックス内に「▲ページトップに戻る」というテキストをいれて、ページ上部に移動するようにリンクをつけてください。
• リンク名は「 top 」としてください。
2 段組レイアウト
div （ボックス）を float で並べる
float:left;
width:400px;
margin:0 10px 0 0;
float:right;
width:200px;
width:630px; padding:10px;
課題 8
• 課題 7 で使用した
• 最終デザイン .jpg のようなページを作成しましょう。