<A Name="#アンカー(錨)name(test)">

タグの基本 - HTML -




タグを覚えてみよう
（第１章 レイアウト〜ＢＧＭ ）

[ レイアウト ]

改行 <Br>
  • 改行する


    • あいうえおかきくけこさしすせそたちつてとなにぬねの
    はひふへほまみむめもやゆよらりるれろわをん
    1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

    あいうえおかきくけこさしすせそたちつてとなにぬねの<Br>
    はひふへほまみむめもやゆよらりるれろわをん<Br>
    1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ


    改行禁止 <NoBr> 〜 </NoBr>
  • 改行を禁止する


    • あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

    <NoBr>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ</NoBr>

    <NoBr> 〜 </NoBr>で
    自動改行禁止中の文の
    折り返し指定 <WBr>
  • ※<Br>と違い、ブラウザの表示範囲があれば、折り返さない場合があります。


    • あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

    <NoBr>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん1234567890ABCDEF<WBr>GHIJKLMNOPQRSTUVWXYZ</NoBr>


    段落 <P>
  • １行空けて改行する
  • ※イメージとしては、<Br>２つ分(って感じ)


    • あいうえおかきくけこさしすせそたちつてとなにぬねの

    はひふへほまみむめもやゆよらりるれろわをん

    1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

    あいうえおかきくけこさしすせそたちつてとなにぬねの<P>

    はひふへほまみむめもやゆよらりるれろわをん<P>

    1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ


    １行空けて改行し(段落)配置指定をする <P Align="配置指定"> 〜 </P>

  • 段落 + 配置


    • 段落 + 配置（左寄せ）

    段落 + 配置（中央）

    段落 + 配置（右寄せ）


    <P Align="Left"> 段落 + 配置（左寄せ）</P>

    <P Align="Center"> 段落 + 配置（中央）</P>

    <P Align="Right"> 段落 + 配置（右寄せ）</P>



    配置指定をする
    <Div Align="配置指定"> 〜 </Div>
  • タグで囲まれた部分を、指定した配置に揃えます。


    • 配置（左寄せ）
    配置（中央）
    配置（右寄せ）

    <Div Align="Left"> 配置（左寄せ）</Div>
    <Div Align="Center"> 配置（中央）</Div>
    <Div Align="Right"> 配置（右寄せ）</Div>

    中央配置指定をする
    <Center> 〜 </Center>
  • タグで囲まれた部分を、中央配置に揃えます。


    • 配置（中央）

    <Center> 配置（中央）</Center>


    そのまま表示 <Pre> 〜 </Pre>
  • そのまま表示


    • そのまま表示です
       ☆
       ▲
      ▲▲
     ▲▲▲
       ■
     □□□
     □□□
    <Pre>
    そのまま表示です
       ☆
       ▲
      ▲▲
     ▲▲▲
       ■
     □□□
     □□□
    </Pre>


    引用文表示
    <Blockquote> 〜 </Blockquote>
  • 引用文を表示する時に使用します。


    • あいうえおかきくけこさしすせそたちつてとなにぬねの
    はひふへほまみむめもやゆよらりるれろわをん
    （五十音順です。）

    あいうえおかきくけこさしすせそたちつてとなにぬねの<Br>
    はひふへほまみむめもやゆよらりるれろわをん<Br>
    <Blockquote>（五十音順です。）</Blockquote>


    文責表示
    <Address> 〜 </Address>
  • 氏名等を表示。
  • ※一般的には文章の一番最後に作者の氏名やメールアドレス等を記す為に使用。


    • 小龍 ／ http://dengon.net/bbs/egoist0622

    <Address>小龍 ／ http://dengon.net/bbs/egoist0622 </Address>



    [ フォント ]

    フォントサイズ
    <Font Size="サイズ"> 〜 </Font>
  • 字の大きさ(小)1〜7(大)
  • ※基準(3)をもとに(+)(-)を付けて大きさを決める事もできます。


    • 壱 弐 参 四 五 六 七



    -2(１) -1(２) なし(３) +1(４) +2(５) +3(６) +4(７)



    Styleを使ってサイズ変更
    <Font Style=" font-size:サイズ;"> 〜 </Font>
  • 先程より大きい文字の表示も可能になります。


    • 大
    ※フォントサイズ“600”で表示

    大きめの文字表示
    <Big> 〜 </Big>
  • 大きめの文字を表示します。


    • 大きめ

    小さめの文字表示
    <Small> 〜 </Small>
  • 小さめの文字を表示します。


    • 小さめ

    見出し表示
    <H 文字の大きさ Align="見出し配置"> 〜 </H 文字の大きさ>
  • 文字Size+見出し位置が指定できます。H1(大)〜H6(小)


    • (Left)左見出し

    H1(最大)

    H2

    (Center)中見出し

    H3

    H4

    (Right)右見出し
    H5
    H6(最小)

    太字文字 <B> 〜 </B>

    太字文字

    <B>太字文字</B>


    強調文字 <Strong> 〜 </Strong>

    強調文字

    <Strong>強調文字</Strong>


    斜体文字 <I> 〜 </I>

    斜体文字

    <I>斜体文字</I>


    等幅文字 <Tt> 〜 </Tt>

    等幅文字

    <Tt>等幅文字</Tt>


    下線付き <U> 〜 </U>

    下線付き

    <U>下線付き</U>


    取り消し <S> 〜 </S>

    取り消し

    <S>取り消し</S>


    取り消し <Strike> 〜 </Strike>

    取り消し

    <Strike>取り消し</Strike>


    字上付き <Sup> 〜 </Sup>
    字下付き <Sub> 〜 </Sub>

    1,000,0003
    1,000,000（ｍ）

    1,000,000<Sup>3</Sup><Br>
    1,000,000<Sub>（ｍ）</Sub>


    色の変更
    <Font Color="色指定"> 〜 </Font>

    赤（red)

    <Font Color="#ff0000">赤（red)</Font>


    読み仮名をふる
    <Ruby><Rb>漢字
    <Rt>読み仮名</Ruby>

    燕雀鴻鵠 えんじゃくこうこく





    [ リンク．画像 ]

    リンクを貼る
    <A Href="アドレス">
    文字や画像ファイル </A>
  • 基本形


    • リンクを貼る（基本）：ここからは役に立たない！？ホームページへ飛びます。



  • 別窓表示(Target="_Blank")


    • リンクを貼る（別窓表示）：ここからは役に立たない！？ホームページ（フレーム版）へ飛びます。




    画像を貼る
    <Img Src="画像ファイルのURL">
  • 基本形




    • <Img Src="image/move001.gif">

  • サイズ変更(Width="画像の横サイズ" Height="画像の縦サイズ" )
  • 枠の有無(Border="枠の太さ" )
  • Alt(Alt="テキスト（コメント）" )


    • 小さくも出来ますし、コメントも入れられます。




    画像にリンクを貼る
    <A Href="アドレス">
    <Img Src="画像ファイルのURL"></A>
  • 基本形




    • 画像にリンクを貼る（基本）：
    ここからは ZDNet News へ飛びます。



  • チョット応用




    • 画像にリンクを貼る（チョット応用）：
    ここからは SOFTBANK GAMES へ飛びます。




    その他のリンク方法・他


  • ページでリンク ( <A Href="#アンカー(錨)name"> )→( <A Name="#アンカー(錨)name"> )


    • [ <A Name="#アンカー(錨)name(ここではtest)">へ飛びます。 ]

    <A Href="#test">
    [ <A Name="#アンカー(錨)name(ここではtest)">へ飛びます。 ]</A>

  • Mailリンク ( <A Href="mailto:メールアドレス"> )


    • Ｍａｉｌ( 〜 ←ここには送れません。 〜 ( 架空です ) )

    <A Href="mailto:okuremasen@study.co.jp">
    Ｍａｉｌ( 〜 ←ここには送れません。 〜 ( 架空です ) )</A>


    クライアントサイド
    イメージマップ

  • こんな感じのメニューです。

    • 　実際はレイアウトに飛びます。 　実際はフォントに飛びます。 　実際はホームへ戻ります。 　


  • ゴルフ(実際はレイアウトに飛びます。)


  • テント(実際はフォントに飛びます。)


  • タイトル(実際はホームへ戻ります)


  • マップに使用する画像の指定


    • <Img Src="画像ファイル" Width=画像横Size Height=画像横Size UseMap="#マップ名">
    ↓
  • マップデータ範囲指定

    • <Map Name="マップ名">〜</Map>

  • マップデータエリアの説明
    • （<Map Name="マップ名">〜</Map>）
    <Area Shape=“エリアのタイプ指定” Coords=“座標”
    Href=“リンク先ＵＲＬ”;もしくは NoHerf（その範囲を解除する時に使用）>

  • <Area>内 属性について


    • [Shape] エリアのタイプ指定
    Rect … 長方形（正方形も含む）
    Poly … 多角形
    Circle … 円
    Default … 領域全て

    [Coords]
    Rect … 左上の始点座標と右下の終点座標
    Coord="始点横座標,始点縦座標,終点横座標,終点縦座標"

    Poly … 拾いたい座標を順に全て拾う。
    Coord="横座標１,縦座標１,横座標２,縦座標２,〜"

    Circle … 円の中心座標と半径
    Coord="横座標,縦座標,半径"

    <Img Src="画像ファイル" Width=画像横Size Height=画像横Size UseMap="#マップ名">
    <Map Name="マップ名">
    <Area Shape="エリアのタイプ指定" Coords="座標"
    Href="リンク先ＵＲＬ" もしくはNoHerf（その範囲を解除する時に使用）>
    </Map>

  • この画像がMENUだとすると…

    • 　レイアウトに飛びます。 　フォントに飛びます。 　ホームへ戻ります。 　

    <Img Src="画像ファイル" Width=画像横Size Height=画像横Size UseMap="#マップ名">
    <Map Name="マップ名">
    <Area Shape="Circle" Coords="a,B,R" Href="リンク先ＵＲＬ" Alt="円">
    <Area Shape="Poly" Coords="b,C d,E a,E " Href="リンク先ＵＲＬ" Alt="三角形(多角形)">
    <Area Shape="Rect" Coords="c,A e,D" Href="リンク先ＵＲＬ" Alt="長方形or正方形">
    </Map>




    [ ＢＧＭ ]

    プレーヤーを立上げ音楽を流す
  • リンクで音楽を流す。<A Href="音楽ファイル">


    • ここを選択すると音楽が流れます。(File：okinawa.mid)
    お聴きの曲はヤマハ(株)から提供されたものです。Copyright(C) YAMAHA CORPORATION. All rights reserved.




    プレーヤーを表示して音楽を流す
  • プレイヤーを表示して音楽を流す。<Embed SRC="音楽ファイル">



    • お聴きの曲はヤマハ(株)から提供されたものです。Copyright(C) YAMAHA CORPORATION. All rights reserved.