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

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

RSS


メルマガの登録・解除

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



HTMLの基礎 Vol.43 スクリプトの記述と未対応ブラウザでの配慮(script・noscript)

発行日:4/22

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

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

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

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

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

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

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

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


  前回のメルマガの次回予告で、「2.スクリプト未対応のブラウザへの配
  慮 <noscript>」の<noscript>が<style>になっていました。申し訳あり
  ません。見直しはいつもするのですが、全然気が付きませんでした。

  さて今回はHTMLでのスクリプトの使用方法について説明します。
  それでは今回も最後までお付き合い宜しくお願いいたしますね。


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


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


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


  <script>〜<script>は、javascript等のスクリプトを記述する為に使用し
  ます。ただ、ブラウザによってスクリプトに対応していない物もあるので
  使用には注意が必要です。

  <script>〜</script>の間にスクリプトを記述します。HTML文書に直
  接記述する方法と、スクリプトの外部ファイルを呼び出して使用する方
  法があります。


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


 ■<script>
  <!--
  document.write('あいうえお');
  //-->
  </script>

  上記は直接HTML文書に書き込む例です。このスクリプトを記述した箇
  所には「あいうえお」と表示されます。なお、ページに直接スクリプトを
  記述する際は、スクリプトの内容を <!-- と //--> で囲ってコメン
  トアウトする必要があります。

  また、以下のように記述して外部のスクリプトファイルを指定する事もで
  きます。


 ■<script src="外部スクリプトファイル名" type="text/javascript">
  </script>

  <script>のsrc属性に外部のファイルのパスを指定します。type属性には
  MINEタイプを指定して下さい。(javascriptの場合、text/javascript)

  javascriptのバージョンを記述するlanguage属性もありますが、非推奨
  とされています。通常はtype属性を使用しておけば問題ないでしょう。

  <script language="JavaScript1.1">
  <!-- ・・略・・

  このようにすると、JavaScript1.1に対応しているブラウザでのみ動作さ
  せる事が出来ます。javascriptの詳しい知識については専門のサイトを
  参照して下さい。


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


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


  <script>を使用する際、スクリプト未対応のブラウザへの対策として
  <noscript>を使用します。スクリプトに対応していないブラウザへ表示さ
  せたい内容を、<noscript>〜</noscript>の間に記述します。

  <noscript>〜<noscript>に間に記述されたスクリプトは、スクリプト対応
  ブラウザでは無視され、スクリプト未対応ブラウザで表示されます。


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


 ■<script type="text/javascript">
  <!--
  document.write('スクリプトに対応しています。');
  //-->
  </script>
  <noscript><p>スクリプト未対応です。</p></noscript>

  上記の例の場合、<script>〜</script>の間に記述されたスクリプトは、
  対応ブラウザで実行され、<noscript>〜</noscript>の間に記述された内
  容はスクリプト未対応のブラウザで表示されます。


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


  それでは、いつもと同じ手順で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-Script-Type" type="text/javascript">
</head>

<body>
<h1>スクリプトの記述と未対応ブラウザでの配慮</h1>
<hr>
<script type="text/javascript">
<!--
a=3;b=6;
document.write('3×6='+a*b);
//-->
</script>
<noscript>
<p>
スクリプトに対応していません。
</p>
</noscript>
</body>
</html>


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


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


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


 ■<script type="text/javascript">
  <!--
  a=3;b=6;
  document.write('3×6='+a*b);
  //-->
  </script>
  <noscript>
  <p>
  スクリプトに対応していません。
  </p>
  </noscript>


  上記の<script>〜</script>の内容はスクリプト対応ブラウザで実行され
  ます。一方<noscript>〜</noscript>の間に記述された内容はスクリプト
  未対応ブラウザでは表示されますが、対応ブラウザでは表示されません。
  <script>〜</script>間のスクリプトが実行されると、ブラウザには

  3×6=18

  と表示されます。


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


来週は・・・

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

   1.等幅フォントで表示 <tt>

   2.ボタンを表示 <button>

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

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


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


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

  伊藤園の「一日分の野菜」という野菜ジュースにはまっています。元々
  トマトジュースは毎日のように飲んでいたのですが、酸味があるので美
  味しいと感じる時とそうでない時がありました。この野菜ジュースの成
  分はレモン以外は全て野菜なのですが、甘味があって美味しいです。
  大体毎日飲んでいます。

  さて、来週紹介するタグは<tt>と<button>です。予定ではあと3回で、
  HTML4.01のタグを全て紹介し終えることになります。(多分)その後
  のことはまだ考えていません。(その前に早くサイトのリニューアル
  を・・)

  では次回のメルマガもどうぞ宜しくお願いいたします。


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

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

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

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

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

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


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

・YKR GALLERY   http://ykr414.com/gallery/
         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
    読者数:
    4069人

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

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

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

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

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

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

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

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

    最終発行日:
    2017/02/25
    読者数:
    1131人

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

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

    最終発行日:
    2017/02/26
    読者数:
    971人

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

発行者プロフィール

過去の発行記事