More Related Content
Similar to HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
Similar to HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5 (20)
More from George Harada (12)
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
- 13. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>応募フォーム</title>
<link rel="stylesheet" type="text/css" href="index.css" media="all" />
</head>
<body>
<!-- header -->
<div id="header" class="text_center">
<p><img src="/logo.gif" alt="株式会社hoge"></p>
</div>
<!-- form -->
<div id="form">
<h1 class="title">お客さま情報のご入力</h1>
<h2>お客さまについて</h2>
<p>各項目の説明事項を参考にご入力ください｡</p>
<form action="#">
<table>
<tr>
<th>お名前(漢字)</th>
</tr>
<tr>
<td>
<div id="NameKnj">
姓<input type="text" size="10" value="">
名<input type="text" size="10" value="">
</div>
<p class="info">[姓名あわせて11文字以内]</p>
</td>
</tr>
</table>
<table>
<tr>
<th>お名前(カナ)</th>
</tr>
<tr>
<td>
<div id="NameKana">
セイ<input type="text" size="10" value="">
メイ<input type="text" size="10" value="">
</div>
<p class="info">[姓名あわせて16文字以内]</p>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
- 17. このURLで以下と同じソースが見られます
-- 社内URL --
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>応募フォーム</title>
<link rel="stylesheet" type="text/css" href="index.css" media="all" />
</head>
<body>
<!-- header -->
<div id="header" class="text_center">
<p><img src="/logo.gif" alt="株式会社hoge"></p>
</div>
<!-- form -->
<div id="form">
<h1 class="title">お客さま情報のご入力</h1>
<h2>お客さまについて</h2>
<p>各項目の説明事項を参考にご入力ください｡</p>
<form action="#">
<table>
<tr>
<th>お名前(漢字)</th>
</tr>
<tr>
<td>
<div id="NameKnj">
姓<input type="text" size="10" value="">
名<input type="text" size="10" value="">
</div>
<p class="info">[姓名あわせて11文字以内]</p>
</td>
</tr>
</table>
<table>
<tr>
<th>お名前(カナ)</th>
</tr>
<tr>
<td>
<div id="NameKana">
- 19. h1要素 = h1タグ = 見出し要素
<h1>HTML4</h1>
要素 (element)
開始タグ 終了タグ
要素の内容 (content)
- 24. <!-- と --> で囲まれた部分は
ブラウザに表示されない (※)
コメント扱いになる
→メモを入れたり、要素を非表示にしたりできる
※ソースコードを表示すると読む事ができる
コメント
- 43. 2. .sample(ドットつき)
----- HTML -----
<div class="sample">divはブロック要素</div>
<p class="sample">pは段落のタグ</p>
----- CSS -----
.sample {
text-align: center;
}
p.sample {
text-align: right;
}
- 44. 3. #sample(シャープつき)
----- HTML -----
<p id="sample">pは段落のタグ</p>
<div id="sample"><span>なに？</span></div>
----- CSS -----
#sample {
text-align: center;
}
#sample span {
background: #000000;
}
classとほぼ同様の使い方ですが
idはその要素の固有の名前なので
複数の同名idは使えません
- 56. 答え合わせ
table {
width: 94%;
margin: 10px auto 0;
border: solid 1px #D3D3D3;
border-collapse: collapse;
}
th {
border: solid 1px #D3D3D3;
background: #FBE9E9;
}
テーブル幅を全体の94%に固定
外側の余白を上10px,左右自動,
下0pxで表示
枠を一重の線をグレーで表示
隣接するセルの枠線を重ねて表示
枠を一重の線をグレーで表示
背景色をピンクで表示
- 87. このURLで以下と同じソースが見られます
-- 社内URL --
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>応募フォーム</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<!-- header -->
<header class="text_center">
<p><img src="/logo.gif" alt="株式会社hoge"></p>
</header>
<!-- form -->
<section id="form">
<hgroup>
<h1 class="title">お客さま情報のご入力</h1>
<h2>お客さまについて</h2>
</hgroup>
<p>各項目の説明事項を参考にご入力ください｡</p>
<form method="POST">
<table>
<tr>
<th>お名前(漢字)</th>
</tr>
<tr>
<td>
<div id="NameKnj">
姓<input type="text" size="10" value="">
名<input type="text" size="10" value="">
</div>
<p class="info">[姓名あわせて11文字以内]</p>
</td>
</tr>
