基礎知識講座「上級編」

◎ Googleの特殊検索コマンドを使った検索方法

■ Google の詳しい検索方法 （検索結果を絞りこむ）

● マイナス検索
検索結果から除きたいキーワードの直前に「-」（マイナス）を入力することで、「-」がついている
キーワードを含まないページを検索することができます。（※マイナスの前にスペースを挿入）
　▼例 ： 「ホームページ作成」を含み「ブログ」を含まないページを検索する
　　　※入力例 ： ホームページ作成　-ブログ

● フレーズ検索
引用符「"」（ダブルクォーテーション）を使用することで、「"」で囲まれた、ひと続きの文・文字列（フレーズ）が文中に並んでいるページだけを検索することができます。
　▼例 ： 「無料ホームページ作成講座」の文字列が含まれるページを検索
　　　※入力例 ： "無料ホームページ作成講座"

● サイト検索
特定のドメインやサイト内のみを対象として検索したい場合は、「site:」の後にドメイン名を追加して検索します。（キーワードとの間には半角スペースを挿入）
　▼例 ： 「無料ホームページ作成講座」内で、「JavaScript」を検索
　　　※入力例 ： site:bloglink29.blog58.fc2.com JavaScript

● intitle検索
ページのタイトルに特定の文字列が含まれているページを検索したい場合は、「intitle:」の後に文字列を追加して検索します。（キーワードとの間には半角スペースを挿入）
　▼例 ： タイトルに「講座」が含まれるサイトから「無料ホームページ」に関するページを検索する
　　　※入力例 ： intitle:無料ホームページ 講座

● inurl検索
URLに特定の文字列が含まれているサイトを検索したい場合は、「inurl:」の後に文字列を追加します。（キーワードとの間には半角スペースを挿入）
　▼例 ： 「URLに"blog" が含まれるサイトから"無料テンプレート"に関するページ」を検索する
　　　※入力例 ： inurl:blog　無料テンプレート

● リンク検索
指定のサイトにリンクを貼っているページを調べる時に使う特殊検索コマンドです。
「link:」に続けてURLを入力して検索します。
　▼例 ： 「無料ホームページ作成講座ブログ」にリンクしているページを検索
　　　※入力例 ： link:http://bloglink29.blog58.fc2.com/

● 関連ページ検索
指定したページと似た内容を持つページを検索する時に使う特殊検索コマンドです。
「related:」に続けてURLを入力し検索します。
　▼例 ： 「無料ホームページ作成講座ブログ」と似た内容を持つページを検索する
　　　※入力例 ： related:http://bloglink29.blog58.fc2.com/

● ファイル検索
ファイル名の拡張子を対象に、それを含むページを検索する
「filetype:」に続けて文書の拡張子を入力してください。（キーワードとの間には半角スペースを挿入）
　▼例 ： Microsoft Excel（拡張子:xls)で書かれた納品書のテンプレートを検索する
　　　※入力例 ： filetype:xls 納品書

◎ 写真（画像）の周辺をぼかすスタイルシート （IE4以降のみ）

「Internet Explorer」のフィルター効果（alpha効果）を利用すれば、写真（画像）の周辺をぼかして表示することができます。

← 元画像 <img> タグに、フィルター効果（alpha）のスタイルシートを追加します。 ※注意； 　IE以外のプラウザでは、alpha効果は得られません。

● 西洋醤油（ソース）
<img src="http://blog-imgs-23.fc2.com/b/l/o/bloglink29/cat_01_240.jpg"
alt="猫" border="0" style="filter:alpha(style=2,opacity=100,finlshopacity=0)">

style=2, opacity=100, finlshopacity=0

グラデーションの形状を「1（線形）」「2（円形）」「3（長方形）」の値で指定 　グラデーションの開始点の透明度を、0（透明）〜100（不透明）の数値で指定 　グラデーションの終了点の透明度を、0（透明）〜100（不透明）の数値で指定

表示例 ⇒

振り仮名（ルビ）を表示したい文字を<ruby>タグで囲むことで、ルビを表示できます。

● 表示例 ⇒ 漢字かんじ
　　記述例 ⇒ <ruby><rb>漢字<rt>かんじ</rt></rb></ruby>　（※IE専用）
　　　※ <rt>表示したい振り仮名（ルビ）</rt>

ただし、これだと「IE」以外のプラウザで表示した場合には、
「漢字かんじ」というような表示となってしまい、不自然な感じとなります。

そこで、「IE」以外のブラウザで閲覧しても不自然にならないように、以下のように記述します。

● 表示例 ⇒ 漢字(かんじ)
　　記述例 ⇒ <ruby><rb>漢字</rb><rp>(</rp><rt>かんじ<rt/><rp>)<rp/></ruby>

このようにすれば、「IE」以外のプラウザで表示した場合には、
「漢字(かんじ)」というように振り仮名が（ ）でかこまれるので、不自然な感じにもなりません。
なお、「IE」では、<rp>〜</rp>の部分は無視されます。

◎ 画像の周囲に文章を回りこませて表示する方法

　このように、写真やバナーなどの画像を挿入し、そのまま文章を記述すると文章が画像の下に表示されてしまいます。この場合、<img>タグに「align 属性」を追加することで、文章を画像の右や左に回りこませて表示することができるようになります。

■文章を画像の右に回りこませて表示 （表示例を兼ねる）

画像の左右に文字を回りこませるには、画像を表す<img>タグに、
画像と文字の位置関係を表す「align 属性」を設定します。
ここでは、「align 属性」に「left」を指定しているので、
文章は画像の右側に回りこんで表示されます。
「left」を「right」にすれば、文章は画像の左側に回りこみます。


●記述例
<img src="画像へのパス（URL）"
alt="" border="0" align="left" style="padding-right:10px;">文章

　※ align="left" ⇒ 画像を左側に指定する
　※ style="padding-right:10px;" ⇒ 文章と画像の間隔を開ける

◎ 複数行のテキスト入力領域を作成する

ホームページやブログの限られたスペースを有効活用するよう、複数行のテキスト入力領域（テキストエリア）を作成を作成してみましょう。

▼ textarea（テキストエリア）のサンプル

▼ textarea（テキストエリア）のサンプルソース <form name="textarea1" id="textarea1"> <textarea name="text1" rows="7" cols="50" id="text1" readonly>テキストエリアの内容 </textarea> </form> ○属性の説明 　※ rows ⇒ 横の長さ指定 　※ cols ⇒ 行数を指定 　※ readonly ⇒ 内容を変更できないようにする

ブログなどでは、コメント欄など、フォーム要素が複数使われている場合が多いので、name="textarea1" id="textarea1" の属性値は、他のフォーム要素とダブらないものを指定する。

横幅と行数を指定する属性値（rows、cols）はスタイルシートで指定することもできます。

▼ textarea（テキストエリア）のサンプル（スタイルシート指定）

▼ textarea（スタイルシート指定）のサンプルソース <form name="textarea2" id="textarea2"> <textarea name="text1" style="width:420px;height:150px;" readonly>テキストエリアの内容</textarea> </form> 　※ width:420px; ⇒ テキストエリアの横幅 　※ height:150px; ⇒ テキストエリアの縦幅

▼ 関連する記事
　※ テキストボックス風のオブジェクトを作る

■ダイナミックHTML

Microsoft社もNetscape社もバージョン4.0から「ダイナミックHTML」をサポートしました。
「画像にマウスが乗ったら震わせる」とか、「ツリー形式で表示されるメニュー」などです。
今まで Java や Shockwave などを必要としていた動的なページを HTML だけで実現しようというものです。しかし、「ダイナミックHTML」という用語は同じなのですが、Netscape社とMicrosoft社ではその表記方法や表現状況が違うものが多くあります。

◎Internet ExplorerのダイナミックHTML

Internet Explorer 5 の「ダイナミックHTML」は以下の技術から構成されます。
詳細情報は、「http://msdn.microsoft.com/workshop/default.asp」を参照してください。

JScript/VBScript

Microsoft版のJavaScriptであるJScriptと、Visual BASICに似たVBScriptを用いて、テキストの色や大きさ、さらにはテキスト自身まで、スクリプトを用いてダイナミックに変更することができるため、いろいろなことができます。
（→サンプル）

ポジショニング

W3Cが標準化を進める仕様（まだ草案の段階）で、ドキュメント中のオブジェクトの位置を指定します。NNの<LAYER>による指定よりも利用範囲は広いです。
（→サンプル）

その他

IE4.0はこれらの他にもいろいろな機能をサポートしています。