学習素材のソース
<head>
<title>Step02</title>
<style type="text/css"><!--
body {
font-size:150%;
background-color:papayawhip;
}
h1 {
font-size:4em;
font-family:serif;
color:navy;
}
--></style>
</head>
<body>
<div id="header">
<h1>page title</h1>
<h2>summary</h2>
</div><!--header-->
<div id="navi">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</ul>
</div><!--navi-->
<div id="cotainer">
<div id="side">
<ul>
<li><a href="step01.html">step01</a></li>
<li><a href="step02.html">step02</a></li>
<li><a href="step03.html">step03</a></li>
<li><a href="step04.html">step04</a></li>
<li><a href="step05.html">step05</a></li>
</ul>
</div><!--side-->
<div id="main">
<h3>ページ内スタイル</h3>
<p>ページにスタイルシートを設定しました。<br />
スタイルは、headタグ内に設定します。</p>
<h4>スタイルシートの設定</h4>
<p><style type="text/css"><!--<br />--></style>
</p>
こちらのページでは、
body,h1,h2,h3,h4 および p タグに対してスタイルを設定しました。
<h4>属性の扱いについて</h4>
<p>表に対する属性->border width を設定しています。。</p>
<table border="1">
<tr><th>tag</th><th>source</th><th>description</th></tr>
<tr><td width="10%">a</td><td width="35%">anchor</td><td width="55%">錨を意味するアンカーでした。囲まれいるテキストは「アンカーテキスト」。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">HTML以外でもアンカを文字って「安価（あんか）」というネット用語があります。</td></tr>
<tr><td width="10%">href</td><td width="35%">hyper reference</td><td width="55%">リンクする際のaタグやiframeと一緒に使われるhrefはハイパーリファレンスでした。</td></tr>
<tr><td width="10%">img</td><td width="35%">image</td><td width="55%">予想通りのimageです。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">画像を表示させるときのimg srcの「src」は何かというと、次の項目で！</td></tr>
<tr><td width="10%">src</td><td width="35%">source</td><td width="55%">imgと一緒に使う「src」はsourceでした。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">情報ソースとかのソースです。</td></tr>
<tr><td width="10%">p</td><td width="35%">paragraph</td><td width="55%">ひとつの段落を囲むpタグは、節や段落を意味する「パラグラフ」です。</td></tr>
<tr><td width="10%">div</td><td width="35%">division</td><td width="55%">ブロックとして囲むときに使うdivは境界や仕切りを意味する「ディビジョン」です。</td></tr>
<tr><td width="10%">h</td><td width="35%">heading</td><td width="55%">H1、H2、H3…のhです。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">「表題」「見出し」などの意味の英語「heading」(ヘッディング)を略していました。</td></tr>
<tr><td width="10%">br</td><td width="35%">line break</td><td width="55%">改行してくれるbrタグです。ラインブレイクなので「次の行へ」って意味合いになります。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">「改行」はnew lineかnew paragraphというそうです。</td></tr>
<tr><td width="10%">b</td><td width="35%">bold</td><td width="55%">太字で表示してくれるbタグ。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">strongやemは強調・アクセントの意味合いで使いますが、bはあくまで見た目だけの役割になります。</td></tr>
<tr><td width="10%">em</td><td width="35%">emphasis</td><td width="55%">強調の意味がある「エンファシス」。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">弱い強調はem、強い強調はstrongで使われていましたが、HTML5ではstrongは重要な箇所、emはフレーズのアクセントとして使用します。</td></tr>
<tr><td width="10%">hr</td><td width="35%">horizontal rule</td><td width="55%">水平線を表記してくれるタグ。「水平な罫線」という意味です。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">読み方は「ホリゾンタル ルール」です。ガラケー用サイトではよく使いますがPCやスマホではあまり使いませんよね。</td></tr>
<tr><td width="10%">col</td><td width="35%">column</td><td width="55%">table内でcolgroupの子要素として使うcolは、列を意味する「カラム」でした。</td></tr>
<tr><td width="10%">dl</td><td width="35%">Description list(Definition lists)</td><td width="55%">「定義タグ」とか「定義リスト」と呼ばれてるタグですね。HTML4.01では「defines an item in a definition list」で、HTML5だと「defines a term/name in a description list」と説明されていています。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">もう定義タグではなくなってしまったんですね。</td></tr>
<tr><td width="10%">dt</td><td width="35%">defines a term/name in a description list</td><td width="55%">dl内で定義・説明する用語を書くdtです。</td></tr>
<tr><td width="10%">dd</td><td width="35%">describe a term/name in a description list</td><td width="55%">dl内のdtに対する説明を書くddです。</td></tr>
<tr><td width="10%">del</td><td width="35%">delete</td><td width="55%">消すとか削除を意味するデリート。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">削除された内容を囲むタグです。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">ブラウザによりますが囲んだ部分の文字に打ち消し線が引かれて表示されます。</td></tr>
<tr><td width="10%">s</td><td width="35%">strikethrough text</td><td width="55%">囲んだテキストに打ち消し線を表示します。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">HTML5で廃止されました。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">代用はdelタグになります。</td></tr>
<tr><td width="10%">i</td><td width="35%">italic</td><td width="55%">イタリック体の略です。</td></tr>
<tr><td width="10%">iframe</td><td width="35%">inline frame</td><td width="55%">他で存在しているコンテンツをそこに呼び出して表示させるiframeはインラインフレームでした。</td></tr>
<tr><td width="10%">ins</td><td width="35%">insert</td><td width="55%">新たにテキストを追記する時に使うinsは、挿入を意味するインサートでした。</td></tr>
<tr><td width="10%">keygen</td><td width="35%">key generation</td><td width="55%">「key-pair generator」とも。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">keygenの読みは「キージェネ」ってのが一般的によく使われてるかと思います。</td></tr>
<tr><td width="10%">ul</td><td width="35%">unordered list</td><td width="55%">リストタグと呼ばれてるulとol。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">前者は番号なしのアンオーダーリストでした。</td></tr>
<tr><td width="10%">ol</td><td width="35%">ordered list</td><td width="55%">番号付きのリストolはオーダーリストでした。</td></tr>
<tr><td width="10%">li</td><td width="35%">list item</td><td width="55%">ul、olの子要素として使うliはリストアイテムでした。</td></tr>
<tr><td width="10%">meta</td><td width="35%">Meta-information</td><td width="55%">head内で使うメタタグですが、「○○間の」「○○を含んだ」「○○の後ろの」等の意味がある接頭語で、ギリシャ語が元になっているようです。</td></tr>
<tr><td width="10%">thead</td><td width="35%">table header</td><td width="55%">table内のヘッダに当たる部分を示すtheadはテーブルヘッダーでした。</td></tr>
<tr><td width="10%">tbody</td><td width="35%">table body</td><td width="55%">table内のメインになる部分を示すtbodyはテーブルボディでした。</td></tr>
<tr><td width="10%">tfoot</td><td width="35%">table footer</td><td width="55%">table内のフッターの当たる部分を示すtfootはテーブルフッターでした。</td></tr>
<tr><td width="10%">th</td><td width="35%">table header cell</td><td width="55%">tableでセルの見出しに使うthは、テーブルヘッダーセルでした。</td></tr>
<tr><td width="10%">td</td><td width="35%">table data cell</td><td width="55%">tableでセルの内容を書くtdはテーブルデータセルでした。</td></tr>
<tr><td width="10%">pre</td><td width="35%">preformatted text</td><td width="55%">囲んだテキストとそのまま表示してくれるpreはプレフォーマット テキストでした。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">整形済みテキストと訳されます。</td></tr>
<tr><td width="10%">q</td><td width="35%">quotation</td><td width="55%">blockquoteのタグとの違いですが、blockquoteはブロック要素で長文に、qはインライン要素で短いテキストに使います。</td></tr>
<tr><td width="10%">rb</td><td width="35%">ruby body</td><td width="55%">ルビを振る事ができるrubyタグ内で使うrbはルビーボディでした。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">ルビの対象になる文字を囲みます。</td></tr>
<tr><td width="10%">rt</td><td width="35%">ruby text</td><td width="55%">ruby内で表示させたいルビを囲むタグです。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">ルビーテキストでした。</td></tr>
<tr><td width="10%">rp</td><td width="35%">ruby parentheses</td><td width="55%">rubyに対応していないブラウザだけに表示させるタグです。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">ルビーパレンシスでした。</td></tr>
<tr><td width="10%">rbc</td><td width="35%">ruby body container</td><td width="55%">HTML5で廃止されたrtcは、ruby内でグループ化するタグ。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">ルビーテキストコンテナーでした。</td></tr>
<tr><td width="10%">rtc</td><td width="35%">ruby text container</td><td width="55%">ruby内で2つのルビを振るためのタグ。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">HTML5でも採用されています。</td></tr>
<tr><td width="10%">samp</td><td width="35%">sample</td><td width="55%">プログラムなどで出力された部分をサンプルとして示すタグ。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">サンプルの略でした。</td></tr>
<tr><td width="10%">sup</td><td width="35%">superscript</td><td width="55%">上付き文字を表示するためのタグ。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">スーパースクリプトでした。</td></tr>
<tr><td width="10%">sub</td><td width="35%">subscript</td><td width="55%">supの上付きに対して、subは下付き文字を表示するためのタグ。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">サブスクリプトでした。</td></tr>
<tr><td width="10%">u</td><td width="35%">underline</td><td width="55%">アンダーラインを引くためのタグでしたが、html5では意味合いが変更されて、本来とは違う表記等を示すラベルとして使います。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">リンクと間違え安いこともあり非推奨とされています。</td></tr>
<tr><td width="10%">kbd</td><td width="35%">keyboard</td><td width="55%">ユーザが入力する要素を表示させるkbdはキーボードでした。</td></tr>
<tr><td width="10%">abbr</td><td width="35%">abbreviation</td><td width="55%">省略形や略語の意味を持つ「アブリビエーション」です。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">title属性と一緒に使用して、略語である事を示します（titleには正式名を入力）。</td></tr>
<tr><td width="10%">var</td><td width="35%">variable</td><td width="55%">変数を意味するバリアブルでした。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">varで囲んだ部分が変数である事を示します。</td></tr>
<tr><td width="10%">nav</td><td width="35%">navigation links</td><td width="55%">やはりのナビゲーションでした。</td></tr>
<tr><td width="10%">nobr</td><td width="35%">no break</td><td width="55%">改行させたくない場合に使うnobrです。</td></tr>
<tr><td width="10%">wbr</td><td width="35%">word break opportunity</td><td width="55%">nobrで囲まれた部分で改行してもいい箇所示します。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">改行候補なだけで必ずしも改行されるわけではありません。brのように閉じタグはありません。</td></tr>
<tr><td width="10%">param</td><td width="35%">parameter</td><td width="55%">objectの中で子要素として使うparamはパラメータでした。</td></tr>
<tr><td width="10%">bdo</td><td width="35%">Bi-Directional Override</td><td width="55%">属性のdirにrtlで右から左に、ltrでその逆方向から文字を表示できるタグ。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">バイディレクショナルオーバーライドでした。</td></tr>
<tr><td width="10%">bdi</td><td width="35%">Bi-directional Isolation</td><td width="55%">他テキストの文字方向に依存しないで表示出来るタグ。</td></tr>
<tr><td width="10%"></td><td width="35%"></td><td width="55%">バイディレクショナルアイソレーションでした。</td></tr>
</table>
</div><!--main-->
</div><!--cotainer-->
<div id="footer">
<address>© 2017 takesawa & tikuwa</address>
</div><!--footer-->