文章のレイアウト・デザインあれこれ


  1. 見出し文字のサイズを変える
  2. 文章中の文字サイズを変える
  3. いろいろな種類の文字を使ってみる
  4. 文字の位置を変えてみる
  5. 改行や行間空きを入れてみる
  6. 箇条書きも自動的に作ってくれる
  7. 罫線や表組で表現力をアップしよう

見出し文字のサイズを変える


使用するタグ:<H1></H1>

文章の見出しに使うタグを「ヘッダタグ」と呼びます。これは、見出しの文字文字指定用のタグで<H1>が最大で、<H6>が最小の文字サイズになります。

 <H1>文字サイズをかえる。

 <H2>文字サイズをかえる。

 <H3>文字サイズをかえる。

 <H4>文字サイズをかえる。

 <H5>文字サイズをかえる。
 <H6>文字サイズをかえる。

<H1>ヘッダタグをつけると、書体はボールド(太字)になり、必ず前後に一行分のスペースが自動的につきます。この他のヘッダタグもすべて自動的に行開きおよび改行されますので、文章中にこのタグは使えません。


文章中の文字サイズを変える


使用するタグ:<FONT SIZE></FONT>

文章中で一部の文字のサイズを変えるときに使います。ヘッダタグのようにボールドになったり、前後の行間を空けることはありません。<FONT SIZE=7>が最大サイズで、 <FONT SIZE=1>が最小です。指定しない本文の文字サイズは<FONT SIZE=3>に相当します。

私は、< FONT SIZE=5>数学が</FONT>大好きです。

私は、数学が大好きです。

私は、< FONT SIZE=2>数学が</FONT>大好きです。

私は、数学が大好きです。


いろいろな種類の文字を使ってみる


UP

使用するタグ:<B><I><TT>

<B> このタグではさまれた文字をボールドにする

<I> このタグではさまれた文字をイタリックにする 

<TT>このタグではさまれた文字は等幅フォントになる

アルファベットのWWIWIW(I)

アルファベットのWWIWIW(I)

アルファベットのWWIWIW(I)


文字の大きさの指定

<BIG>一段階、文字サイズを大きくする指定

<SMALL>一段階、文字サイズを小さくする指定

<SUB>下付文字の指定

<SUP>上付文字の指定


その他の指定

<STRIKE>文字の上に、取消線(一重線)を引く

<U>アンダーバー(下線)の指定


文字の位置を変えてみる


UP

使用するタグ:<CENTER>

HTML文書は左揃えが基本で、何も指定しない場合は文字も図形も全て左端から始まります。それは、ブラウザ自体に「ページサイズ」の概念がないからです。HTML文書はいくらでも長くできるし、表示するコンピュータの画面サイズやブラウザの設定によって、ページの幅もかわります。<CENTER>タグは、ページの概念がないブラウザ画面の「中央」に表示させる指定です。

ここが真ん中

改行や行間空きを入れる


UP

使用するタグ:<BR><P>

どちらも例外的に、タグではさむのではなく、ひとつだけでも指定が有効になります。このように、一つだけでも有効なタグを、「エンプティ(空)タグ」と呼びます。

<BR>文章の最後に付けて、改行させる指定です

<P> 文章の最後に付けて、改行して一行空ける指定です


高度な使い方

<PRE>(プレフォーマット)タグを使うと、その部分のスペース、改行、行間などを原稿で作成されたとおりに表現することができます。と本に書いてありましたが、<PRE>がなくても下のように表示されました?

<PRE>

  うさぎ   うさぎ    なにみて  はねる 

             十五夜  お月さん           みて

                                          はねる 

</PRE>


段落全体の左右揃えを指定する

使用するタグ:<P><DIV>

 <P>は改行して行間を空けるタグであると説明しましたが、<P>と</P>で段落をはさむことにより、空行を前後に一行挿入した段落の設定をします。

<P>タグを</P>タグと組み合わせて使うときには、ALIGNオプションを付けることによって、左右および中央揃えの設定ができます。

<P>タグを使って左右及び中央揃えの設定をすると、必ず前後が一行空きます。それを行わずに段落の左右及び中央揃えの設定だけをするのが<DIV>タグです。

<P ALIGN=“RIGHT”>
夜になってからこの作業をしています。<BR>
なかなか作業が進まないため、寝不足になることがよくあります。<BR>
パソコンはほどほどにしましょう。</P>

夜になってからこの作業をしています。
なかなか作業が進まないため、寝不足になることがよくあります。
パソコンはほどほどにしましょう。

<P ALIGN=“CENTER”>
夜になってからこの作業をしています。<BR>
なかなか作業が進まないため、寝不足になることがよくあります。<BR>
パソコンはほどほどにしましょう。</P>

夜になってからこの作業をしています。
なかなか作業が進まないため、寝不足になることがよくあります。
パソコンはほどほどにしましょう。


文章のブロックをつくるタグ

使用するタグ:<BLOCKQUOTE>

指定された文章の段落全体を前後の文章から独立させるタグです。自動的にインデントも行われ、さらにブラウザの右端からも空きをつくります。その段落だけが文章の中で浮いているように見えます。人の文章を引用したり、何か特別に注意を引かせたい時に使います。

箇条書きも自動的に作ってくれる


UP

使用するタグ:<UL><OL><LI>

<UL><OL>タグは、箇条書き(リスト)を作成するときに使います。いくつかの項目を並べて記述する時に便利です。

<OL>は箇条書き項目に番号が順番につきます。<UL>は箇条書き項目に番号はつかず、ブリットが項目ごとに表示されます。<UL>または<OL>ではさんだ各項目に、それぞれ<LI>を付けて箇条書きする項目を定義します。</LI>はいりません。

リストタグは何重にもネスティングして、何階層にもわたる複雑な箇条書きリストを作成することができます。

学校紹介

  1. 沿革 
  2. 学校行事
    1. 遠足   
    2. 浜高祭   
    3. マラソン大会  
  3. 教育課程
    1. 数学   
    2. 英語   
    3. 国語  
  4. 部活動
    1. 文化
    2. 体育
      1. テニス
      2. 卓球
      3. バレー

インデントした文章・定義型リスト


使用するタグ:<DL><DT><DD>

<DL>タグは用語や項目を説明するときに便利なタグです。前後のスペースを開ける機能はありませんし、箇条書き番号も付きません。あくまで本文の一部として使うのが前提です。

<DL><DT>三角形の合同
<DD>二辺とその間の角が等しい。一辺とその両端の角が等しい。
<DT>三角形の相似
<DD>二つの角が等しい。三辺の比が等しい
</DL>

三角形の合同
二辺とその間の角が等しい。一辺とその両端の角が等しい。
三角形の相似
二つの角が等しい。三辺の比が等しい

<DL COMPACT>タグはタグを拡張したもので、<DT>と<DD>で指定された文字を同じ行に表示させる機能があります。ただし、タグで指定した文字が長すぎると、<DL>タグと同じになってしまいます。

<DL COMPACT ><DT>三角形の合同
<DD>二辺とその間の角が等しい。一辺とその両端の角が等しい。
<DT>三角形の相似
<DD>二つの角が等しい。三辺の比が等しい。
</DL>

三角形の合同
二辺とその間の角が等しい。一辺とその両端の角が等しい。
相似
二つの角が等しい。
合同
二辺とその間の角が等しい。

うまく表示されません。


背景の色や文字の色を変える


使用するタグ:<BGCOLOR>

<BODY>タグと組み合わせて、<BODY BGCOLOR>と使いますので一回だけしか指定できません。背景の指定以外に、本文テキスト<TEXT>、ホットリンク文字<LINK>、そしてリンクを利用したあと変化する色指定<VLINK>などができます。色は6桁の16進数で表します。

  赤 #FF0000      白 #FFFFFF

  緑 #00FF00      黒 #000000

  青 #0000FF

<BODY BGCOLOR=“#FFFFFF” TEXT=“#000000”>と使います。


罫線や表組で表現力をアップしよう


UP

罫線を引く


使用するタグ:<HR>

オプション 

SIZE= 罫線の太さを指定します。1から100までの整数。

WIDTH= 線の長さを指定します。幅は画面の画素数か、または表示されたページ幅対比の%のどちらかを使います。

ALIGN= “RIGHT”“CENTER”“LEFT”

<HR NOSHADE>をつけると、溝がなくなりただの黒い線になります。

<HR SIZE=1>


<HR SIZE=10>


<HR SIZE=50>


<HR NOSHADE SIZE=10>


<HR SIZE=10 WIDTH=50>


<HR SIZE=10 WIDTH=100>


<HR WISIZE=10 DTH=30%>


<HR SIZE=10 WIDTH=50%>


<HR SIZE=10 WIDTH=250 ALIGN=“RIGHT”>


表の作成

エクセルの表をHTML文書に変換したものです
見本

簡単な表組を入れて見やすい文章にする

使用するタグ:<TABLE><TD><TR>

 これから出てくる表組で使うタグはすべて<TABLE></TABLE>の中に入っていなければなりません。このタグは「表組するよ」という宣言みたいなものです。

<TD>タグは表組の列を作るためのタグ

<TR>タグは行を作るためのタグです

氏名中村重律
住所天川町
担当教科数学

 <TABLE><TR><TD>氏名</TD><TD>中村重律</TD></TR>

        <TR><TD>住所</TD><TD>天川町</TD></TR>

        <TR><TD>担当教科</TD><TD>数学</TD></TR>

</TABLE>

<TABLE BORDER><TABLE BORDER=5>で枠線を付けることができます。

氏名中村重律
住所天川町
担当教科数学

氏名中村重律
住所天川町
担当教科数学


UP