ホームページ作成・素材

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

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

全て表示する >

HTMLの基礎 Vol.40 小さなフォント・大きなフォント(small・big)

2005/04/01

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

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

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

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

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

   1.テキストをひと回り小さく表示する <small>

   2.テキストをひと回り大きく表示する <big>

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


  過ごし易くなってきたのは良いのですが、もうすぐ私の大嫌いな虫が少し
  ずつ出てくるようになる季節でもあります。寒いのは辛いですが、虫もそ
  れに匹敵・・いやそれ以上に私にとっては怖いものです。

  最近は残り少ないタグを、順序など全く気にせずに穴埋め式のように紹介
  しているような気がするのですが、今回は説明など不要だと思われる位単
  純なタグです。

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


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


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


1.テキストをひと回り小さく表示する <small>


  <small>〜</small>の間に記述された文字は、文字の基準の大きさよりも
  一回り小さく表示されます。また、<small>は入れ子にする事もできます
  。


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


 ■あいうえ<small>お</small>かきくけこ

  上記の例では、<small>〜</small>に囲まれた「お」は、その他の文字列
  よりも小さく表示されます。また<small>は以下のように使用する事も可
  能です。


 ■あい<small>うえ<small>お</small>かき</small>くけこ

  このように、<small>〜</small>の中にさらに<small>を入れ子にして使用
  する事もできます。この場合、内側に設定された<small>ほど小さく表示
  される事になります。


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


2.テキストをひと回り大きく表示する <big>


  <small>〜<small>が文字を基準の大きさよりも一回り小さく表示させるの
  に対し、<big>〜</big>の間に記述された文字列は基準の大きさよりも大
  きく表示されます。


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


 ■あいうえ<big>お</big>かきくけこ

  上記の例では、<big>〜</big>に囲まれた「お」は、その他の文字列より
  も大きく表示されます。また<big>は以下のように使用する事も可能です。


 ■あい<big>うえ<big>お</big>かき</big>くけこ

  このように、<big>〜</big>の中にさらに<big>を入れ子にして使用する事
  もできます。この場合、内側に設定された<big>ほど大きく表示される事
  になります。とても簡単ですね。


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


  それでは、いつもと同じ手順で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>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="http://ykr.main.jp/html/sam/sam.css"
 type="text/css">
</head>

<body>
<h1>小さな文字と大きな文字</h1>
<h2>小さく表示</h2>
<p>
文字を<small>小さくさらに<small>小さく</small></small>表示させます。
</p>
<hr>
<h2>大きな文字</h2>
<p>
文字を<big>大きくさらに<big>大きく</big></big>表示させます。
</p>
<hr>
</body>
</html>


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


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

  今回は説明する必要がないくらい単純なので説明は書きません。


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


来週は・・・

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

   1.略語2 <abbr>

   2.スタイルシート等の設定に使用するタグ <span>

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

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


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


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

  少しずつ進めているはずのサイトのリニューアル作業ですが、本当に亀
  の様なスピードで進んでいます。このままでは埒が明かないのでどこか
  で睡眠を削ってやらなきゃならないかな・・と考えています。

  内容に関しては、メルマガで紹介した内容のものを大幅に掲載しようか
  などと考えているのですが、レイアウトを少し変えた方が良いと思い、
  そうなると始めから作成するのと同じなので、手間取っているのです。
  一体いつになるのでしょうか・・

  さて、次回紹介する<abbr>は、かなり前に紹介した<acronym>に関連した
  タグです。(略語の意味を持ちます)<acronym>のすぐ後に<abbr>を・・
  と思っていたのになぜこんなに間が開いてしまったのか自分でも良くわ
  かりません。というか忘れてました。

  というわけで次回のメルマガも宜しくお願いいたします。


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

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

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

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

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

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


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

・YKR GALLERY   http://ykr414.net/
         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!: - 点   

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

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

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

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

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