BLOG[いまからHTML5]headタグ内のメタ情報についてHTML/CSSコーディングTwitterFacebookはてブPocketLINEコピー2012.02.02スポンサーリンク今回は前回説明したheadタグ内に記述するメタ情報について。メタ情報を示す要素も数多くありますが、一般的に使われることの多い要素についていくつかピックアップします。前回のおさらいですが、「この文書自身に関するメタ情報」とは書かれている言語・ページタイトル・筆者といったような文書そのものに関する属性情報です。具体的にはどのように書くのか、以下にサンプルコードを示します。href="http://blog.56doc.net/css/default.css"><title>56DOCブログ</title></head>DOCTYPE宣言やhtml、bodyタグなどは省略してheadタグ内のみのサンプルです。<meta>タグ<meta>タグにはその文書に関する基本情報を記述します。最初の数行にわたってありますが、<>内のmetaに引き続いて「属性="属性値"」の形で様々な情報を与えていきます。charset="UTF-8">charset属性はそのhtmlファイルの文字コードに何が使用されているかを指定します。テキストデータの保存形式にはシフトJIS・ユニコード・EUCといったいくつかの形式があり、実際にそのファイルの保存形式に見合った値を=のあとに""でくくって記述します。ここでは国際統一規格であるユニコードを示す="UTF-8"としています。その他シフトJISを示す="Shift-JIS"、EUCを示す"EUC-JP"などを使うことが考えられますが、それぞれWindows系やUNIX系の独自の文字コードセットなので、新たに作成する文書はユニコードにしておくのが無難です。そのファイル自体もUTF-8形式で保存しなければならないのでお忘れなく。content="ja">このように1つのmetaタグで複数の属性を組み合わせて使う場合もあります。始めの属性をhttp-equiv="content-language"と書くと次のcontent属性で文章の言語(英語とかフランス語とか中国語とか)を指定します。私たちが通常取り扱うのは日本語の文章なので一般的にはcontent="ja"でいいでしょう。英語のページを書く場合はcontent="en"となります。content="ゴロドク">これも属性2つ組み合わせのパターンです。始めの属性をname="author"とすると次のcontent属性で筆者名を記述します。ゴロドク">同じく2つ組み合わせのパターンです。始めの属性をname="copyright"とすると次のcontent属性で文書の著作権者を記述します。一般的には筆者と同じになりそうですが、請負で他人のサイトを作った場合にはことなる場合もあるかもしれませんね。">同じく2つ組み合わせのパターンです。始めの属性をname="description"とした場合は次のcontent属性でこの文書本文の要約を記述します。content="HTML,CSS,動画,ブログ">同じく2つ組み合わせのパターンです。始めの属性をname="keywords"とした場合は次のcontent属性でこの文書本文内で使用される、あるいは関連すると思われるキーワードを記述します。キーワードはコロン(,)で区切って複数指定できます。長くなりそうなときはこれを複数行書いてもかまいません。<meta>タグはいろんなこと書けるし、属性も1個だったり複数だったりするので正直よくわからんという人も多いかもしれません(私も最初は意味わからず混乱した)がこうして一つ一つについて紐解いていけばそれなりに意味はわかってくると思います。href="http://blog.56doc.net/"><base>タグはHTML文書内にあるリンク先や画像イメージの場所の指定のうち、相対パスの基準となるURLをhref属性に記述します。パスとは「ファイルの所在を表したもの」ですが、これの指定は相対パスではなく絶対パス(URL)を使って「http://blog.56doc.net/img001.jpg」みたいな感じで都度全部書くことも出来ます。一方で<base>タグで「http://blog.56doc.net/」という基準となるURLを指定しておけば、以降のパス指定はこの部分を省略して「img001.jpg」のように不足する部分だけ指定する書き方も出来ます。パスの指定は絶対・相対パスが混在しても構いません。混乱を避けるためにもサイト内リンクには相対パス、外部サイトへリンクする場合のみ絶対パス、という使い分けが一般的かと思います。href="http://blog.56doc.net/css/default.css">この文書に関連するファイルの定義およびその場所を指定します。rel=以降に関連文書の定義をrel属性に、関連文書へのパスをhref属性に記述します。ここではこのリンクする関連文書がこの文書に適用する外部スタイルシートなのでrel="stylesheet"を、その場所をhttp://blog.56doc.net/css/default.css"と指定しています。<link>タグではこのほかにindexページとの関係、前後のページとの関係なども記述できますがここでは割愛します。<title>タグ<title>56DOCブログ</title><title>タグではその文書のページタイトルを記述します。作文書くときの題名のようなものだと思ってください。このタイトルはサイト内で全て同一である必要はありません。各ページごとに適切なタイトルを与えるほうが情報としての価値は高まると思います。スポンサーリンクまとめ記述すべき内容が「メタ情報」という耳慣れない言葉なので難しく感じるかもしれませんね。属性="属性値">の形をとる1つのタグの中でも属性は必ずしも1つではなく、複数組み合わせて意味をなす場合もあるといったところがポイントでしょうか。先にも述べましたがhead内で使用できるタグはここに紹介した限りではありませんが、一般的に使われそうなところを並べてみました。これらも実際の運用に当たっては決まりきった書き方になることが多いと思うので自分なりのひな形として保存しておくと良いかもしれません。参考までにこのエントリで紹介した内容をひな形化したサンプルコードを以下に。この文書の本文</body></html>これをユニコード(UTF-8)形式のテキストとして、.html拡張子をつけて保存してみてください。これを元に適宜タグを追加削除して自分なりのひな形を作っていただければ、と思います。BLOG関連記事HTML/CSSコーディング画像不要CSSだけで作るテキストロゴデザインのTipsWebサイトのロゴタイプといえばPhotoShopを初めとした画像ソフトを用いて作るのが一般的な気もしますが、シンプルなものならCSSのプロパティを指定するだけでも作れたりします。今回はそのサンプルとフォント関係で使うCSSプロパティいくつ...HTML/CSSコーディング[いまからHTML5]まずはHTMLファイルの骨組ただいまHTML5勉強真っ最中のゴロドクです。空き地に放置された...一昔前にahaムービーって流行りましたよね。時間かけてちょっとずつ変化する画像、どこが変わってるかわかりますか?ってやつ。脳科学者の茂木健一郎さんがテレビ出だした頃からですよね。あれっぽいやつCSSで作ってみたのでどうぞ。チートシート/リファレンス系サイトまとめ先日書いたCSS小ネタまとめのようにCSS3も使えば使うほど味が出て、応用次第で色んなことできて楽しいですよね。私も大好きです、CSS3。IE非対応云々のためハックがどーこーとかめんどくさいことはありますけど。いうわけでここらで初心者...HTML/CSSコーディングCSSのみ画像不要のドット柄背景の作り方を若干丁寧に説明してみるドット柄を見ると職業柄ついパンチングメタル(等ピッチ穴明きの鉄板)を思い出すゴロドクさんです、どうも。「CSSのみ画像不要のストライプ柄背景~」という記事に引き続き、CSSのみの背景パターンの作り方の解説です。今回はドット柄に挑戦です。花に囲まれた洋館CSSでつくるahaムービーその2。前回よりさらに難易度低し。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。(1)スポンサーリンクタイトルとURLをコピーしました。