§09-02…リンクの設定＜a＞
(01) 「index.htm」内の本文「愉快なスタッフ」をクリックしたら、「stuff.htm」に切り替わるようにリンクを設定します。文字列にリンク設定をする場合には、その文字列を<a>タグで囲みます。bodyタグ内を以下のように更新しましょう。 <body> <h1>ストロベリーSHOP</h1> &...
§09-01…サイトの作成とハイパーリンク・準備
(01) これからはサイトの構築を想定し、サイト内でページとページをリンクする方法を学習します。あなたがこれから作るサイトのコンテンツを保存するためのローカルフォルダー「ストロベリーショップ」をディスク内に作成してください。 (02) 以下のソースのWebページ「index.htm」を作成しましょう。なお、保存先は「ストロベリーショップ」フォル...
§08-06…強制改行＜br /＞
(01) 表の一番上の行の各セルを「ご注文」「税別」「税込」で改行してみます。改行命令は<br>タグを用います。ただしこれも文字を囲わない空要素なので、<br />のようにタグを使います。tableタグ内を以下のように更新してからブラウジングしましょう。 <table summary="注文内容"> <capti...
§08-05…列の属性＜col＞
(01) 一番左の列の幅を15文字、中央と右の列は10文字にします。列に対してCSSを設定したい場合はtableタグの下に<col>タグを配置します。<col>タグには「span」属性(列数)と「class」属性を付加して列の特定をします。span属性を付けなければ左から順に1列分、付けた場合は属性値で指定した列数分を特定したことにな...
§08-04…表題文字列＜caption＞
(01) 表自体に表題を付加します。表題文字列はtable開始タグの直下に<caption>タグで囲んで指定します。今回は「ご注文内容」にします。tableタグ内のHTMLを以下のように更新したらブラウジングしてください。 <table summary="注文内容"> <caption>ご注文内容</captio...
§08-03…セルの結合
(01) 現在の表に「合計金額」の行を追加します。table内に行を以下のように追加してからブラウジングしてください。 <table summary="注文内容"> <tr> <th>ご注文商品</th><th>税別価格</th><th>税込価格</th> ...
§08-02…{border-collapse}
(01) 初期状態では表のセル間には空間があります。これらをなくす方法の一つとして、表の{border-collapse}プロパティの値を「collapse」にする、というのがあります。CSSに追加してからブラウジングしましょう。 table{ border-collapse:collapse; } (02) さて、次にこの表を以下のよう...
§08-01…表2・準備
(01) 次のようなソースのWebページ「re07.htm」を作成してください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <html xmlns="" x...