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

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

RSS


メルマガの登録・解除

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



HTMLの基礎 Vol.38 文書を参照・変数である事を明示(link・var)

発行日:3/18

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

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

      2005/03/18(Fri) Vol.38       執筆:ykr
              http://ykr.main.jp/html/index.html

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

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

   1.文書を参照 <link>

   2.変数である事を示す <var>

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


  一気に暖かくなり過ごし易くなりましたが、花粉症の方はとても辛そう
  です。今年の花粉の飛散量は多いといいますが、私は殆ど実感していま
  せん。まだこれからなのかもしれませんが・・

  さて今回は<link>と<var>を紹介します。<link>はよく使用しますが(と
  いうか、私は必ず使用します。)<var>は殆ど使用する事はないのではな
  いかと思います。

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


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


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


1.文書を参照 <link>


  <link>タグのhref属性にスタイルシートの文書名を指定することにより、
  外部のスタイルシートを参照することができます。<link>は<head>
  〜</head>間に記述します。

  その他にも他の文書との関連性を表す為に使用する事もあります。


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


 ■<head>
  <link rel="stylesheet" href="sam.css" type="text/css">
  </head>


  上記の例では<head>〜</head>間に<link>を記述して、外部のスタイルシ
  ートをHTML文書から参照しています。属性については以下の通り
  です。

   ▼<link>の属性

    ・rel  ・・参照する文書との関係を記述します。スタイルシート
          を読み込むので「stylesheet」です。
    ・href ・・参照する文書のURLを記述します。
    ・type ・・参照する文書のタイプを記述します。


  スタイルシートについて詳しく知りたい方は姉妹サイト「全部丸ごとス
  タイルシート」をご参照ください。
  ▼全部丸ごとスタイルシート「http://ykr414.com/css/

  なお、スタイルシートを文書で使用する際はメタ情報<meta>を記述した
  方が良いでしょう。<meta>はブラウザなどに、文書の情報を知らせる為
  のタグです。スタイルシートの場合、<head></head>間に以下のように
  記述します。

  <meta http-equiv="Content-Style-Type" content="text/css">


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


2.変数である事を示す <var>


  <var>〜</var>間に記述された文字列は変数名等を明示する為に用いま
  す。であることを示します。ブラウザによって表示は異なりますが、斜
  体で表示されるなどして普通のテキストと区別されます。


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


  ■値を変数「<var>samp</var>」に代入します。


  上記のsampはプログラムコードの変数名なので、<var>〜</var>の間に
  記述して、変数である事を示しています。大半のブラウザでは、斜体で
  表示されるなどします。しかし、<var>はあまり使用されることはない
  ようです。


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


  それでは、いつもと同じ手順で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>
head内にlinkタグを記述して、外部スタイルシートを参照しています。
上記の「文章を参照(赤色で表示されます)」という見出しや「変数である事
を明示」という文字列は外部スタイルシートを参照する事によって赤色に表示
されています。linkタグをhead内から省けば、文字は赤色で表示されなくなり
ます。
</p>
<hr>
<h2>変数である事を明示</h2>
<p>
はじめに変数<var>Str</var>を宣言しています。
</p>
<hr>
</body>
</html>


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


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


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


 ■<link rel="stylesheet" href="http://ykr.main.jp/html/sam/sam.css"
  type="text/css">


  上記のソースはメールの表示での都合上改行していますが、実際には改行
  させないで記述して下さい。この<link>ではウェブ上に置かれたスタイル
  シートを参照しています。(私が置いたものです。一定期間が経過すれば
  削除します。)

  このスタイルシートをHTML文書から参照する事により、スタイルシー
  トに書かれた h2 {color:#cc0000} が反映され、文書内の見出し<h2>
  〜</h2>間に書かれた文字列は赤色で表示されます。


 ■はじめに変数<var>Str</var>を宣言しています。


  説明するまでもないですが、変数名を<var>〜</var>間に記述して、変数
  名である事を明示しています。多くのブラウザでは斜体で表示されます。


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


来週は・・・

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

   1.アンダーライン <u>

   2.プログラム出力結果のサンプルである事を示す <samp>

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

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


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


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

  なんだかメルマガ発刊初期の頃、余り考えずにタグの紹介をしてきた為、
  紹介する順序がめちゃくちゃである事に途中で気がつきました。特に
  <link>は始めの方で紹介した方が良かったかなんて思います。

  サイトのリニューアルをしようと思いつつ、中々取り掛かる時間がない
  ので自分を奮い立たせる意味もあり、トップページにリニューアル作業
  を進めている旨、記載したのですがあまり進んでいません。
  というか、一から作った方が早いかな・・なんて事も考えています。ど
  ちらにしろ気長に進めるしかないです。

  次回紹介するタグも非常に簡単なタグです。
  それでは、また次回も宜しくお願いいたします。


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

■■■「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
    読者数:
    4680人

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

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

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

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

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

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

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

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

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

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

発行者プロフィール

過去の発行記事