Previous page Top page Next page
8.1 情報の発信 8.2 HTML 8.3 自分のウェブページを作る 8.4 ページの整形 8.5 スタイルシート

8.4 ページの整形

改行と改段落 --- <p> <br> <hr>

HTML では，改行は空白と同じものとして扱われます．また，空白も単語を区切る意味しか持ちません．ブラウザが表示するときには，元のファイルの改行とは無関係に，そのときのウィンドウの幅に合わせて適当な箇所で改行をします．

HTML では，段落は p 要素で示します．

<p>最初の段落です．</p>

<p>2番目の段落です．

ここは，まだ2番目の段落です．</p>
<p>3番目の段落です．</p>

段落の中で強制的に改行したい場合には，br 要素を使用します．br 要素は開始タグだけで，内容も終了タグもありません．また，hr 要素で，区切りの横線を入れることができます． hr 要素も開始タグだけです．

例えば，以下のような HTML ファイルは，

<p>これは，HTMLの改行のテストです．<br>
この行のように br がないと，
HTMLファイルで改行をしていても無視されます．<br>
また，このように区切り線を指定すると，
<hr>
横方向の線ができます．</p>

次のように表示されます．

これは，HTMLの改行のテストです．
この行のように br がないと， HTMLファイルで改行をしていても無視されます．
また，このように区切り線を指定すると，
横方向の線ができます．

見出し --- <h1> 〜 <h6>

適切な見出しをつけると，情報を効率よく相手に伝えることができます．見出しには6段階あり，h1 から h6 の要素を使用します．最大の見出しが，h1 で，数が増えるに従って小さくなります．

例えば，以下のようなHTMLファイルは，

<h1>これは一番大きな見出しです． </h1>
<h2>これは次に大きな見出しです． </h2>
<h3>これはその次に大きな見出しです． </h3>
<h4>これは小さな見出しです． </h4>
<h5>これはもっと小さな見出しです． </h5>
<h6>これは一番小さな見出しです． </h6>

これは一番大きな見出しです．

これは次に大きな見出しです．

これはその次に大きな見出しです．

これは小さな見出しです．

これはもっと小さな見出しです．
これは一番小さな見出しです．

と表示されます．

注意注意
フォントの設定によっては，違うレベルの見出しが同じ大きさで表示されることがあります．あまりいろいろな見出しを多用すると，そのような設定で見ている人には文書の構成が分かりにくくなります．

● 練習問題

  1. 先ほど作った文書のタイトルは 「My Test Home Page」でした． このタイトルを別のものに変えて，netscape で表示を確認しなさい．
    変更した結果をブラウザで確認するには，変更を保存した後，netscape の「再読込」ボタンを押すと新しい内容が反映されます．
  2. 自己紹介という見出しをつけ，見出しの後に横線の区切りを入れた後，自己紹介文を一段落書きなさい．

箇条書き --- <ul> <ol> <li> <dl> <dd> <dt>

HTMLでは，番号無し，番号付き，説明付きの3つのスタイルで箇条書きを指定することができます．

番号無し
ul 要素の中に各項目を li 要素で書いていきます．
<ul>
<li>環境情報学部</li>
<li>総合政策学部</li>
<li>看護医療学部</li>
</ul>

と指定すると，以下のようになります．

  • 環境情報学部
  • 総合政策学部
  • 看護医療学部
    • 番号付き
    ul 要素の代わりに ol 要素を使うと，各項目の前に番号が付きます．
    <ol>
<li>履修申告をする．</li>
<li>講義に出席し課題をこなす．</li>
<li>期末試験を受験する．</li>
<li>成績が付き単位取得．</li>
</ol>

    と指定すると，以下のようになります．

    1. 履修申告をする．
    2. 講義に出席し課題をこなす．
    3. 期末試験を受験する．
    4. 成績が付き単位取得．
    説明付き
    説明付きの箇条書きとは， 辞書のように， 各項目が用語とその説明からなるようなリストのことです． dl 要素の中に dt 要素と dd 要素を交互 に書いていきます．例えば，
    <dl>
<dt>WWW</dt>
<dd>World Wide Web の略</dd>
<dt>URI</dt>
<dd>Uniform Resource Identifier の略</dd>
</dl>

    と指定すると，以下のようになります．

    WWW
    World Wide Web の略
    URI
    Uniform Resource Identifier の略

    また，箇条書きは入れ子にして階層構造を持たせることもできます．次のように書くと，どのような表示になるでしょうか．ブラウザで確認してみると同時に，どのタグがどこで始まってどこで終わっているのかも確認しましょう．

    <ul>
<li>オーケストラ
  <dl>
  <dt>弦セクション</dt>
  <dd>弦楽器により構成</dd>
  <dt>パート</dt>
  <dd>
    <ol>
    <li>第一ヴァイオリン</li>
    <li>第二ヴァイオリン</li>
    <li>ヴィオラ</li>
    <li>チェロ</li>
    <li>コントラバス</li>
    </ol>
  </dd>
  </dl>
</li>
</ul>

    表組み --- <table> <tr> <td> <th>

    表を作るときは，table 要素を使います．表の中の各行は tr 要素で表わし，その中の各項目は td 要素で表します．td 要素を tr 要素の中にいくつも書くことで，項目を横にどんどん増やして行くことが出来ます．また，上端や左端に見出しを書きたい場合は，td 要素の代わりに th 要素を使います．

    <table>
  <tr>
    <th>コマンド</th>
    <th>機能</th>
  </tr>
  <tr>
    <td> pwd </td>
    <td> カレントディレクトリの表示 </td>
  </tr>
  <tr>
    <td> cd </td>
    <td> ディレクトリの移動 </td>
  </tr>
  <tr>
    <td> ls </td>
    <td> ディレクトリの内容表示 </td>
  </tr>
</table>
    コマンド機能
    pwdカレントディレクトリの表示
    cdディレクトリの移動
    lsディレクトリの内容表示
    <table border="1">
  <tr>
    <th>コマンド</th>
    <th>機能</th>
  </tr>
  <tr>
    <td> pwd </td>
    <td> カレントディレクトリの表示 </td>
  </tr>
  <tr>
    <td> cd </td>
    <td> ディレクトリの移動 </td>
  </tr>
  <tr>
    <td> ls </td>
    <td> ディレクトリの内容表示 </td>
  </tr>
</table>
    
    	
    
	  
    コマンド機能
    
	  
    pwdカレントディレクトリの表示
    
	  
    cdディレクトリの移動
    
	  
    lsディレクトリの内容表示
    
	
      
	<table border="1">
	  <tr><th>旧省庁名</th><th>新省庁名</th></tr>
	  <tr><td>大蔵省</td><td>財務省</td></tr>
	  <tr><td>厚生省</td><td rowspan="2">厚生労働省</tr>
	  <tr><td>労働省</td></tr>
	  <tr><td colspan=2>外務省</td></tr>
	</table>
      	  <tr><td>通産省</td><td>経済産業省</td></tr>
    旧省庁名新省庁名
    大蔵省財務省
    厚生省厚生労働省
    労働省
    外務省
    通産省経済産業省

    ● 練習問題

    自分の時間割表をHTMLで作りなさい．

    他の情報へリンクを張る --- <a>

    HTMLはハイパーテキストの一種なので，文書中に他の情報へのリンクを持たせることができます．他の情報へのリンクは a 要素で表し，href属性の値として，リンク先の情報の位置を示す URI を指定します．例えば，SFCのホームページへのリンクを自分のページの中に作る場合は，以下のようにします．

    <a href="http://www.sfc.keio.ac.jp/">SFCのホームページ</a>

    a 要素の内容をソースアンカー (source anchor)と言い，そこをクリックすると指定された情報に飛ぶ ようになります．

    現在のページと同じウェブサーバ上にあるページの URI は，ホスト名などを省略することができます．

    <ul>
  <li><a href="next.html">同じディレクトリの別のファイル</a>
  <li><a href="/index.html">このサーバのトップへ</a>
  <li><a href="http://www.keio.ac.jp/index.html">慶應義塾のホームページ</a>
</ul>

    特殊な文字 --- &lt; &gt; &amp; &quot; &nbsp;

    HTMLでは「<」や「 >」は特別な意味を持っているのでそのまま書くことはできません．これらの文字を表示したい時は以下のように書きます．

    < &lt;
    > &gt;
    & &amp;
    " &quot;
      (半角スペース) &nbsp;

    フォーマット済みテキストの指定 --- <pre>

    空白や改行を入力した通りに表示してほしいことがあります． 例えば，以下のような HTML ファイルは，

    明日，７時から飲み会やります．

　　　　│　　↑
　　　　│　　北
　　　　駅
　　　　│◎ここ
　　　　│

    以下のように表示されます．

    明日，７時から飲み会やります． 　　　　│　　↑ 　　　　│　　北 　　　　駅 　　　　│◎ここ 　　　　│

    これではどこに行けばいいのか分かりません．

    このような時は pre を使います．pre 要素の内容は，文字幅が一定のフォントを使い，空白・改行もその通りに表示されます．

    <pre>
明日，７時から飲み会やります．

　　　　│　　↑
　　　　│　　北
　　　　駅
　　　　│◎ここ
　　　　│
</pre>

    ● 練習問題

    今までに習ったことを参考にして，自分のウェブページ(index.html)を完成させなさい．内容は自己紹介，趣味に関することなど何でもかまいません．

    CNSさまざまなHTMLタグ P.248参照
    Previous page   Next page