ホームページ作成・素材

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

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

全て表示する >

HTMLの基礎 Vol.41 略語・スタイルシートの設定等に使用するタグ(abbr・span)

2005/04/08

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

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

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

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

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

   1.略語2 <abbr>

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

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


  あっという間に1週間が過ぎ、またメルマガの日です。最近本当に時間
  が過ぎるのが早く感じられ、1週間に一回というよりも3〜4日に一回
  はメルマガを書いているような感覚に陥っています。

  さて、今回は上記の2つ「abbr」と「span」を紹介します。「abbr」の
  方はもっと早くに紹介するつもりだったのですが、すっかり忘れており、
  こんなに後になってしまいました。

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


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


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


1.略語2 <abbr>


  <abbr>〜<abbr>の間には、略語を記述します。<abbr>のtitle属性には、
  <abbr>の間に記述された文字列が何の略語かを記述(フルスペルを記述)
  します。

  以前紹介した<acronym>というタグも略語を明示すると説明しました。
  では、この<abbr>と<acronym>の違いは何なのでしょうか。
  これらについては、色々言われてきました。(<abbr>は略語一般で、
  <acronym>は頭字語を示すもの、等)しかしそれほど細かく拘ってこれら
  のタグを使い分けている例を私は見た事がありませんし、そこまでする
  必要は無いと思います。(ページを見る人々が気にするとは思えません)
  何の省略語なのか、意味がわかれば良いでしょう。

  あえて言うならば、どちらを使用したら良いのかわからない時は<abbr>
  を使用すれば良いでしょう。


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


 ■<abbr title="World Wide Web">WWW</abbr>

  上記の例では、<abbr>〜</abbr>に囲まれた「WWW」の説明を(何の省略語
  かを)<abbr>のtitle属性で説明しています。


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


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


  <span>〜<span>の間に文字を記述して、個々にスタイルシートを適用さ
  せたい時などに使用します。<span>自体は何も意味を持ちません。

  同様のタグに<div>(以前紹介しました)があります。<div>自体も何も
  意味を持たず、文章等を左・右・中央揃えにしたり、スタイルシートを
  適用させたりするのに使用します。

  <div>が段落に対して使用するのにたいし(ブロック要素)、<span>は
  段落に満たない狭い範囲に対し使用します。(インライン要素)
  非常に便利なタグ達です。

  <span>と同類のタグ<div>を取り上げた面白いページがあります。「う
  〜ん、確かに!」と納得せざるを得ない事が沢山書かれています。時
  間がある方は一度読んでみてください。

  ▼DIV病             管理人:DFJさん
   http://www.fromdfj.net/html/divsyndrome.html


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


 ■あい<span style="color:#ff0000">う</span>えお

  上記の例では、<span>〜</span>の間に記述された「う」にスタイルシー
  トを設定しています。これにより、「あいうえお」の「う」の部分だけが
  赤色に表示されます。


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


  それでは、いつもと同じ手順で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>略語・SPAN</title>
</head>

<body>
<h1>略語・SPAN</h1>
<h2>略語</h2>
<p>
<a href="http://ykr414.com/xml/">
<abbr title="eXtensible Markup Language">XML</abbr>
</a><br>
<a href="http://ykr414.com/css/">
<abbr title="Cascading Style Sheet">CSS</abbr>
</a>
</p>
<p>
▲姉妹サイトです。また機会があれば訪れてみてくださいね。
</p>
<hr>
<h2>SPAN</h2>
<p>
<span style="color:#ff0000">S</span>
<span style="color:#00ff00">P</span>
<span style="color:#0000ff">A</span>
<span style="color:#ffcc33">N</span>
<br>
こんな風にも使えます。
</p>
<hr>
</body>
</html>


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


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


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


 ■<abbr title="eXtensible Markup Language">XML</abbr>
 ■<abbr title="Cascading Style Sheet">CSS</abbr>


  上記上側のソースは「XML」のフルスペルをtitle属性により、「eXtensible
   Markup Language」であると説明しています。
  下側のソースは「CSS」のフルスペルをtitle属性により、「Cascading 
  Style Sheet」であると説明しています。


 ■<span style="color:#ff0000">S</span>
  <span style="color:#00ff00">P</span>
  <span style="color:#0000ff">A</span>
  <span style="color:#ffcc33">N</span>


  文字の一つ一つに文字色を指定するスタイルーシートを設定し、色を変
  えて表示させています。<span>はインライン要素に適用させます。


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


来週は・・・

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

   1.定義(説明)する用語を明示 <dfn>

   2.スタイルシートを記述する <style>

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

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


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


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

  超寝不足です。しかもリニューアル作業もあんまり進んでいません。し
  かし全体の構成は出来ており、後は内容を記述してファイルを増やして
  いくだけなので気は楽です。

  サイトのトップページに「リニューアルします」と書いたのは良いので
  すが、自分を奮い立たせる為にした事が自分の首を絞めています。
  言ったからには早くしたいです。(最低でも一日1ページは作成!)

  さて、来週紹介するタグは<dfn>と<style>です。<style>は使用しますが
  <dfn>は殆ど使用した事がありません。
  というわけで(どういうわけでしょう)次回のメルマガも宜しくお願い
  いたします。


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

■■■「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!: - 点   

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

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

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

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

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