ホームページ作成・素材

HTMLの基礎−タグを覚えてウェブページを作ろう!−

ホームページはHTMLタグの知識とテキストエディタさえあれば作成できます。またタグを理解していればサイトの細かい部分まで手が届きます。でも、わからない・・そんな方にお送りする初心者向けのHTMLタグ講座「HTMLの基礎」。

全て表示する >

HTMLの基礎 Vol.44 等幅フォント・ボタンを表示(tt・button)

2005/04/29

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

    HTMLの基礎 −タグを覚えてウェブページを作ろう!−

      2005/04/29(Fri) Vol.44       執筆:ykr
              http://ykr.main.jp/html/index.html

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

   1.等幅フォントで表示 <tt>

   2.ボタンを表示 <button>

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   


  非常に暑いです。というか、じっとしてればそうでもないのですが、少し
  動くととたんに汗が出てきます。まだ4月だというのに、去年の今頃もこ
  の位の気温だったんでしょうか?

  さて今回は等幅フォントで表示させる<tt>とボタンを表示する<button>を
  紹介します。

  それでは今回も最後までお付き合い宜しくお願いいたしますね。


  ※注意  HTMLのバージョンは4.01です。
       発刊時点で非推奨とされてるものも掲載しています。
       表示確認しているブラウザは、WinIE6、WinNN7、MacIE5.2
       MacNN7です。その他のブラウザでの表示は未確認ですので
       意図したとおりにならないことがあります。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


1.等幅フォントで表示 <tt>


  <tt>〜</tt>の間に記述した文字列を、当幅フォントで表示します。この
  タグは非推奨要素ではないのですが、見栄えの定義はスタイルシートで
  定義する事が推奨されています。


----------------------------------------------------------------------


 ■あいうえお<br>
  <tt>あいうえお</tt>

  上記の場合、上に書かれた文字列は普通に表示されますが、下に記述した
  <tt>〜</tt>の間の文字列は等幅フォントで表示されます。これをスタイ
  ルシートで行う場合、font-familyを使用します。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


2.ボタンを表示 <button>


  <button>を使用すると、ボタンを表示させる事ができます。<input>でも
  ボタンを表示させる事ができましたが、<button>では<button>〜
  <button>の間にある画像やテキストをボタンに設定したりする事も可能で
  す。


----------------------------------------------------------------------


 ■<button type="ボタンの種類">これはボタン</button>

  上記の例の場合、<button>〜</button>の間に記述された「これはボタン」
  という文字列がボタンに表示されます。<button>に設定するtype属性の値
  には以下のものがあります。

  ▼type属性の値

   ・submit ・・ 送信ボタン
   ・reset  ・・ リセットボタン
   ・button ・・ 普通のボタン(デフォルト)


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


  それでは、いつもと同じ手順でHTML文書を作成して表示を確かめて
  みましょう。面倒な方は前回の続きに上書きしても良いでしょう。


----------------------------------------------------------------------


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title>等幅フォント・ボタンの表示</title>
</head>

<body>
<h1>等幅フォント・ボタンの表示</h1>
<hr>
<h2>等幅フォント</h2>
<p>
あいうえお<br>
<tt>あいうえお</tt>
</p>
<hr>
<h2>ボタンの表示</h2>
<p>
<button type="button">
<img src="http://ykr.main.jp/html/img/title.gif">
</button>
</p>
</body>
</html>


----------------------------------------------------------------------


  さて、記述できたらファイルを保存します。
  前回のファイルに追加したという方は、上書き保存か名前をつけて、新
  しく保存して下さい。拡張子は「.html」です。


----------------------------------------------------------------------


 ■あいうえお<br>
  <tt>あいうえお</tt>

  <tt>の説明でも書いたように、上の文字列は普通に表示、下側の<tt>〜
  </tt>の間にある文字列は等幅フォントで表示されます。


 ■<button type="button">
  <img src="http://ykr.main.jp/html/img/title.gif">
  </button>

  ボタンを表示しています。<button>の間にある画像はボタン上に表示され
  て、ボタンとして使用することができます。しかしこの例ではボタンは表
  示されますが、押しても何も起こりません。

  通常はjavascript等を組み合わせて使用したりします。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


来週は・・・

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

   1.ディレクトリのリストを表示 <dir>

   2.メニューのリストを表示 <menu>

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

(予告なく変更する事があります)


■ 雑記 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


  今回も最後まで付き合ってくださった方、お疲れ様でした。

  私は余りゴールデンウィークは関係ないので、大型の連休に入ったことを
  意識していませんでした。で、ネットでの買い物の振込みをうっかり忘れ
  ており、さっき気付きました。私的には連休はあまり嬉しくないです・・

  それにしても暑いですね。昨晩も寝苦しくて目が覚めました。今年も猛暑
  になるのでしょうか?熱中症などに気をつけなくてはいけません。

  さて、次回は<dir>と<menu>を紹介します。
  では次回のメルマガもどうぞ宜しくお願いいたしますね。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

■■■「HTMLの基礎」姉妹サイトです。よろしくお願いします。■■■■

■■■「全部まるごとスタイルシート」
■   http://ykr414.com/css/
■   スタイルシート辞典です。プロパティごと、または目的ごとに引
■   け、ブラウザの対応状況なども掲載しています。
■   HTMLに加える事で、より細かいレイアウトの指定が可能に。
■   コピーペーストするだけで利用できるテンプレートのページも。

■■■「コマンドプロンプトを使ってみよう!」
■   http://ykr414.com/dos/
■   コマンドプロンプトとは何かから始まり、バッチファイルの作成
■   法や、コマンド別・目的別に引けるコマンド辞典。
■   初心者でもわかるよう細かく説明。

■■■「伸び縮みマークアップ言語 XML」
■   http://ykr414.com/xml/
■   SGMLのサブセットであるXMLは、ネット上で扱うデータを
■   記述するためのデータフォーマットで、柔軟性のある言語構造を
■   持っており、プログラムで自在にデータを情報処理できます。そ
■   のXMLを実際に文書を作成しながら解説。随時追加更新。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


・MAKERS     http://ykr414.net/
         ダイエットグッズ、美味しいもの、かわいいもの
         セレクトショップ。ちょっと珍しいグッズ・便利な
         サービスなどの情報も掲載。
         コラムなどのコンテンツもあります。

・YKR GALLERY   http://ykr414.com/gallery/
         CG、また実際に描いた絵を紹介するギャラリー。
         趣味で運営の為かなり更新が遅め。


*――*――*――*――*――*――*――*――*――*――*――*――*――*――*
  Auther       ykr
  Mail         ykr414@yahoo.co.jp
  URL          http://ykr.main.jp/html/index.html
  Copyright    (C)2004 ykr414. All rights reserved.
  Attention    掲載記事の無断転載を禁じます
*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

規約に同意してこのメルマガに登録/解除する

メルマガ情報

創刊日:2004-06-29  
最終発行日:  
発行周期:週間  
Score!: - 点   

コメント一覧コメントを書く

この記事にコメントを書く

上の画像で表示されている文字を半角英数で入力してください。

※コメントの内容はこのページに公開されます。発行者さんだけが閲覧できるものではありません。 コメントの投稿時は投稿者規約への同意が必要です。

  • コメントはありません。