FC2ブログ
WebBox norijin note
WebBox norijin
Category: スポンサー広告  

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

TOP > スポンサー広告 > HTML5入門:タグの意味と使い方!!文書の基本 vol.2!!

Category: HTML5   Tags: HTML5  meta  style  script  noscript  

HTML5入門:タグの意味と使い方!!文書の基本 vol.2!!

HTML5入門:タグの意味と使い方!!

前回の「HTML5入門:タグの意味と使い方!!文書の基本 vol.1」にひきつづき、「HTML5入門:タグの意味と使い方!!文書の基本 vol.2」ついて勉強していきたいと思います。興味あるかたはどうぞ...

HTML5:文書情報を表したい(meta,name)


<meta name="★" content="◆">
★=メタデータの名前(description,keywordなど) ◆=name属性対して指定する値
要素解説 meta
カテゴリー メタデータ・コンテンンツ
利用できる場所 charset属性があるか、http-equiv属性の値が「content-type」ではない場合:head要素内/http-equiv属性があるが、その値が「content-type」ではない場合:head要素内、またはhead要素内の子要素であるnoscript要素内/name属性がある場合:メタデータ・コンテンツが期待される場所
コンテンツモデル


 meta要素は、さまざまなメタデータ(HTML文書に関する情報)を表すことのできる要素です。
 meta要素にname属性を指定すると、文書の著者、文書の概要、検索用キーワードなどを表せます。name属性でメタデータの名前を、content属性でその値を指定してください。name属性に指定できる名前と意味は次の通りです。

application-name
 文書がWebアプリケーション用に作られている場合、そのWebアプリケーション名を表します。

HTML5入門:タグの意味と使い方!!description
 文書の概要を表します。この名前を指定すると、content属性に指定した値が検索エンジンなどの検索結果として表示されます。文書の概要やWebページの説明文としてわかりやすい文章を入れましょう。

HTML5入門:タグの意味と使い方!!author
 文書の著者を入れます。

HTML5入門:タグの意味と使い方!!generator
 文書の作成に利用したソフトウェア名を表します。

HTML5入門:タグの意味と使い方!!keyword
 文書の内容に関連のあるキーワードを表します。この名前を指定すると、検索ロボットに提供するキーワードを指定できます。複数のキーワードを入れたいときは、それぞれをカンマ(,)で区切ってください。

サンプルソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文書情報を流したい</title>
<meta name="author" content="norijin">
<meta name="description" content="HTML5のマスターするためにいちから学ぶ">
<meta name="kyewords" content="HTML5,要素,属性,値,タグ">
</head>
<body>
サイトの内容をここに書きます
</body>
</html>


HTML5:初期情報を表したい(meta,equiv)


<meta http-equiv="★" content="◆">
★=キーワード(content-language,content-typeなど)
◆=http-equiv属性に対して指定する値

要素解説 meta
カテゴリー メタデータ・コンテンンツ
利用できる場所 charset属性があるか、http-equiv属性の値が「content-type」ではない場合:head要素内/http-equiv属性があるが、その値が「content-type」ではない場合:head要素内、またはhead要素内の子要素であるnoscript要素内/name属性がある場合:メタデータ・コンテンツが期待される場所
コンテンツモデル


 meta要素にhttp-equiv属性を指定すると、文書のデフォルトの言語やMIMEタイプ、デフォルトのスタイルシートなどを表します。http-equiv属性でキーワードを、content属性でその値を指定してください。http-equiv属性に指定できるキーワードと意味は下記の通りです。

HTML5入門:タグの意味と使い方!!content-language
 文書のデフォルトの言語を指定します。日本語を指定する場合はサンプルソースのようになります。通常はこの属性ではなく、html属性のlang属性を使って言語を指定するようにしてください。

HTML5入門:タグの意味と使い方!!content-type
 文書のMIMEタイプや文字のエンコーディングを指定します。MIMEタイプにtext/html、文字エンコーディングにUTF-8を指定する場合はこのようになります。

<meta http-equiv="content-type" content="text/html;charset=UTF-8">

 HTML5では、新しく追加されたcharset属性で文字エンコーディングを指定できます。

HTML5入門:タグの意味と使い方!!default-style
 デフォルトのスタイルシートを指定します。このキーワードを利用すると、複数の代替えスタイルシートを用意してlink要素で読み込む場合に、どのスタイルシートを優先させるのかを指定できます。content属性に、優先するスタイルシートのtitle属性の値を指定してください。
 下記のサンプルソースでは、meta要素がなければmain.cssとside.cssの両方が適用されますが、meta要素の指定により、main.cssだけがこの文書に適用されます。

HTML5入門:タグの意味と使い方!!refresh
 そのページをリロード(再読み込み)させたり、自動的に他のページへ移動させます。content属性に数字のみを指定すると同じページをリロードし、数字とセミコロン(;)に続けてURLを指定すると、指定した数秒後に指定のURLへ移動します。

<meta http-equiv="refresh" content="10">
<meta http-equiv="refresh" content="10;htttp://www.example.co.jp/info.html">

 1行目の例では、10秒後に同じページをリソースする為、結果として同じページを繰り返し読み込むことになります。
 2行目の例では、10秒後に「http://www.example.co.jp/info.html」へ移動するよう指定しています。WebサイトのURLが変わったときに、ユーザーを自動的に新しいサイトへ誘導する場合などに利用されます。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta http-equiv="content-type" content=text/html;charset=UTF-8>
<title>初期情報を浮オたい</title>
<meta http-equiv="default-style" content="main.css">
<link rel="stylesheet" href="main.css" title="main.css">
<link rel="stylesheet" href="side.css" title="side.css">
</head>
<body>
サイトの内容をここに書きます
</body>
</html>

HTML5:文書の文字エンコーディングを表したい(meta,charset)


<meta charset="★">
★=文字エンコーディング

要素解説 meta
カテゴリー メタデータ・コンテンンツ
利用できる場所 charset属性があるか、http-equiv属性の値が「content-type」ではない場合:head要素内/http-equiv属性があるが、その値が「content-type」ではない場合:head要素内、またはhead要素内の子要素であるnoscript要素内/name属性がある場合:メタデータ・コンテンツが期待される場所
コンテンツモデル


 文書の文字エンコーディングはmeta要素のcharset属性で表します。この指定は文書の先頭から512バイト以内に記述します。
 従来のHTMLと同様、meta要素のhttp-equiv属性にcontent-typeを指定して文字エンコーディングを表すこともできますが、その場合<meta charset="★">は指定できないので注意してください。
 なお、HTML5では、文書の文字エンコーディングとしてUTF-8を使用することが推奨されています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文字エンコーディングを表したい</title>
</head>
<body>
<p>文章の文字エンコーディングはmeta要素のcharset属性で表します</p>
</head>
</html>

HTML5:スタイルシートを使いたい(style,type,media)


<style ★>~</style>
★=type="MIMEタイプ"
   media="対象メディア"


要素解説 style
カテゴリー メタデータ・コンテンンツ
利用できる場所 scoped属性が指定されてない場合:メタデータ・コンテンツが期待される場所、またはhead要素の子要素であるnoscript要素内/scoped属性が指定されている場合:フロー・コンテンツが期待される場所(ただし、style要素とホワイトスペース以外の他のフロー・コンテンツより前)
コンテンツモデル type属性の値によろ


HTML文書でスタイルシートを利用するにはいくつかの方法がありますが、該当のHTML文書全体に適用されるスタイルシートを1箇所にまとめて記述する場合は、style要素を使います。

type属性
 スタイルシート言語のMIMEタイプを指定します。デフォルトの値は「text/css」です。そのため、WEBページで一般的なcssを利用する場合には、type属性を省略することができます。

media属性
 style要素の中に記述されたスタイルシートを、どのメディアに適用するのかを指定します。例えば、PCの画面上であれば「screen」、印刷用であれば「print」のように指定します。デフォルトの値は「all」ですので、media属性が省略された時は、すべてのメディアに同じスタイルシートが適用されます。

サンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta chraset="UTF-8">
<title>スタイルシートを使いたい</title>
<style media="screen">
    em{
          color:#ff0000;
          font-style=normal;
         }
</style>
<style media="print">
    em{
          border-bottom-style:double;
          font-style:normal;
         }
</style>
</head>
<body>
<p>一般にはスタイルシート言語の基本であ一つである<em>CSS</em>を、スタイルシートと呼ぶ事が多いです。</p>
</body>
</html>


HTML5:スクリプトを使いたい(script,type,src,charset)


<script ★>~</script>
★=type="スクリプトのMIMEタイプ"
   src="外部スクリプトのファイル名"
   charset="外部スクリプト・ファイルの文字エンコーディング"

要素解説 script
カテゴリー メタデータ・コンテンンツ/フロー・コンテンツ/フレージング・コンテンツ
利用できる場所 メタデータ・コンテンツが期待される場所/フレージング・コンテンツが期待される場所。
コンテンツモデル src属性がない場合:type属性の値による/src属性がある場合:なし、またはスクリプトの説明のみ


 HTML文書でスクリプトを利用するにはscript要素を使います。スクリプトはこの要素の中に直接記述することも、別に用意した外部スクリプト・ファイルを読み込ませることもできます。
ただし、直接記述する方法と外部のスクリプト・ファイルを読み込ませる方法とを、1つのスクリプト要素で同時に指定することはできませんのでご注意ください。

type属性
 スクリプト言語のMIMEタイプをしています。デフォルトの値は「text/javascript」です。そのため、WEBページでjavascriptを利用する場合には、type属性を省略することができます。

src属性
 外部のスクリプト・ファイルを読み込んで利用する場合に、スクリプト・ファイルのURLを指定します。

charset属性
 src属性で外部のスクリプト・ファイルを読み込んで利用する場合に、スクリプト・ファイルの文字エンコーディングを指定します。src属性が指定されてない場合には、この属性を指定することはできません。


<body>
<script>
     document.write("<p>javascriptを使ったサンプルページです</p>")
</script>
</body>


HTML5:スクリプトが実行されない環境に対応したい(noscript)


<noscript>~</noscript>

要素解説 noscript
カテゴリー メタデータ・コンテンンツ/フロー・コンテンツ/フレージング・コンテンツ
利用できる場所 head要素の中、またはフレージング・コンテンツが期待される場所(ただしscript要素の入れ子は不可)
コンテンツモデル スクリプトが無効で、head要素の中にある、場合:link要素を0個以上、meta要素を0個以上。スクリプトが無効でhead要素の中にない場合:トランスペアレント(ただし、noscript要素の入れ子は不可)スクリプトが有効の場合:テキスト


 スクリプトを無効にしているブラウザなどで代わりに表示させる内容は、noscript要素で表します。

<body>
<script>
     document.write("<p>javascriptを使ったサンプルページです。</p>")
</script>
<noscript>
     <p>スクリプトが無効になっているか、またはスクリプトに対応してません。<br>
     <a href="noscript.html">次のページ</a>へどうぞ。</p>
</noscript>
</body>
 

今回もお付き合いありがとうございます。次回は「HTML5入門:セクション要素タグの意味と使い方!!セクション編 vol.1」について勉強していきます。よろしければまたお付き合いお願いします。まだまだHTML5について勉強をやり始めたばかりなので、各回でわかりにくい部分や、間違ってるところがあれば教えてください。

関連記事

テーマ : インターネットサービス    ジャンル : コンピュータ

TOP > HTML5 > HTML5入門:タグの意味と使い方!!文書の基本 vol.2!!

LEAVE
'A'
COMMENT






09-2018
SUN MON TUE WED THU FRI SAT
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -

08   10

月別アーカイブ
タグクラウド
全記事表示リンク

 About
WebBox norijin note

はじめまして!!
1983年4月生まれのAB型。広島出身の元美容師で、その後、大阪にてIT企業に勤め、現在三人で会社を立ち上げる為、日々精進しています。
 ブログでは、WEBについて勉強した内容や、自分が使ってて便利な情報を気ままに発信しています。

 Contact
メールフォーム

名前:
メール:
件名:
本文:

 link
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。