§03-05…フォントサイズを変更する{font-size}
(01) <h1>内のフォントのサイズを大きくしましょう。一般の段落(<p>タグ内の段落)の5倍にします。フォントの大きさは「font-size」プロパティを使います。値は「3.5em」にしてください。「1em」は標準サイズ1文字分です(<p>など)。ひとつのタグに複数のプロパティを指定する場合は、各プロパティをセミコロン...
§03-04…HTMLファイルとCSSファイルの関連付け
(01) CSSで書き込んだ設定は、HTMLファイル側でそのCSSファイルと関連付けなければページに反映されません。関連付けをするために、</head>という閉じタグの上の行に、以下のようなテキストを追加します。これは、書式情報にCSSファイル「sam02.css」を使ってくれという意味になります。書き込んだら上書き保存してブラウジングしてくださ...
§03-03…中央揃え{text-align}
(01) 通常のWebページでは全ての文章が左揃えになっています。ここでは<h1>タグ内のデータを中央揃えにする方法を学習します。書式の設定情報は、CSSファイル側に書き込みます。空のCSSファイル「sam02.css」を開いておいてください。<h1>に関して書式を決める場合は、以下のようなソースをCSSファイルに書き込みます。 h...
§03-02…XHTML(HTML)ファイルの準備
以下のようなソースのWebページ「re02.htm」を作成してください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <html xmlns="" xml:l...
§03-01…CSSファイルの作成
今まで作成したXHTMLファイルは、文章の構造のみを表しているだけです。次に構造だけではなく、デザイン・書式について考えます。現在見出しとなっている個所は大きく太く表示されてはいますが、もっと色々と書式を変更したくなります。XHTMLにおいて表現・書式を管理・編集するには『CSS』(カスケーディングスタイルシート・シーツ)と呼ばれる技術を用います。CSSは、...
§02-07…見出しの作成＜h＞
(01) ページ内の先頭に、見出し「自己紹介」を作成します。「re01.htm」を以下のように変更してください。 <body> <p>自己紹介</p> <p>はじめまして</p> <p>こんにちは</p><p>よろしくおねがいします</p> ...
§02-06…空白の扱い
(01) 以下のように段落を追加してください。なお、「徳川」と「家康」の間に半角のスペースを10個入力してください。 <body> <p>はじめまして</p> <p>こんにちは</p><p>よろしくおねがいします</p> <p>徳川 家康...
§02-05…段落の追加
(01) 1行改行して「こんにちは」とするつもりです。「re01.htm」のbody部を以下のように変更してください。 <body> <p>はじめまして こんにちは</p> </body> (02) 上書き保存してからブラウジングしてください。意図した通りに改行がなされていないことがわかります(改行が...
§02-04…文法のチェック
(01) 作成したXHTMLの文法・使用法が適切であるかを確かめます。 「Another HTML-lint 5」のページを開いてください。 URLは「」です。この中の下部にある日本語の「ゲートウェイページ」へ移動します。 (02) タブを選び、元の内容を消去してから中に作成した「re01.htm」のXHTML文(ソース)を貼り付けてくださ...