2006年06月29日
googleのページランク（PageRank）
googleのページランク（PageRank）
検索エンジンに上位に食い込むためのSEO対策（検索エンジン最適化）にとって、googleのページランク（PageRank）はとても重要です。
ページランク（PageRank）とは何かということですが、
Google自身では以下のように説明しています。
ちょっとややこしいかもしれませんので、簡単にまとめますと、
以下のようになります。
それではどうやったらGoogleのページランクを調べることができるか、また、どうやったらGoogleのページランクを高めることができるのかを紹介します。
Googleのページランクを調べるには
SEO対策で重要なgoogleのページランク（PageRank）を調べるには、
Googleツールバーをダウンロードして見るという方法があります。
googleツールバーインストールページ
GoogleツールバーをインストールしたIE（インターネットエクスプロラー）でサイトを見ると、ツールバーの端にPageRankが表示されます。
0〜10の11段階が緑色で表されます。
また、Googleツールバーをダウンロードしなくても、
以下のようなページで簡単に調べることができます。
Check Page Rank.com
Googleのページランクとch値を調べるツール
Google PageRank Checker
Googleのページランクを高めるには
ページランクは数多くのページにリンクされることで高まります。
・検索エンジンに登録する
・相互リンク等によって自サイトへのリンクを増やす。
・リンクをしてもらう為に何らかの工夫をする。
こういったことを行うことによってページランクを高めることができます。
ただし、過剰な相互リンクはSEOスパムとみなされ、逆にページランクを下げられたり、検索対象から除外されることもありますので注意しましょう。
また、たくさんのサイトからリンクされていても、ページランクの低いところばかりだとあまり効果がありません。
なるべくページランクの高いサイトからリンクされている必要があります。
したがって、ページランクの高いディレクトリ型検索エンジン（YahooやDmozなど）に登録されることによって、よりページランクを高めることができます。
主なディレクトリ型検索エンジン
また、リンクをしてもらう為に何らかの工夫をするという視点もあります。
例えばアマゾンでは、商品を一般のサイトに紹介してもらい、売り上げの一部を還元していますが、その際に各商品ページにリンクをしてもらうことによって、リンクポピュラリティーの向上を図っています。
また、これらの努力によってページランクを高めることができますが、必ずしもページランクだけで検索順位が上位になるわけではありません。
ページランクを高めることはもちろんですが、サイト内のキーワードを最適化することが重要になります。
さらには、自サイトにリンクしているページが、検索語句に関連のあるキーワードの入ったページである必要があります。
したがって、むやみやたらに相互リンクをすることはあまり意味がありません。相互リンクをするなら、なるべく同業のサイトを選ぶ必要があります。
あまり何も考えないSEO対策では、それが逆効果になったり、努力の割にたいした成果が得られなかったりしますのでご注意を。
検索エンジンに上位に食い込むためのSEO対策（検索エンジン最適化）にとって、googleのページランク（PageRank）はとても重要です。
ページランク（PageRank）とは何かということですが、
Google自身では以下のように説明しています。
PageRankTMについて
PageRankTM は、Webの膨大なリンク構造を用いて、その特性を生かします。ページＡからページＢへのリンクをページAによるページBへの支持投票とみなし、Googleはこの投票数によりそのページの重要性を判断します。しかしGoogleは単に票数、つまりリンク数を見るだけではなく、票を投じたページについても分析します。「重要度」の高いページによって投じられた票はより高く評価されて、それを受け取ったページを「重要なもの」にしていくのです。
こうした分析によって高評価を得た重要なページには高いPageRankTM （ページ順位）が与えられ、検索結果内の順位も高くなります。PageRankTM はGoogleにおけるページの重要度を示す総合的な指標であり、各検索に影響されるものではありません。むしろ、PageRankTM は複雑なアルゴリズムにしたがったリンク構造の分析にもとづく、各Webページそのものの特性です。
もちろん、重要度が高いページでも検索語句に関連がなければ意味がありません。そのためにGoogleは洗練されたテキストマッチ技術を使って、検索に対し重要でなおかつ、的確なページを探し出します。
Google の人気の秘密より引用
ちょっとややこしいかもしれませんので、簡単にまとめますと、
以下のようになります。
１．数多くのページにリンクされていると、PageRankが高くなる。
２．PageRankの高いページからリンクされると、PageRankが高くなる。
３．PageRankが高いと、検索結果内の順位も高くなる。
４．検索語句に関連のあるページは、検索結果内の順位が高い。
２．PageRankの高いページからリンクされると、PageRankが高くなる。
３．PageRankが高いと、検索結果内の順位も高くなる。
４．検索語句に関連のあるページは、検索結果内の順位が高い。
それではどうやったらGoogleのページランクを調べることができるか、また、どうやったらGoogleのページランクを高めることができるのかを紹介します。
Googleのページランクを調べるにはSEO対策で重要なgoogleのページランク（PageRank）を調べるには、
Googleツールバーをダウンロードして見るという方法があります。
googleツールバーインストールページ
GoogleツールバーをインストールしたIE（インターネットエクスプロラー）でサイトを見ると、ツールバーの端にPageRankが表示されます。
0〜10の11段階が緑色で表されます。
また、Googleツールバーをダウンロードしなくても、
以下のようなページで簡単に調べることができます。
Check Page Rank.com
Googleのページランクとch値を調べるツール
Google PageRank Checker
Googleのページランクを高めるには１．数多くのページにリンクされていると、PageRankが高くなる。
ページランクは数多くのページにリンクされることで高まります。
・検索エンジンに登録する
・相互リンク等によって自サイトへのリンクを増やす。
・リンクをしてもらう為に何らかの工夫をする。
こういったことを行うことによってページランクを高めることができます。
ただし、過剰な相互リンクはSEOスパムとみなされ、逆にページランクを下げられたり、検索対象から除外されることもありますので注意しましょう。
２．PageRankの高いページからリンクされると、PageRankが高くなる。
また、たくさんのサイトからリンクされていても、ページランクの低いところばかりだとあまり効果がありません。
なるべくページランクの高いサイトからリンクされている必要があります。
したがって、ページランクの高いディレクトリ型検索エンジン（YahooやDmozなど）に登録されることによって、よりページランクを高めることができます。
主なディレクトリ型検索エンジン
・Yahoo
言わずと知れた日本最大手ディレクトリ型検索エンジン。
・Dmoz
googleに採用されているディレクトリ型検索エンジン。無料審査制
・All About
無料審査制。登録基準は厳しいかもしれませんが、
色々なカテゴリに登録できます。
・Jリスティング
Biglobeやライブドアなど大手ポータルサイトと提携しているディレクトリ型検索エンジン。
言わずと知れた日本最大手ディレクトリ型検索エンジン。
・Dmoz
googleに採用されているディレクトリ型検索エンジン。無料審査制
・All About
無料審査制。登録基準は厳しいかもしれませんが、
色々なカテゴリに登録できます。
・Jリスティング
Biglobeやライブドアなど大手ポータルサイトと提携しているディレクトリ型検索エンジン。
また、リンクをしてもらう為に何らかの工夫をするという視点もあります。
例えばアマゾンでは、商品を一般のサイトに紹介してもらい、売り上げの一部を還元していますが、その際に各商品ページにリンクをしてもらうことによって、リンクポピュラリティーの向上を図っています。
４．検索語句に関連のあるページは、検索結果内の順位が高い。
また、これらの努力によってページランクを高めることができますが、必ずしもページランクだけで検索順位が上位になるわけではありません。
ページランクを高めることはもちろんですが、サイト内のキーワードを最適化することが重要になります。
さらには、自サイトにリンクしているページが、検索語句に関連のあるキーワードの入ったページである必要があります。
したがって、むやみやたらに相互リンクをすることはあまり意味がありません。相互リンクをするなら、なるべく同業のサイトを選ぶ必要があります。
あまり何も考えないSEO対策では、それが逆効果になったり、努力の割にたいした成果が得られなかったりしますのでご注意を。
2006年06月27日
スタイルシートでロールオーバー
スタイルシートでロールオーバー
ロールオーバーをスタイルシートで実現する方法を紹介します。
ロールオーバー（マウスを乗せると変化が起こる）は、javasprictで画像の・れ替えを行う方法がありますが、スタイルシートでも「ロールオーバー」を簡単に作ることができます。
アンカータグ<a>には、以下のスタイルシートが使用できます。
a:link 未訪問のリンク
a:visited 訪問済みリンク
a:hover リンクにカーソルが上に乗った時
a:active クリックをした時
スタイルシートでロールオーバーその１
（position: relative）
マウスを乗せると少し下がるリンクです。
画像にも同じスタイルシートを適用することができます。
以下ソースです。コピー＆ペーストでご利用下さい。
↓↓↓
スタイルシートでロールオーバーその２
マウスを乗せると背景色が変わるタイプのリンク。
以下ソースです。コピー＆ペーストでご利用下さい。
↓↓↓
スタイルシートでロールオーバーその３
罫線を利用したタイプのロールオーバー。
以下ソースです。コピー＆ペーストでご利用下さい。
↓↓↓
ロールオーバーをスタイルシートで実現する方法を紹介します。
ロールオーバー（マウスを乗せると変化が起こる）は、javasprictで画像の・れ替えを行う方法がありますが、スタイルシートでも「ロールオーバー」を簡単に作ることができます。
アンカータグ<a>には、以下のスタイルシートが使用できます。
a:link 未訪問のリンク
a:visited 訪問済みリンク
a:hover リンクにカーソルが上に乗った時
a:active クリックをした時
スタイルシートでロールオーバーその１（position: relative）
マウスを乗せると少し下がるリンクです。
画像にも同じスタイルシートを適用することができます。
以下ソースです。コピー＆ペーストでご利用下さい。
外部・内部スタイルシート部
a:hover.test1 { position: relative; top: 1px; left: 1px; }
HTML内
<a href="ＵＲＬ" class="test1" target="_blank">サンプルリンク１</a>
a:hover.test1 { position: relative; top: 1px; left: 1px; }
HTML内
<a href="ＵＲＬ" class="test1" target="_blank">サンプルリンク１</a>
↓↓↓
スタイルシートでロールオーバーその２マウスを乗せると背景色が変わるタイプのリンク。
以下ソースです。コピー＆ペーストでご利用下さい。
外部・内部スタイルシート部
a:link.test2{
color:#FFFFFF;
font-weight:bolder;
background-color:#BE9AD3;
color:#ffffff;
padding:3px;
}
a:visited.test2{
color:#FFFFFF;
font-weight:bolder;
background-color:#BE9AD3;
color:#ffffff;
padding:3px;
}
a:hover.test2{
background-color:#EDE6D1;
}
HTML内
<a href="ＵＲＬ" class="test2" target="_blank">サンプルリンク２</a>
a:link.test2{
color:#FFFFFF;
font-weight:bolder;
background-color:#BE9AD3;
color:#ffffff;
padding:3px;
}
a:visited.test2{
color:#FFFFFF;
font-weight:bolder;
background-color:#BE9AD3;
color:#ffffff;
padding:3px;
}
a:hover.test2{
background-color:#EDE6D1;
}
HTML内
<a href="ＵＲＬ" class="test2" target="_blank">サンプルリンク２</a>
↓↓↓
スタイルシートでロールオーバーその３罫線を利用したタイプのロールオーバー。
以下ソースです。コピー＆ペーストでご利用下さい。
外部・内部スタイルシート部
a:link.test3{
width:150px;
display:block;
background-color:#ffffff;
border-left:solid 5px #00ccff;
padding:3px;
text-decoration:none;
}
a:visited.test3{
width:150px;
display:block;
background-color:#ffffff;
border-left:solid 5px #00ccff;
padding:3px;
text-decoration:none;
}
a:hover.test3{
border-left:solid 5px #ffffff;
background-color:#ffffff;
}
HTML内
<a href="ＵＲＬ" class="test3" target="_blank">サンプルリンク３の１</a><br>
<a href="ＵＲＬ" class="test3" target="_blank">サンプルリンク３の２</a><br>
<a href="ＵＲＬ" class="test3" target="_blank">サンプルリンク３の３</a>
a:link.test3{
width:150px;
display:block;
background-color:#ffffff;
border-left:solid 5px #00ccff;
padding:3px;
text-decoration:none;
}
a:visited.test3{
width:150px;
display:block;
background-color:#ffffff;
border-left:solid 5px #00ccff;
padding:3px;
text-decoration:none;
}
a:hover.test3{
border-left:solid 5px #ffffff;
background-color:#ffffff;
}
HTML内
<a href="ＵＲＬ" class="test3" target="_blank">サンプルリンク３の１</a><br>
<a href="ＵＲＬ" class="test3" target="_blank">サンプルリンク３の２</a><br>
<a href="ＵＲＬ" class="test3" target="_blank">サンプルリンク３の３</a>
↓↓↓
2006年06月23日
横線・斜線の入った画像
フォトショップ講座〜横線・斜線の入った画像
webデザインでは、よく横線や斜線の入った画像が使われます。
最近は斜線を駆使して凝ったデザインをしているところをよく見かけます。
フォトショップ（Adobe Photoshop）を使えばやり方は簡単です。
【パターンオーバーレイ】を利用して簡単に横線や斜線を入れる方法を紹介します。
パターンオーバーレイ１〜横線を入れる場合。
縦2ピクセルの次のような画像を作ります。
（透明の背景に1ピクセル白を塗る）
そのあと、
・【編集】→【パターンの定義】
これで横線用の画像が使用できるようになります。
その後は、効果を適用したいレイヤー上で
・【レイヤー効果】→【パターンオーバーレイ】
を選択し、横線用の画像を選びます。
↓↓↓
例えば、この画像に
※素材使用可
↓↓↓
横線用のパターンオーバーレイを適用するとこうなります。
※素材使用可
パターンオーバーレイ２〜斜線を入れる場合。
手順は横線のやり方とまったく同じです。
斜線の場合、縦横3ピクセルの次のような画像を作ります。
（透明の背景に白を塗る）
そのあとの手順は横線のやり方と同様なので省略します。
例えば、この画像に
※素材使用可
↓↓↓
斜線用のパターンオーバーレイを適用するとこうなります。
※素材使用可
webデザインでは、よく横線や斜線の入った画像が使われます。
最近は斜線を駆使して凝ったデザインをしているところをよく見かけます。
フォトショップ（Adobe Photoshop）を使えばやり方は簡単です。
【パターンオーバーレイ】を利用して簡単に横線や斜線を入れる方法を紹介します。
パターンオーバーレイ１〜横線を入れる場合。縦2ピクセルの次のような画像を作ります。
（透明の背景に1ピクセル白を塗る）
そのあと、
・【編集】→【パターンの定義】
これで横線用の画像が使用できるようになります。
その後は、効果を適用したいレイヤー上で
・【レイヤー効果】→【パターンオーバーレイ】
を選択し、横線用の画像を選びます。
↓↓↓
例えば、この画像に
※素材使用可↓↓↓
横線用のパターンオーバーレイを適用するとこうなります。
※素材使用可パターンオーバーレイ２〜斜線を入れる場合。手順は横線のやり方とまったく同じです。
斜線の場合、縦横3ピクセルの次のような画像を作ります。
（透明の背景に白を塗る）
そのあとの手順は横線のやり方と同様なので省略します。
例えば、この画像に
※素材使用可↓↓↓
斜線用のパターンオーバーレイを適用するとこうなります。
※素材使用可※素材使用可と書いてあるものは全てホームページ用の素材として使用して頂いてかまいません。利用に際しては利用規約を一読下さい。
2006年06月22日
罫線の種類について
スタイルシート〜罫線の種類
スタイルシートで指定できる罫線の種類を紹介します。
スタイルシート〜罫線の種類
スタイルシートで指定できる罫線の種類はそんなに多くはありません。「罫線なし」を除くと8種類で、そのうち立体系の罫線はほとんど使用されません。通常使われるものは一本線、二重線、破線、点線の四種類。ちなみに、罫線を使わずに、画像でデザインした方が見栄えがするので、そちらを好む人も多いです。
また、別記事で「罫線が1ピクセルの表を作る方法」も紹介していますので、こちらもどうぞ。
■罫線の種類（border-style:）
↓↓↓
以下ソースです。コピー＆ペーストでご利用下さい。
スタイルシートで指定できる罫線の種類を紹介します。
スタイルシート〜罫線の種類スタイルシートで指定できる罫線の種類はそんなに多くはありません。「罫線なし」を除くと8種類で、そのうち立体系の罫線はほとんど使用されません。通常使われるものは一本線、二重線、破線、点線の四種類。ちなみに、罫線を使わずに、画像でデザインした方が見栄えがするので、そちらを好む人も多いです。
また、別記事で「罫線が1ピクセルの表を作る方法」も紹介していますので、こちらもどうぞ。
■罫線の種類（border-style:）
| none | : ボーダーの非表示。初期値になります。 |
| hidden | : ボーダーの非表示。 |
| solid | : 1本のラインが表示されます。 |
| double | : 二重線が表示されます。 |
| dashed | : 破線。 |
| dotted | : 点線。 |
| groove | : 枠が立体的に窪んだ感じになります。 |
| ridge | : 枠が立体的に浮上った感じになります。 |
| inset | : 全体が立体的に窪んだ感じになります。 |
| outset | : 全体が立体的に浮上った感じになります。 |
| solid 一本線 | double 二重線 |
| dashed 破線 | dotted 点線 |
| inset 窪み | outset 浮上り |
| groove 枠の窪み | ridge 枠の浮上り |
↓↓↓
以下ソースです。コピー＆ペーストでご利用下さい。
<table cellspacing="10" cellpadding="10">
<tr>
<td style="border:solid 5px #999999;background-color:#ffffff;" width="100" height="50">solid<br>一本線</td>
<td style="border:double 5px #999999; background-color:#ffffff;" width="100" height="50">double<br>二重線</td>
</tr>
<tr>
<td style="border:dashed 5px #999999;background-color:#ffffff;" width="100" height="50">dashed<br>破線</td>
<td style="border:dotted 5px #999999;background-color:#ffffff;" width="100" height="50">dotted<br>点線</td>
</tr>
<tr>
<td style="border:inset;" width="100" height="50">inset<br>窪み</td>
<td style="border:outset;" width="100" height="50">outset<br>浮上り</td>
</tr>
<tr>
<td style="border:groove;" width="100" height="50">groove<br>枠の窪み</td>
<td style="border:ridge;" width="100" height="50">ridge<br>枠の浮上り</td>
</tr>
</table>
<tr>
<td style="border:solid 5px #999999;background-color:#ffffff;" width="100" height="50">solid<br>一本線</td>
<td style="border:double 5px #999999; background-color:#ffffff;" width="100" height="50">double<br>二重線</td>
</tr>
<tr>
<td style="border:dashed 5px #999999;background-color:#ffffff;" width="100" height="50">dashed<br>破線</td>
<td style="border:dotted 5px #999999;background-color:#ffffff;" width="100" height="50">dotted<br>点線</td>
</tr>
<tr>
<td style="border:inset;" width="100" height="50">inset<br>窪み</td>
<td style="border:outset;" width="100" height="50">outset<br>浮上り</td>
</tr>
<tr>
<td style="border:groove;" width="100" height="50">groove<br>枠の窪み</td>
<td style="border:ridge;" width="100" height="50">ridge<br>枠の浮上り</td>
</tr>
</table>
2006年06月21日
罫線が1ピクセルのtable
1ピクセルのtable（テーブル）
罫線が1ピクセルの表を作る方法を紹介します。
tableで1ピクセル罫線 その1
罫線が1ピクセルの表を作るには、tableを入れ子構造にする方法があります。
ただ、別の簡単な方法がありますし、tableを入れ子状にすると表示が重くなります。昔は一般的でしたが、もうあまり使われない古い時代の方法です。
以下ソースです。コピー＆ペーストでご利用下さい。
↓↓↓
上のソースをブラウザで表示するとこうなります。
tableで1ピクセル罫線 その2
tableを入れ子構造にしなくても、tableの背景色を決めてcellspacing="1"にすれば罫線が1ピクセルの表を作ることができます。
以下ソースです。コピー＆ペーストでご利用下さい。
↓↓↓
上のソースをブラウザで表示するとこうなります。
tableで1ピクセル罫線 その3
スタイルシートを駆使して罫線が1ピクセルの表を作ることができます。
一番応用が利きますし、この方法が主流かと思います。
スタイルシートに、隣接するセルのボーダーを重ねて表示するborder-collapse:collapseを記述し、tdのボーダーを指定します。
以下ソースです。コピー＆ペーストでご利用下さい。
↓↓↓
上のソースをブラウザで表示するとこうなります。
罫線が1ピクセルの表を作る方法を紹介します。
tableで1ピクセル罫線 その1罫線が1ピクセルの表を作るには、tableを入れ子構造にする方法があります。
ただ、別の簡単な方法がありますし、tableを入れ子状にすると表示が重くなります。昔は一般的でしたが、もうあまり使われない古い時代の方法です。
以下ソースです。コピー＆ペーストでご利用下さい。
<table width="100" heigth="100" bgcolor="#333333" cellspacing="0" cellpadding="0">
<tr>
<td>
<table cellspacing="1">
<tr bgcolor="#ffffff">
<td width="50" height="50">A</td>
<td width="50" height="50">B</td>
</tr>
<tr bgcolor="#ffffff">
<td width="50" height="50">C</td>
<td width="50" height="50">D</td>
</tr>
</table>
</td>
</tr>
</table>
<tr>
<td>
<table cellspacing="1">
<tr bgcolor="#ffffff">
<td width="50" height="50">A</td>
<td width="50" height="50">B</td>
</tr>
<tr bgcolor="#ffffff">
<td width="50" height="50">C</td>
<td width="50" height="50">D</td>
</tr>
</table>
</td>
</tr>
</table>
↓↓↓
上のソースをブラウザで表示するとこうなります。
|
tableで1ピクセル罫線 その2tableを入れ子構造にしなくても、tableの背景色を決めてcellspacing="1"にすれば罫線が1ピクセルの表を作ることができます。
以下ソースです。コピー＆ペーストでご利用下さい。
<table width="100" heigth="100" bgcolor="#333333" cellspacing="0" cellpadding="0">
<tr>
<td>
<table cellspacing="1">
<tr bgcolor="#ffffff">
<td width="50" height="50">1</td>
<td width="50" height="50">2</td>
</tr>
<tr bgcolor="#ffffff">
<td width="50" height="50">3</td>
<td width="50" height="50">4</td>
</tr>
</table>
</td>
</tr>
</table>
<tr>
<td>
<table cellspacing="1">
<tr bgcolor="#ffffff">
<td width="50" height="50">1</td>
<td width="50" height="50">2</td>
</tr>
<tr bgcolor="#ffffff">
<td width="50" height="50">3</td>
<td width="50" height="50">4</td>
</tr>
</table>
</td>
</tr>
</table>
↓↓↓
上のソースをブラウザで表示するとこうなります。
| 1 | 2 |
| 3 | 4 |
tableで1ピクセル罫線 その3スタイルシートを駆使して罫線が1ピクセルの表を作ることができます。
一番応用が利きますし、この方法が主流かと思います。
スタイルシートに、隣接するセルのボーダーを重ねて表示するborder-collapse:collapseを記述し、tdのボーダーを指定します。
以下ソースです。コピー＆ペーストでご利用下さい。
スタイルシート内（外部・内部）記述
table.smp1 {border-collapse: collapse;}
td.smp {border: solid 1px #333333}
HTML内に記述
<table width="100" heigth="100" class="smp1" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#ffffff">
<td class="smp" width="50" height="50">あ</td>
<td class="smp" width="50" height="50">い</td>
</tr>
<tr bgcolor="#ffffff">
<td class="smp" width="50" height="50">う</td>
<td class="smp" width="50" height="50">え</td>
</tr>
</table>
table.smp1 {border-collapse: collapse;}
td.smp {border: solid 1px #333333}
HTML内に記述
<table width="100" heigth="100" class="smp1" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#ffffff">
<td class="smp" width="50" height="50">あ</td>
<td class="smp" width="50" height="50">い</td>
</tr>
<tr bgcolor="#ffffff">
<td class="smp" width="50" height="50">う</td>
<td class="smp" width="50" height="50">え</td>
</tr>
</table>
↓↓↓
上のソースをブラウザで表示するとこうなります。
| あ | い |
| う | え |
2006年06月15日
文章に使うタグの種類
文章に使うタグの種類
文章に使うタグを並べて紹介します。
●改行タグ： <br>
■説明
Break（改行）の略。テキストや画像に対して改行を入れるタグです。
■使用例
↓↓↓
●引用タグ：
<blockquote>引用</blockquote>
<q>短い文章の引用</q>
■説明
文章が引用であることを明示するタグ。
<blockquote>タグで挟んだところは、上下左右にインデントが入り、
<q>タグで挟んだところは引用符（"）が付きます。
※<q>タグはモジラ系のブラウザでは表示されますが、IE（インターネットエクスプローラー）で非対応です。なので、ほとんどの人が表示されないと思います。<q>タグを使用する場面はあまりないかもしれません。
■使用例
↓↓↓
↓↓↓
●段落タグ： <p>段落</p>
■説明
その範囲が一つの段落であることを明示するタグ。
<p>タグで挟んだところは、上下に一行空白が入ります。
■使用例
↓↓↓
●整形済みテキスト：
<pre>改行などをそのまま表示</pre>
■説明
範囲内を記述した通りに表示するタグ。
いちいちスペースや、<br>タグを入れたりするのが面倒な場合に使います。
もともと整った文書がある場合や、
プログラムのソースコードの一部などをHTMLで見せたい時などに使用します。
ソースコードの場合、
論理タグである<code>タグと組み合わせて、
<pre><code>ここにソースコード</pre></code>
という様に使用します。
■使用例
↓↓↓
●論理タグと装飾タグ：
■説明
装飾タグとは、太字にしたり下線を入れたり、テキストの見た目を変えるタグ。
論理タグとは、テキストの見た目を変えると同時に、意味情報を付加するタグ。
例えば、<strong>タグと<b>とは同じように見た目が太くなります。<b>タグは装飾タグで、こちらがあくまで見た目の変化を定義するのに対して、<strong>のような論理タグは、「ここは強調していますよ」という情報を含んだものになっています。
※見た目は変わりませんが、検索エンジンのロボットなどは論理タグの部分を重視します。一般的なSEO（検索エンジン最適化）対策では、重要な部分には主に論理タグを使い、重要でない部分に装飾タグを使うようにしています。
■使用例
↓↓↓
文章に使うタグを並べて紹介します。
●改行タグ： <br>
■説明
Break（改行）の略。テキストや画像に対して改行を入れるタグです。
■使用例
改行<br>を入れます。
↓↓↓
改行
を入れます
を入れます
●引用タグ：
<blockquote>引用</blockquote>
<q>短い文章の引用</q>
■説明
文章が引用であることを明示するタグ。
<blockquote>タグで挟んだところは、上下左右にインデントが入り、
<q>タグで挟んだところは引用符（"）が付きます。
※<q>タグはモジラ系のブラウザでは表示されますが、IE（インターネットエクスプローラー）で非対応です。なので、ほとんどの人が表示されないと思います。<q>タグを使用する場面はあまりないかもしれません。
■使用例
「ホームページタグ辞典」より以下に引用。
<blockquote>比較的長い文章を抜粋・引用するときに使用します。一般的に<blockquote>タグと</blockquote>タグで挟まれた部分は上下に1行分のスペースが挿入され、左右もインデント（字下げ）されて表示されるので、上下左右にスペースが空く形になります。</blockquote>
<blockquote>比較的長い文章を抜粋・引用するときに使用します。一般的に<blockquote>タグと</blockquote>タグで挟まれた部分は上下に1行分のスペースが挿入され、左右もインデント（字下げ）されて表示されるので、上下左右にスペースが空く形になります。</blockquote>
↓↓↓
「ホームページタグ辞典」より以下に引用。
比較的長い文章を抜粋・引用するときに使用します。一般的に<blockquote>タグと</blockquote>タグで挟まれた部分は上下に1行分のスペースが挿入され、左右もインデント（字下げ）されて表示されるので、上下左右にスペースが空く形になります。
ホームページタグ辞典」には、<q>タグについて、<q>比較的短い文章を抜粋・引用するときには<q>タグを使用します。</q>と書かれています。
↓↓↓
ホームページタグ辞典」には、<q>タグについて、
比較的短い文章を抜粋・引用するときには<q>タグを使用します。と書かれています。
●段落タグ： <p>段落</p>
■説明
その範囲が一つの段落であることを明示するタグ。
<p>タグで挟んだところは、上下に一行空白が入ります。
■使用例
<p>ひとつの段落であることを表します。前後に一行分の空白が入ります。</p>
<p>内容が空の<p>タグは無視されます。その場合いくつ並べても、改行とはみなされません。</p>
<p>内容が空の<p>タグは無視されます。その場合いくつ並べても、改行とはみなされません。</p>
↓↓↓
ひとつの段落であることを表します。前後に一行分の空白が入ります。
内容が空の<P>タグは無視されます。その場合いくつ並べても、改行とはみなされません。
●整形済みテキスト：
<pre>改行などをそのまま表示</pre>
■説明
範囲内を記述した通りに表示するタグ。
いちいちスペースや、<br>タグを入れたりするのが面倒な場合に使います。
もともと整った文書がある場合や、
プログラムのソースコードの一部などをHTMLで見せたい時などに使用します。
ソースコードの場合、
論理タグである<code>タグと組み合わせて、
<pre><code>ここにソースコード</pre></code>
という様に使用します。
■使用例
<pre>ふつう、
HTML内に記述するとき、
<br>タグを入れないと、
改行されませんが、
<pre>タグで挟んだ部分は、
HTML内に記述した通り表示されるようになります。</pre>
HTML内に記述するとき、
<br>タグを入れないと、
改行されませんが、
<pre>タグで挟んだ部分は、
HTML内に記述した通り表示されるようになります。</pre>
↓↓↓
ふつう、
HTML内に記述するとき、
<br>タグを入れないと、
改行されませんが、
<pre>タグで挟んだ部分は、
HTML内に記述した通り表示されるようになります。
HTML内に記述するとき、
<br>タグを入れないと、
改行されませんが、
<pre>タグで挟んだ部分は、
HTML内に記述した通り表示されるようになります。
●論理タグと装飾タグ：
■説明
装飾タグとは、太字にしたり下線を入れたり、テキストの見た目を変えるタグ。
論理タグとは、テキストの見た目を変えると同時に、意味情報を付加するタグ。
例えば、<strong>タグと<b>とは同じように見た目が太くなります。<b>タグは装飾タグで、こちらがあくまで見た目の変化を定義するのに対して、<strong>のような論理タグは、「ここは強調していますよ」という情報を含んだものになっています。
※見た目は変わりませんが、検索エンジンのロボットなどは論理タグの部分を重視します。一般的なSEO（検索エンジン最適化）対策では、重要な部分には主に論理タグを使い、重要でない部分に装飾タグを使うようにしています。
■使用例
○装飾タグ
<i>イタリック体</i>
<b>太字</b>
<u>下線</u>
○論理タグ
<em>強調<em>
<strong>強い強調<strong>
<ins>追記箇所</ins>
<i>イタリック体</i>
<b>太字</b>
<u>下線</u>
○論理タグ
<em>強調<em>
<strong>強い強調<strong>
<ins>追記箇所</ins>
↓↓↓
イタリック体
太字
下線
強調
強い強調
追記箇所
太字
下線
強調
強い強調
追記箇所
2006年06月14日
特殊文字のリスト
特殊記号について
& < > © ® など、特殊文字や記号の中で、
HTMLに普通に書き込んでもうまく表示されないものがあります。
そのような場合は文字コードを指定すると表示できるようになるのですが、
例えば、HTMLのタグの説明をしたいときなど、
「< >」の文字コードを知っていると便利になります。
ちなみに、
<b>強調</b>
というタグではさまれたものは、次のような文字コードをHTML内に記述すると、表示されるようになります。
<b>強調</b>
また、特殊文字を表示するためコードには、
番号で表わす「コードエンティティ」
名前で表わす「ネームエンティティ」
という二つの文字コードの記述方法があります。
例えば「&」の場合だと、
「&」が「コードエンティティ」
「&」が「ネームエンティティ」
になります。
使わない人には、それほど使う場面もないかもしれませんが、
知っておいて損はないと思います。
○よく使われる特殊記号リスト
& < > © ® など、特殊文字や記号の中で、
HTMLに普通に書き込んでもうまく表示されないものがあります。
そのような場合は文字コードを指定すると表示できるようになるのですが、
例えば、HTMLのタグの説明をしたいときなど、
「< >」の文字コードを知っていると便利になります。
ちなみに、
<b>強調</b>
というタグではさまれたものは、次のような文字コードをHTML内に記述すると、表示されるようになります。
<b>強調</b>
また、特殊文字を表示するためコードには、
番号で表わす「コードエンティティ」
名前で表わす「ネームエンティティ」
という二つの文字コードの記述方法があります。
例えば「&」の場合だと、
「&」が「コードエンティティ」
「&」が「ネームエンティティ」
になります。
使わない人には、それほど使う場面もないかもしれませんが、
知っておいて損はないと思います。
○よく使われる特殊記号リスト
| 特殊文字 | ネームエンティティ | ナンバーエンティティ |
|---|---|---|
| " | " | " |
| & | & | & |
| < | < | < |
| > | > | > |
| © | © | © |
| ® | ® | ® |
2006年03月16日
marginとpaddingの違い
スタイルシートで余白を設定するとき、marginとpaddingを使用しますが、この二つの違いについて紹介します。
余白の設定【marginとpaddingの違い】
スタイルシートで余白を決める場合、
paddingとmarginがあります。
この違いは多少分かりにくいのですが、
違いを覚えて使えるようになると、なにかと便利です。
marginは要素に対して外の余白を決めます。
paddingは要素に対して内の余白を決めます。
marginは外の余白、paddingは内の余白と覚えてください。
ちょっと具体的に説明します。
例えば上の、
Ａのdivタグの中に、style="padding:10px;"
Ｂのdivタグの中に、style="padding-top:20px;"
Ｃのdivタグの中に、style="padding-left:30px;"
と指定してみます。
次は、
Ａのdivタグの中に、style="margin:10px;"
Ｂのdivタグの中に、style="margin-top:20px;"
Ｃのdivタグの中に、style="margin-left:30px;"
と指定してみます。
こんな感じになります。
このように色をつけた要素で見ると、
paddingが要素の中の余白を指定しているのに対して、
marginが要素の外の余白を指定しているのが分かると思います。
ＰタグやＤＩＶタグによく使いますが、
ＤＩＶタグなどと背景を同色で使用する場合分かりにくくなりますので、
marginとpaddingは意識して使い分ける必要があります。
そのほか、marginとpaddingは色々な場面で使い分けが必要になってきます。
本サイトのテンプレート素材でも、
marginをちょっとだけ使っていますので、
使い方を覚えたい方はソースを見てみてください。
テンプレート素材 【クリスタル1】
余白の設定【marginとpaddingの違い】スタイルシートで余白を決める場合、
paddingとmarginがあります。
この違いは多少分かりにくいのですが、
違いを覚えて使えるようになると、なにかと便利です。
marginは要素に対して外の余白を決めます。
paddingは要素に対して内の余白を決めます。
marginは外の余白、paddingは内の余白と覚えてください。
ちょっと具体的に説明します。
Ａ
Ｂ
Ｃ
例えば上の、
Ａのdivタグの中に、style="padding:10px;"
Ｂのdivタグの中に、style="padding-top:20px;"
Ｃのdivタグの中に、style="padding-left:30px;"
と指定してみます。
Ａ
paddingは中の余白 style="padding:10px;"Ｂ
paddingは中の余白 style="padding-top:20px;"Ｃ
paddingは中の余白 style="padding-left:30px;"次は、
Ａのdivタグの中に、style="margin:10px;"
Ｂのdivタグの中に、style="margin-top:20px;"
Ｃのdivタグの中に、style="margin-left:30px;"
と指定してみます。
Ａ
marginは外の余白 style="margin:10px;"Ｂ
marginは外の余白 style="margin-top:20px;"Ｃ
marginは外の余白 style="margin-left:30px;"こんな感じになります。
このように色をつけた要素で見ると、
paddingが要素の中の余白を指定しているのに対して、
marginが要素の外の余白を指定しているのが分かると思います。
ＰタグやＤＩＶタグによく使いますが、
ＤＩＶタグなどと背景を同色で使用する場合分かりにくくなりますので、
marginとpaddingは意識して使い分ける必要があります。
そのほか、marginとpaddingは色々な場面で使い分けが必要になってきます。
本サイトのテンプレート素材でも、
marginをちょっとだけ使っていますので、
使い方を覚えたい方はソースを見てみてください。
テンプレート素材 【クリスタル1】
2006年03月14日
画像に続くテキストを真ん中に
画像に続くテキストを真ん中に寄せる方法を紹介します。
画像に続くテキストを真ん中に寄せたい
本を買うならアマゾンで！
普通になにもせず、
<img src="画像のＵＲＬ">
の後にテキストを記入するだけだと、
本を買うならアマゾンで！
のように、テキストが画像の下端に行ってしまいます。
中央に寄せたい場合などは、以下のようにしましょう。
<img src="画像のＵＲＬ" align="absmiddle">テキスト
このようにimgタグの中に、align="absmiddle"と入れると
画像の上端から下端のちょうど中央にテキストが合うようになります。
ホームページ作成用の素材サイトによくある
小物素材を使うときによく利用します。
そのほかにも、alignの後には、
top,texttop,right,middle,left,bottom,baseline,absbottom
が指定できます。
それぞれ使用どころは違うと思いますので、色々お試し下さい。
画像に続くテキストを真ん中に寄せたい本を買うならアマゾンで！普通になにもせず、
<img src="画像のＵＲＬ">
の後にテキストを記入するだけだと、
本を買うならアマゾンで！のように、テキストが画像の下端に行ってしまいます。
中央に寄せたい場合などは、以下のようにしましょう。
<img src="画像のＵＲＬ" align="absmiddle">テキスト
このようにimgタグの中に、align="absmiddle"と入れると
画像の上端から下端のちょうど中央にテキストが合うようになります。
ホームページ作成用の素材サイトによくある
小物素材を使うときによく利用します。
そのほかにも、alignの後には、
top,texttop,right,middle,left,bottom,baseline,absbottom
が指定できます。
それぞれ使用どころは違うと思いますので、色々お試し下さい。
