トップ > インターネット > ホームページ作成・素材 > HTMLの基礎−タグを覚えてウェブページを作ろう!−

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

RSS


メルマガの登録・解除

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。



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

発行日:4/8

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

    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    掲載記事の無断転載を禁じます
*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

最新の記事

ブックマークに登録する

TwitterでつぶやくLismeトピックスに追加するdel.icio.usに追加Buzzurlにブックマークニフティクリップに追加Yahoo!ブックマークに登録記事をEvernoteへクリップ
My Yahoo!に追加Add to Google

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

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。


この記事へのコメント

コメントを書く


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

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

  1. コメントはありません。

このメルマガもおすすめ

  1. @(あっと)驚く!エクセル好きルアップ  

    最終発行日:
    2011/05/26
    読者数:
    4068人

    エクセル(Excel)の基礎から裏ワザまで... D-UP発行のマガジンは、1問1答の形式、詳細な解説付きで配信。さらに連動した懸賞サービスもあり、スキルとプレゼントを同時にゲット。映画情報もあるよ

  2. これ知ってます?Wordの小ワザ&便利ワザ

    最終発行日:
    2011/05/26
    読者数:
    4681人

    D-UPが送る、ほほー!っと納得ワード(Word)の小ワザ&便利ワザをクイズ形式で楽しく学んでいきます。知ってて損することはありません。あなたの文章にアクセントをつけてみませんか?懸賞のチャンスもWでお得。

  3. 全部フリーソフト!!

    最終発行日:
    2014/02/26
    読者数:
    4880人

    ネット上にはこんなに便利なソフトがいっぱい。仕事にも、遊びにも、あると絶対にお得で楽しいソフトを1つずつご紹介します。

  4. 高橋浩子の日本一“お気楽”なパソコンマガジン

    最終発行日:
    2017/05/25
    読者数:
    1130人

    「クスッと笑えてタメになる」をモットーとするテクニカルライター高橋浩子が魂を込めてお届けする週刊メルマガ。パソコン講座を中心に、便利ネタやおすすめサイトもご紹介。とにもかくにも、“お気楽”に楽しめる異色のエンターテイメントマガジンである。

  5. C#プログラミングレッスン

    最終発行日:
    2017/03/04
    読者数:
    972人

    C#での .NETプログラミングを易しく丁寧に解説するメールマガジンです。「C#プログラミング・レッスン」で、.NETプログラミングをマスターしましょう。

発行者プロフィール

過去の発行記事