デザインの学校 ウェブデザイン 応用編 第10回

暑い日が続いたと思ったら、今度は雨ばっかりの天気…
急に冷える日が続いてますけど、皆さん体調は大丈夫ですか?
さてさて、今日もやってまいりました!お勉強の時間です
今日は改行コードとフレーム、メタタグについてです。
まずは簡単に改行コードから。
改行コードというのは単純に改行を命令する文字列のことです。
HTMLファイルでは<br>もしくは</br>と記述する改行コードですが、これがOSレベルで異なるのをご存知ですか?
UNIX   :[LF]
Windows  :[CR][LF]
Macintosh :[CR]
これが主なOSの改行コードの対応表です。
この中でもっとも汎用的なものがWindowsが採用している改行コード
改行コードはテキストファイルを送るときやCGIスクリプトを異なるOSサーバーに送信するときなどに問題を起こすことがあります。
たとえばテキストファイルの改行が無効になるとか…。
なので送り側、受け手側のOSの違いをきちんと把握して、対応しましょう
次はフレームです。
フレームは、ブラウザのウィンドウを複数に分割して表示するものをいいます。
分割するためにはその言葉どおり、<frame>タグを使用すればできるのですが。
ただ、フレームというのは色々と問題点を抱えています。
(1)フレームを表示できないブラウザがある
(2)ロボット型検索エンジンに引っかからない
(3)印刷時にそのままのページイメージが印刷できない
   気になるページを印刷
   でもページが何枚にも分かれて印刷されてしまうトラブル。
(4)お気に入りに追加するのが難しい
   フレーム内にどんな内容が表示されても基本のURLが変わりません。そうするとブックマークも活躍の場が
(5)リンク先の表示の設定が難しい
   フレームのページでは、元のフレームの中にリンクで飛んでいった先のページが表示されてる!っていうことがよくあります。
   こんなときはリンク先のターゲットをblankもしくはtopにすることで解決できますよ。
…こうした問題点を見る限りフレームを扱うのは、htmlを熟知していないと難しそうです…ね
ただ、BBSやブログなどを自サイトのフレームメニューの中に表示するなどすると、外部から借りているBBSなどもより自分のサイトの一部っぽく見えるのでがんばってみたいところです
次はメタタグについてです。
メタタグの役割はそのページの前提条件や内容をブラウザや検索エンジンに認識してもらうことです
どんな言語で記述されているか、誰によって制作されたか、どんなページかなどなどがメタタグで記述できます。
では、私たちウェブデザインスタジオのサイトのソースを例に見てみましょう
 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="Author" content="ウェブデザインスタジオ山梨 powered by VISUAL LITERACY">

<title>山梨県デザインスクール ウェブデザインスタジオ</title>
<meta name="description" content="ウェブデザインスタジオはプロフェッショナルなクリエーターを養成する山梨県のデザイン学校です">
<meta name="keywords" content="専門学校,スクール,ラーニング,習い事,デザイナー,クリエーター,web,dtp">

</head>
こうして見ればわかると思いますが、メタタグはHEADタグ内に記述するのがポイントです。
では、上から順にそれぞれのメタタグの役割を見ていきたいと思います。
(1)<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
これはサイト内で使用する文字タイプの定義です。
こうして、何の言語を使っているか宣言していないと、ページが文字化けを起こしてしまう可能性もあるという重要なところなのです。
なのでメタタグの中でも一番上に書いてあげましょう
ここでは、Shift_JISという最も一般的な日本語文字コードの一種が宣言されていますが、他にも、UTF-8という日本語と韓国語、タイ語などの多言語を同一文書内で表示可能な文字コードや、EUC-JPなどの種類があります。
では、次に行きましょう
これは記述者=Authorを示すメタタグです。
ウェブデザインスタジオのサイトの製作者はVISUAL LITERACYだと言っているのわかりますか?
(2)<meta name="Author" content="製作者">
   ↓ ↓ ↓
<meta name="Author" content="ウェブデザインスタジオ山梨 powered by VISUAL LITERACY">
残りの2つはSEO的にも少々効果の期待できる部分です
この二つのメタタグの役割は上から順に紹介文=discriptionとkeywords=キーワードとなってます。
(3)<meta name="description" content="紹介文">
    ↓ ↓ ↓
<meta name="description" content="ウェブデザインスタジオはプロフェッショナルなクリエーターを養成する山梨県のデザイン学校です">
たとえばウェブデザインスタジオのサイトならこんな紹介文
(4)<meta name="keywords" content="キーワード">
    ↓ ↓ ↓
<meta name="keywords" content="専門学校,スクール,ラーニング,習い事,デザイナー,クリエーター,web,dtp">
そして、検索のときにこんな言葉で探してもらいたい・こんな言葉で検索をする人が多いのでは?と予想されるキーワードを厳選してこんな感じに書いてみましょう
この2つが検索エンジンの読む部分で、比較的キーワードの部分はSEO評価の高い部分なのです
けれど、だからといってあんまりキーワードを書きすぎると悪質と判断されてしまう場合もあるので、キーワードは10個くらいを目安に書くと良いのではないでしょうか
今までこういった対策をしていなかった方はぜひ、試してください。
そして、googleやYahoo!での表示順位がどう変わるかをテストしてみるのもオススメです

 

WEB(ホームページ)デザイン中級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

コメント

    • まるをでっす
    • 2006年 7月 25日

    この間はお休みしちゃって残念…
    でも、とても分かりやすくて感謝です。
    今日からコマメに復習するので
    時々おじゃまします☆
    今週末はガッツリ伺うですっ!
    よろしくでっす!!
    あ、治り具合によってはマスクして
    いくかもしれないケド、怪しくない
    ので安心してね♪

    • 2006年 7月 25日

    こんにちは。
    コメントありがとうございます!!
    ブログはちょくちょく内容が追加されていたりで、読みづらいかと思います…ほんとにすみません。
    今週末はお会いできそうな雰囲気なので楽しみにしつつ♪マスクと早くお別れできるようにお祈りしておきます★

  1. この記事へのトラックバックはありません。

*

PAGE TOP