ホーム > WEB > XHTML・HTML5

XHTML・HTML5のアーカイブ

サイト移転と301リダイレクト・302リダイレクト

サイト移転や新規ドメインの取得などでサイトURLを変更する場合、検索エンジンに移転通知をする必要があります。
検索エンジンに通知しなければいつまでも以前までのURLを巡回することになってしまいます。
何もせず移転してしまうと、「ページが見つかりません」と表示されてしまい、せっかくサイトを見に来てくれた人を逃してしまいます。

移転通知のことを「リダイレクト」と呼びます。
301リダイレクトと302リダイレクトというものがあり、

  • 301リダイレクトは永続的移転。
  • 302リダイレクトは一時的移転。

という意味を検索エンジンに伝えます。

301リダイレクトは、完全に移転したことを意味し、これまで運営してきたサイトURLで得た評価は新しく移転したサイトURLへ引き継がれます。
302リダイレクトは、何らかの理由で一時的にサイトを移転した場合に使います。こちらも今まで得た評価を維持しておくことができます。

設置方法
テキストエディタ（メモ帳など）で.htaccessという名前のファイルを作ります。

.htaccessの中身は

301リダイレクト（サイト全体を他のドメインへリダイレクトする場合）

Redirect permanent / http://新ドメイン/

302リダイレクト

RedirectTemp / http://○○.com/

※転送元のトップディレクトリに .htaccessファイルをアップロードします。

もし、.htaccessを設置できない環境だとしてもメタタグでもリダイレクトできます。

301リダイレクト

<META HTTP-EQUIV="Refresh" CONTENT="0; URL="http://新ドメイン/">

CONTENTの数値を0とした場合、301リダイレクトとして扱われる。

302リダイレクト

<META HTTP-EQUIV="Refresh" CONTENT="「ここに秒数を記入」; URL="http://○○.com/">

設置方法
<head>～</head>の間に記述します。

<head>
<meta http-equiv="refresh" content="0; url="http://新ドメイン/">
</head>

Dreamweaver CS5でHTML5に対応

AdobeのDreamweaver CS5でHTML5に対応を開始した。
拡張機能での対応で、AdobeのサイトからWindowsとMacOSともに「HTML5 Pack」を無料でダウンロードできる。

HTML5 Packの拡張内容

  • HTML5とCSS3の各種機能向けの新たなコードヒントが採用
  • WebKitエンジンのアップデート
  • ライブビューで動画と音声の再生に対応
  • HTML5スターターレイアウト

「HTML5 Pack」はAdobe Labsから無料でダウンロードできる。
http://labs.adobe.com/

が、DreamWeaverCS5以前のバージョンでは、（CS4でも）HTML5に対応はしていない。
Dreamweaver CS4でHTML5のコードヒントを表示させたい場合は、以下のサイトでファイルが配布されていたので、気になる方はチェックしてみてはどうでしょうか？
dwlog.net

こういうサイトの管理者さんは本当にありがたいですね。

HTML5 書籍の内容を無料公開

HTML5の刊行予定の書籍が無料公開されている。
その書籍名は「HTML5: Up and Runinig」（O’REILLY）
Web上で全ての情報を公開している！
執筆者である、Googleの開発者であるMark Pilgrim氏のサイト。
Dive into HTML5
ただ、残念（当然？）ながら英語です。

クリエイティブコモンズライセンスは
http://creativecommons.org/licenses/by/3.0/deed.ja

HTML5とは

次世代HTMLの規格。
HTML4やXHTMLから、記述の仕方や追加された機能が多くある。
SEO面では、今までと比べると楽になるらしい。

機種依存文字を避ける！平方メートルと立方メートル

先ほどのCO2算出の記事を書いていて、立法メートルとか平方メートルの記述に困りました。
調べてみると

記述方法

平方メートル（m²）

→ m&sup2;

立方メートル（m³）

→ m&sup3;

とすれば、機種依存を避けることができます。
ただ、数字が小さくて見づらい！

HTML基礎「titleタグとmetaタグを入れよう。」

最近WEB制作の勉強をしている。という方にお会いする機会が多いです。
サイトを見てください。って言ってくださるので、閲覧させていただいています。
ちょっとしたアルバイトにさせていただいています。
（過去にWEB制作の講師をしていまして、その伝手で仕事をもらっています。）
デザインはいい感じにできているけど、titleタグとmetaタグが入っていないことがあります。
titleタグとmetaタグは必ず指定するようにしましょう。

HTML記述サンプル

<TITLE>ここにタイトルを記入する。</TITLE>
<META name=”description” content=”ここにページの説明文を記入する。”>
<META name=”keywords” content=”キーワード,keyword”>

<HEAD>～</HEAD>の間に指定します。

<TITLE>ここにタイトルを記入する。</TITLE>
「ページのタイトル」です。
タイトルをつけないと、ブラウザの上部のツールバーに表示が「無題ドキュメント」となります。
また、せっかくブックマークに追加してもらっても、「無題ドキュメント」としてなってしまいます。
なんのページだかわからなくなってしまいます。
さらに、検索結果にも反映されます。
とても重要ですね。

<META name=”description” content=”ここにページの説明文を記入する。”>
「ページの説明文」です。
どんなページなのか？説明文を指定します。
検索結果にも反映され、説明文が表示されます。
ページの見た目は何もかわりません。

<META name=”keywords” content=”キーワード,keyword”>
「ページのキーワード」です。
どんなページか？というキーワードを指定します。
複数のキーワードを指定する場合は、カンマ（,）で区切り指定します。
検索結果にも反映されます。
ページの見た目は何もかわりません。

今回ご紹介したタグは、最低限必要なものです。
ページの見た目は変わるものではないですが、必ず入れるようにしましょう。

今回のような基本的なWEB制作のお話を、拙い文章ではございますが、今後取り入れていこうと思います。
（勉強できるサイトがたくさんあるんですけどね・・・私自身の勉強も踏まえてというところで。）
質問を受けたり、気付いた内容を記事にしていきます。

何か間違いやご質問などございましたら、コメントいただけると幸いです。

ホーム > WEB > XHTML・HTML5

Ads

カテゴリー
SPONSER
デル株式会社
本のベストセラー
ブログロール
検索
最近の投稿
Tag cloud
カレンダー
« 2018 年 6月 »
M T W T F S S
        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  
RSS RSS
アーカイブ

ページの上部に戻る