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

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

RSS


メルマガの登録・解除

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



HTMLの基礎 Vol.42 定義(説明)する用語を明示・スタイルシートを記述(dfn・style)

発行日:4/15

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

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

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

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

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

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

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

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


  すっかり暖かくなり、日中は汗ばむ位の陽気になりました。皆さんそう
  だと思いますが、春は忙しい時期でもあるので、私は余り好きではあり
  ません。

  さて、今回紹介するタグは<dfn>と<style>です。前回も少し書きました
  が、私は<style>はよく使用しますが、<dfn>は殆ど使用した事がありま
  せん。

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


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


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


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


  文書中で語句説明を行う際に、その説明(定義)する用語を<dfn>〜</dfn>
  の間に記述します。<dfn>〜</dfn>の間に記述された語句は、定義する用語
  だという事が明示されます。

  その文書中に複数回定義する語句が出てくる時は、通常一番始めのものだ
  け<dfn>〜</dfn>で囲みます。


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


 ■ウェブページを作成するのに使用する言語、それを<dfn>タグ</dfn>と呼
  びます。

  上記の例では、<dfn>〜</dfn>に囲まれた「タグ」が定義する用語である
  事が示されています。この<dfn>〜</dfn>の間に記述された文字列は、
  斜体や太字などブラウザの種類によって表示は異なります。


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


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


  <style>はスタイルシートを記述する為のタグです。スタイルシートの設
  定方法には複数あり、<link>を利用して外部スタイルシートを読み込む
  方法、タグに直接「style属性」でスタイルを設定する方法、そしてこれ
  から説明する<style>〜</style>の間にスタイルを記述する方法がありま
  す。

  <style>要素は<head>〜</head>の間に書き込みます。また、<style>〜
  </style>の間にスタイルを記述する際にはスタイルシート全体を <!--
  と --> で囲みます。ブラウザの種類やバージョン等によっては、スタ
  イルシートに対応していない物があり、スタイルシート全体をコメント
  アウトし、対応していないブラウザにコメントとして認識させる事で、
  意図しない動作を引き起こす事を防ぎます。詳しくは以下の例をご覧下
  さい。


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


 ■<head>
  
  ・・メタ情報やタイトルなどを記述・・
  
  <style>
  <!--
  body {background-color:#000000;
   font-size:12px}
  -->
  </style>
  </head>


  <head>〜</head>の間に<style>を使用してスタイルシートを記述してい
  ます。スタイルシートの内容は<!-- -->でコメントアウトします。

  上記のスタイルシートは「body」に対してスタイルを指定しており、ペ
  ージの背景色を「#000000(黒)」に、文字サイズを12ピクセルに設定
  しています。


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


  それでは、いつもと同じ手順で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">
<style>
<!--
big {font-size:30px;
font-weight:900;
color:#009900}
-->
</style>
</head>

<body>
<h1>定義する用語・スタイルシートの記述</h1>
<h2>定義する用語</h2>
<p>
ウェブページのレイアウトは<dfn>スタイルシート</dfn>で設定するのが好ま
しいとされています。スタイルシートとはページの見栄え(レイアウト)を
定義する為の技術です。
</p>
<hr>
<h2>スタイルシートの記述</h2>
<p>
このページのヘッダ部分にスタイルシートを記述しています。
「big」要素に対してフォントサイズを30ピクセル、太字・文字色は緑色に
設定しているので、「big」に囲まれた文字列は設定されたとおりに表示され
ます。以下の文字列に「big」を設定してみました。
</p>
<p>
<big>スタイルを設定しています。</big>
</p>
<p>
なお、設定するプロパティにより対応していないブラウザもあるので、スタイ
ルシートを記述する際は注意して下さい。
</p>
<hr>
</body>
</html>


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


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


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


 ■<style>
  <!--
  big {font-size:30px;
   font-weight:900;
   color:#009900}
  -->
  </style>


  <style>〜</style>の間にスタイルシートを記述しています。スタイルシ
  ートの内容全体を上記のように <!-- --> で囲み、コメントアウトし
  ます。スタイルシートについては専門のサイトをご参照ください。
  なお、スタイルシートを使用する際はヘッダ内にメタ情報を記述するよう
  にして下さい。このスタイルの設定により、body内に記述した

   <big>スタイルを設定しています。</big>

  という<big>〜</big>の間に記述された文字列は、スタイルシートに記述
  した通りに表示されます。なお、ブラウザのバージョン等によっては、
  設定した通りの表示にならない事もあります。



 ■ウェブページのレイアウトは<dfn>スタイルシート</dfn>で設定するのが
  好ましいとされています。スタイルシートとはページの見栄え(レイア
  ウト)を定義する為の技術です。


  「スタイルシート」という語句が、説明されているという事を示していま
  す。定義される語句が文書中に複数出てくる場合は、通常一番始めに出て
  くる語句を<dfn>〜</dfn>の間に記述します。


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


来週は・・・

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

   1.スクリプトを記述する <script>

   2.スクリプト未対応のブラウザへの配慮 <style>

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

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


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


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

  先日、本当に久しぶりの休みで遊びに行きました。とてもよく晴れてい
  て暖かかったので、ちょうど良かったと喜んでいたのですが、少し風が
  きつかったので多分花粉の飛散量が多かったのだと思います。しばらく
  すると、目の痒みとくしゃみが止まらなくなってしまいました。

  帰ってからも花粉症の症状がしばらく続き、とても辛かったです。
  ちなみに、仕事も忙しく、しばらくあまり外に出ない状態が続いたので
  今は全然元気です。しかし早くこの季節が過ぎ去ってほしいものですね。

  さて、来週紹介するタグは<script>と<noscript>です。
  では次回のメルマガもそうぞ宜しくお願いいたします。


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

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

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

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

■■■「伸び縮みマークアップ言語 XML」
■   http://ykr414.com/xml/
■   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/06/22
    読者数:
    1130人

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

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

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

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

発行者プロフィール

過去の発行記事