OPSポータル > サポートのページ
 
【ホームページ制作】
FLASH、JavaScript、CSSを駆使したページをより安く
詳細は次のページを!!
[IT事業部]  

【ハイブリッド掲示板システム制作】
4種類の送信形態、スパム排除機構、CMS機能搭載のお問い合わせシステムを。
詳細は次のページを!!
[IT事業部]  

【日商簿記3級検定受験講座】
簿記検定3級合格を目指す方に!
2時間3,000円

【ギター講座】
アコースティックギターを始めたい方に!
2時間3,000円

【英会話講座(日常会話)】
インターネットの普及によるグローバルな時代。
世界の人達との交流には英語が不可欠。
まず、その基本の習得を。
15回 30,000円


 
日本商工会議所主催分
   
【日商PC検定】
当スクールで随時実施
1級         10,000円
2級       7,000円
3級      5,000円
ベーシック 4,000円  
 
 
  【簿記検定】
11月18日(日) 1級〜4級
  2月24日(日) 2級〜4級
 
 
 
主に職業訓練のスケジュールを受講者のために提供。
一部、個人レッスンの生徒の方で希望される場合に提供。
 
 
CLOUDを用いて、体験の中から自然と経営を学べる実践的シミュレーション研修。
 
 
 
在籍インストラクタが交互にエッセーを書き込むブログ
ブログの設計の都合上、新たなウィンドウに表示
 

本田が経営する
個別指導学習塾LiNKのページ
 

 
東がインストラクタを務める
ISOBE PCサークルのページ
 
 
 
 
弊社代表岡島久美子が代表を務めるNPO法人
 
伊勢市指定管理者制度に基づいてまなびの広場が管理・運営する生涯学習施設 
 
伊勢市指定管理者制度に基づいてまなびの広場が管理・運営する多目的ホール
  
 
   
  
HTMLの構造【HTML】
 
私がホームページの作り方を指導するときには、必ずHTMLでのページ作成法をまず覚えてもらうようにしています。
それはHTMLタグを用いたページ作りを常態にしてもらいたいがためではありません。あくまで、タグの記述法の基本を知っていただくためです。
当然、HTMLの基本を覚えてもらった後には、ホームページビルダーなどのページ編集ソフトの使い方に移行していただきます。
それならHTMLなど覚えるだけ時間の無駄と考える人もいるでしょう。
ただ、私の指導の経験上、HTMLを理解して編集ソフトを使っている人と、知らずに使っている人とでは、あるレベル以上のページを作る場合に大きな差が生じているように感じます。是非、無駄とは考えず、ページ作りの基礎知識としてしっかり学んでください。
なお、このような学習の流れを「時間の無駄」と考える人は、ページ作りなど学ばずに、ページはプロのWebデザイナーに依頼してください。(ページ作りに費やす時間を、他の勤労にあて、ページ作成料にまわした方が、早く、良いページができるというものです。ときによっては安上がりかもしれません。)

【HTMLの基本構造】

HTMLとはHyper Text Markup Languageの略で、ホームページを 作るための言語です。
この言語は基本的に「タグ」という他のプログラミング言語にはない特殊な記述法でページを作ります。
純粋なHTMLページ(JavaScriptなどを含まないページ)なら、宣言文の羅列で実行文がほとんど存在しないので、記述が誤っていても、JavaScriptのようなイリーガルエラーは出ません。(もちろん、思ったようにレイアウトができず、ページが崩れてしまうことはあります。が、とにかく、エラーは出ません。)
このようなことから、プログラミング初心者にも比較的、馴染みやすい言語といえます。(少なくとも私が経験した多くの言語の中では最も簡易な言語です。その簡素さはExcel関数以上です。)
とはいえ、htmlタグでそれなりのページを作ろうと思ったら根気は必要です。

タグとは山カッコ、 < > 記号に囲まれた命令のことです。(中の文字の大文字・小文字はどちらでもかまいませんが、統一しておいた方がいいでしょう。)

例 <HTML><HEAD><TITLE>...など

例では<HTML>、<HEAD>、<TITLE>の3つのタグをあげています。
これらすべて宣言文で<HTML>はここからHTMLページが始まること、<HEAD>はここからヘッダー部が始まること、<TITLE>はここにタイトルが記述されていることを宣言しています。
例外はありますが、各開始タグには対になった終了タグがあります。記述は</記号と  >記号で囲みます。上の例でいえば次のようなセットになります。

例 <HTML>.....</HTML>
     <HEAD>....</HEAD>
     <TITLE>......</TITLE>


ここで気をつけたいのが、タグの記述は基本的に「入れ子」で記述するということです。
「入れ子」とはロシアの人形、マトリョーシカのように、人形の中に人形が入っている状態、つまり、あるタグセットの中に他のタグセットが完全に入っている状態をいいます。
上の例ではHTMLの開始を表す<HTML>タグと、その終了タグ</HTML>がまずあり、その中に<HEAD>...</HEAD>を入れます。さらに<TITLE>...</TITLE>を<HEAD>...</HEAD>の中にいれます。
主なタグを記述すれば次のような構造になります。(記述は次のようにタグ毎に改行をしなくてもかまいませんが、ここでは構造がわかりやすいように改行しています。色や段落によるレベル付けは構造をわかりやすくするためのもので、記述上、意味はありません。とはいえ、特に段落はメンテナンス上、つけておいた方が便利です。)
これらを確認してほしいのですが、すべてタグの種類間で交差はしていません。

<HTML>
 
<HEAD>
   
<TITLE>タイトル名
  
</TITLE>
 
</HEAD>
 
<BODY>ここにページのコンテンツを細かく記述する
 
</BODY>
</HTML>

上のようなコードをテキストファイルに記述し、特定の形式(.htmlもしくは.htmなど)で保存の上、ブラウザで見ると
Webページのように見ることができます。
ただし、これはインターネット上のページではなく、断絶されたローカルパソコン上でのページです。
実際にインターネットを通して誰もが閲覧できるページにするには、Webサーバーというインターネット用のマシンにページ・画像一式をアップロードしなければなりません。

 
 
 
 
  
タイトルの表示【HTML】
 
ホームページにはタイトルがあります。
昨日の記事で既に出てきていましたが、HTMLには<TITLE>タグというタグがあり、それを用いてタイトルを記述します。ただし、ここでいうタイトルとはページ上のタイトル(バナー)ではありません。
次の図のように、ブラウザのタイトルバーに表示される文字列のことです。

ブラウザ上の「お気に入り」へ登録されるインデックスもこのタイトルが使われます。
<TITLE>タグは昨日の例のように、必ず<HEAD>と</HEAD>の間に入れ、タイトルを記述後</TITLE>タグで閉じます。
上の図の例をHTMLで記述すれば

 
 
<HEAD>
   
<TITLE>ISOBE PCサークル ホームページ</TITLE>
 
</HEAD>

(ヘッダー部のみの表示)

HTMLでは改行するにも専用のタグを用いますので、通常、タグ記述上の改行はまったく意味がありません。(とはいえ、希なケースとして、意味のあることがあります。それはいずれ説明します。)


試しに、前日の記述のように、次のような記述に直しても上の記述と同様に表示されます。(いずれはページ作成ソフトを用いていきますので、ソフトが最適な記述に自動生成してくれます。現時点では、表示された結果を見て帰納法的対処でその部分のタグを修正していけば充分でしょう。)
 
<HEAD>
   
<TITLE>ISOBE PCサークル ホームページ
  
</TITLE>
</HEAD>
 

 
 
 
 
  
キャラクターセット【HTML】
 
HTMLで作成したページはサーバというネット専用コンピュータにアップロードしなければWebページとしては閲覧できないことを説明しました。
その際に気をつけなければならないことが1つあります。キャラクター(文字)セットというものです。
通常、ローカルパソコン(Windows PC)で使用されている文字コードはShift-JISというキャラクターセットです。ところが、サーバで多く使われるキャラクターセットはEUCというものです。このキャラクターセットの違いが
文字化けの原因となります。
 
文字化けはshift-JISとEUCの異なるキャラクターセットの中に共通のコードを使っている部分があるために発生します。

このような理由から、通常、アップロードするページはEUC形式でアップロードすることが勧められています。
ただし、EUC以外のキャラクターセット(例えばWindows PC標準のShift-JIS)を使っている場合でも、キャラクターセットをあらかじめ明示しておけば文字化けを防ぐことができます。
この文字化けを防ぐためのHTMLタグは
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=...">タグです。

  <HEAD>
 
<META HTTP-EQUIV="
Content-Type" CONTENT="text/html;charset=shift_jis">
   
<TITLE>ISOBE PCサークル ホームページ</TITLE>
 
</HEAD> 

<META...>タグはキャラクターセット設定以外の目的でも使われます。その際はHTTP-EQUIV="..." やCONTENT="..." の"..."の内容が変わります。

いままで出てきた基本的なタグと比べると、やたら長いタグですが、文字化けを防ぐためには必ず加えた方がいいでしょう。
ページ編集ソフトを使用しているときにはページ保存時に自動的に加えられるはずです。(ただし、どの形式として記述が加えられるかはデフォルト設定、あるいは自身のそのページに対する設定次第です。)
このタグを加える、あるいは加えられる場所は<TITLE>タグ同様、<HEAD>...</HEAD>の間です。HTMLの記述として加える場合には、HEAD部の先頭に書き加えておくといいでしょう。今までのタグと違い、このタグに</META>のような終了タグはありません。

ちなみにこのサークルのページはshift_jisで作っています。 理由は「HTMLソース上で文章を確認しやすいから」です。大手サイトではEUCを使うサイトが多いようです。
なお、サーバ標準のEUC形式で保存されたページをアップロードするときであっても、キャラクターセットは「EUC」として明示しておいた方がいいでしょう。EUCのキャラクターセットを指定するときには次のような表記になります。(先のHTMLから黄色背景の文字部分のみが変わりました。)

 
<HEAD>
   <META HTTP-EQUIV="
Content-Type" CONTENT="text/html;charset=euc-jp">
   
<TITLE>ISOBE PCサークル ホームページ</TITLE>
 
</HEAD>

同じ<META...>タグで「使用言語(自然言語)」も同時に設定しておいた方がいいでしょう。

  <HEAD>
   <META HTTP-EQUIV="
Content-Language" CONTENT="ja">
 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=euc-jp">
   
<TITLE>ISOBE PCサークル ホームページ</TITLE>
 
</HEAD>
 

 
 
 
 
  
リロード【HTML】
 
前回の記事で<META...>タグを2種類、説明しましたが、今回も<META...>タグです。
ただし、前回のキャラクターセットとは直接、関係のない「リロード」という機能です。

ゲーム世代の方々なら「Load」や「Save」という言葉はおなじみだと思います。
ゲームでは「Load」は読み込み、「Save」は保存のような意味で使われています。
今回の「リロード」は「Reload」と書き、「再び」の意味の「Re」と「Load」が組み合わさり、「再読み込み」の意味になります。
つまり、ページを表示した後、インターバル(時間間隔)をおいて再度、同じページを読み込むことをいいます。
 

記述は次のようになります。

 
<HEAD>
 
<META HTTP-EQUIV="REFRESH" CONTENT="5">
   
<TITLE>ISOBE PCサークル ホームページ</TITLE>
 
</HEAD>

前回のキャラクターセットの記述とほぼ同じですが、一部、変わっています。変更した部分は次の2ケ所です。(黄色背景の部分)

 
<HEAD>
 
<META HTTP-EQUIV="REFRESH" CONTENT="5">
   
<TITLE>ISOBE PCサークル ホームページ</TITLE>
 
</HEAD>

HTTP-EQUIVの部分を"REFRESH"にすればリロードの機能になります。次のCONTENTの部分ではそのインターバル(時間間隔)を数値(秒)で指定します。
つまり、上のタグは5秒間隔で現在、表示されているページを繰り返し読み込みます。(そのページを表示している間、半永久に...。)
次のようにキャラクターセットと併記できます。

 
<HEAD>
 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=shift_jis">
 
<META HTTP-EQUIV="REFRESH" CONTENT="5">
   
<TITLE>ISOBE PCサークル ホームページ</TITLE>
 
</HEAD>

通常のページで使っても訪問者にとって邪魔なだけの機能ですが、JavaScriptやSSIなどと併用すれば、画像をその都度、変更するなど、動的な面白いページを作ることができます。
  
SSIとはServer Side Includeの略で、他の言語のプログラムをページに取り込み、動的なページを作るための技術です。
なお、今回までに説明したすべての<META...>タグは併用できます。
 
 
 
 
  
ジャンプ【HTML】
 
ここでいう「ジャンプ」は前回の記事の「リロード」とよく似ています。
違うのは、前回の「リロード」が同じページを読み込むのに対して、「ジャンプ」は異なったページを読み込むという点です。
  

記述は次のようになります。(黄色背景の部分が加えられた記述)

 
<HEAD>
 
<META HTTP-EQUIV="REFRESH" CONTENT="5;URL=./next.html">
   
<TITLE>ISOBE PCサークル ホームページ</TITLE>
 
</HEAD>

おわかりのように、URL=が加えられ、ある一定の時間の後、別のページを読み込みます。
上のタグでは、表示されたページは表示の5秒後にnext.htmlというページを読み込みます。


この記述は、ドメイン取得や変更などでページのURLが変更されたときに、従来のページにこのタグを組み込んだページを置いておくことにより、一定期間、新たなURLのページに移動させるためによく用いられます。

 
このタグと「リロード」を併用できないことはありませんが、一度、別のページへジャンプしてしまうと、以降、リロード機能は働きません。(もちろん、次のページ自体に「リロード」を組み込めば、次のページも「リロード」機能は働きます。)
 
 
 
 
  
検索キーワード【HTML】
 
「SEO」という言葉を聞いたことがあるでしょうか。
サーチエンジン最適化技術のことで、巡回型検索エンジン(Googleなど)で検索される場合に、自身のページの検索結果の順位を上げるための技術です。
今回の記事は、「SEO」に関係が深い「キーワード」や「ディスクリプション」を記述するためのタグを取り上げますが、ここでは記述法のみに絞らせていただきます。(「SEO」の詳細については、いずれ別の稿で取り上げます。)

この「SEO」に関係するタグも<META...>タグを用います。

記述は次のようになります。(黄色背景の部分が前回までのタグから変えられた部分)

 
<HEAD>
 
<META HTTP-EQUIV="keywords" CONTENT="様々なキーワードをここに記述">

  <META HTTP-EQUIV="description" CONTENT="ページ紹介の文章を簡潔に記述">
   
<TITLE>ISOBE PCサークル ホームページ</TITLE>
 
</HEAD>

「様々なキーワードをここに記述」の部分に、検索エンジンにおける自身のページへの誘導のためのキーワードをコンマで区切り、複数記述します。
記述はいくつでもできますが、検索エンジンが実際にキーワードとしてみなすのは多くても10個程度まです。関連のある重要なもの10個程度に絞っておいた方がいいでしょう。(でないと、スパムページとみなされ、検索そのものから除外されてしまうことがあります。)
また、「ページ紹介の文章を簡潔に記述」の部分に、検索エンジンでの検索結果における紹介文を記述しておきます。

 
なお、ここで、キーワードを指定しても検索エンジンでの候補となるだけです。
よほどユニークなキーワードでない限り、他の多くのサイトも同じキーワードで指定していることが多いので、これだけで検索順位を期待するのは無理があります。
この「キーワード」や「ディスクリプション」は「SEO」の一要素に過ぎないことを理解してください。
 
 
 
 
  
文章の記述【HTML】
 
前回までずっとヘッド部<HEAD>...</HEAD>の中身について取り上げてきました。
今回よりいよいよボディ部<BODY>...</BODY>の説明に入っていきたいと思います。

名称で想像できるように、ページの本体部分が記述されるのが、このボディ部です。
ところで、ホームページを作ろうというくらいの人であれば、少なくともWORDなどのワードプロセッサや、そこまでいかなくてもWindows固有のメモ帳などは使ったことがあるものという前提で説明していきますので、ご了承ください。(もし、ない人は、そちらを先に覚えた方がいいと思います。)

ホームページは特殊なものを除けば、基本的に文字が中心となります。
他のワードプロセッサ、テキストエディタと同様、ホームページにおいても文章の記述については、それらのソフトと違いはありません。(特にページ編集ソフトを使うに至っては、ほとんどWORDなどと操作は変わりません。)
例えば、「本日は晴天なり」という文章のページを作るならば、それは次のようになります。

<HTML>
  <HEAD>
   
<META HTTP-EQUIV="Content-Language" CONTENT="ja">
  <META HTTP-EQUIV="
Content-Type" CONTENT="text/html;charset=shift_jis
">
    <TITLE>本日は晴天なり</TITLE>
  </HEAD>
  <BODY>本日は晴天なり
  </BODY>
</HTML>

 

もっと長い文章であっても、デフォルトの文字形式で文字を表示させるだけなら、上の<BODY>...</BODY>の間に文章を延々と書いていけばその文字がそのまま表示されます。
ただし、改行、文字サイズ、文字カラーなどを直接、文字に設定しても意味はなく、すべてタグで指定しなければなりません。(いずれ説明します。)

以前の記事でも説明しましたが、デフォルトとは「不履行」、「怠慢」などの意味です。
コンピュータでは、特に指定しなければある基本値が設定されているとみなされる場合が多く、そのことをいいます。特にその値をデフォルト値と呼びます。初期値や標準値と読み替えればわかりやすいでしょう。
ここでは、例えば文字サイズや文字カラーが指定されていないので、デフォルトの設定(フォントサイズ=3、カラー=黒)が設定されたものとみなされます。
 
 
 
 
  
改行【HTML】
 
我輩は猫である。
名前はまだない。今回は改行のためのタグです。

前回、取り上げたように、ホームページ上で文章を改行するときには、改行のためのタグが必要となります。
そのためのタグが<br>です。
文章内で改行したい位置にこのタグを挿入するとその位置で改行されます。

<BODY>
我輩は猫である。<br>名前はまだない。
</BODY>

(BODYタグ部以外省略)
 

2つ連続して<br>を使えば行と行の間に1行の空白行ができます。

<BODY>
我輩は猫である。<br><br>名前はまだない。
</BODY>

 
 



水平線【HTML】
 
水平線といっても地平線の海上版の意味で使われるところのものではありません。ホームページの区切り線のことです。
表現方法は以降に記すような多少の方法がありますが、かなり地味なタグです。
ある程度、慣れたページメーカー(人)なら、この線を使わず、ライン画像を挿入することが多いと思います。が、色づけなどもできるので使い方次第では効果的に利用できます。
アンカー(リンク)につけられる下線とは別物です。

水平線を表示するためのタグは<HR>です。このまま記述すると、
長さ100%、太さ2ピクセルの線が表示されます。
 
普通、ブラウザのウィンドウに対する割合ですが、テーブル内部での記述ではそのセルの幅に対する割合です。

<HR>を記述すると次のような線がスクリーン(画面)を横断的に影付き線が表示されます。


細いのでわかりにくいかもしれませんが立体に見える線です。


これを普通の線で表現するには、<HR NOSHADE>と記述します。


色を変えるには、<HR COLOR="#ff0000">のように記述します。(COLORオプションの#ff0000については、色を指定する値です。(この表記法の詳細は2009年11月14日の記事「RGB」で。)
一部の色の指定については色名で指定することもできます。
例えば、<HR COLOR="BLUE">と記述すれば次のような線をひけます。


線の太さも変えることができます。その際は<HR SIZE="4">などと指定します。SIZE="4"の4が太さを表し、4ピクセル(4ドット)の太さということです。


色や線の太さの指定を<HR COLOR="#FFFF00" SIZE="5">のように併用することも可能です。



 




  
画像【HTML】
 
その昔、NTTがキャプテンシステムというインターネットの走りのようなシステムを運営していたことがありました。文字情報が中心で、画像は初期のファミリーコンピュータを彷彿させるような質の荒いもので、もちろん、ホームページのような写真画像を用いることはできませんでした。
インターネット、Windowsの登場以降、写真画像が当たり前のように使われていますが、その昔を知っている者にとっては、この写真画像を使えるということは、とても画期的な出来事でした。
今回はその画期的な(?)画像を表示させる方法を取り上げます。

画像を表示させるには<img...>タグを用い

<img border="0" src="./chutaland.gif" width="190" height="260" align="left">ChutaLandはフリーのイラストレータ...   

のように記述します。
最初のimgは画像であること、borderは画像の境界線の太さ(ピクセル。0は境界線なし)、srcは画像ファイルの名称、widthは画像の幅、heightは画像の高さを、それぞれ設定します。widthやheightを指定しなければ画像は原寸大で表示されます。あるいは%を用いて、width="50%"、height="50%"と原寸に対する比率で指定することも可能です。
隣接する文章や画像との間隔を空けるためのオプションとして
HSPACE="n" (左右)、VSPACE="n" (上下)などもあります。(nは間隔のピクセル数)
 
ExcelのHLOOKUP、VLOOKUPのように、開発言語などではH+SPACEのように、プリフィクス(接頭語)としてHを水平(Horizontal)、Vを垂直(Vertical)で表すことがあります。

上の記述例の場合、画像に境界線はなく、同じディレクトリ(フォルダ)内にあるchutaland.gifファイルを、幅190ピクセル、高さ260ピクセルの大きさで、続く文章の左側に表示しなさい、という命令のタグです。

同じディレクトリ内の画像であることを示すのはファイル名の前にある./記号です。
この記号がカレントディレクトリを表し、その直後にファイル名があることにより、同じレベルにページファイル(html)と画像ファイル(gif)が存在していることがわかります。
詳細は
2009年9月18日の記事(ディレィトリとパス)、そして2009年9月25日の記事(画像ファイルの種類)で。
今回の./のような特殊な記述法(相対参照)は、2009年9月18日の記事には取り上げていないので、次回、詳細に取り上げます。
 
【Copyright 2001 Chuta by Cisco & 3D image by SIESTA Co.,Ltd.】  
 



 
相対参照【HTML】
 
画像を呼び出すための参照をはじめ、様々なところでファイルへのパス(道筋)を指定することは多くあります。この場合、ルートから指定する絶対参照のパスは比較的わかりやすいのですが、呼び出す側のカレントディレクトリ(フォルダ)を基準として指定する相対パスは記述が特殊で、難しいものではないものの、文章では案外、理解しにくいところがあります。
前回2月12日の記事でとりあげた./というのも相対パスの1種で、呼び出す側のファイルを基準に、そこから同じディレクトリ内の同レベルもしくは下位のレベルのディレクトリへどのような道筋で該当のファイルを呼び出すかを示したものです。
例えば、下の図のように呼び出す側のhtmlファイルのディレクトリに画像ファイルを入れたimageディレクトリ(フォルダ)があり、その中に呼び出すべきgazou.jpgがある場合は次のように記述します。(呼び出す側のhtmlファイルはindex.htmlファイルとします。)
 
./image/gazou.jpg
  

この例のように、htmlファイルが存在するディレクトリ内の同位もしくは下位のディレクトリに画像がある場合には呼び出し側のファイルの位置を./と考えれば、なんとなく理解できるはずです。

問題は呼び出す画像がhtmlファイルよりも上位のディレクトリにある場合、あるいは別のディレクトリにある場合です。(もちろん、このような呼び出しは特殊なのですが...。)
この場合には../というものを使わなければなりません。先ほどの記述と似ていますが、ドット(点)が2つになっています。このドット2つの指定は、1つ上位のディレィトリへ登ることを示しています。つまり../が1つなら1つ上の階層、../が2つ(../../)であれば2つ上の階層へ登った位置からファイルのパスが始まることを示しています。
例えば、下の図のようなファイル構成になっているものとして、contents.htmlから、gazou.jpgを呼び出す場合には、次のような記述になります。
  
../gazou.jpg

 

階層を1つ上へ登るというのは自身の入ったディレクトリは含みません。ディレクトリ階層を登った以降は記述されたパスにしたがって進みます。
つまり、../によって自身の直接のディレクトリでない1つ上のディレクトリimageまで登り、そこにあるgazou.jpgを指定していることになる訳です。

ページ編集ソフトをつかえば画像を選んだ時点で自動的にパスは与えてくれるので、このようなことは知る必要もありませんが、ステップアップを図りたいなら、是非、覚えてみてください。
私の指導の経験上、初心者の方は、この「上位へ登る」記述でつまづきます。ただ、一度、覚えてしまえば、そう難しくない概念なので、じっくりと理解してください。

 




 
背景【HTML】
 
ホームページにおいて背景という場合、背景色と背景画像の二つの設定があります。
そして、設定は両者とも、<BODY>タグのオプションとしての設定となります。

【背景色】

<BODY BGCOLOR="BLUE">や<BODY BGCOLOR="#FF00FF">などと指定することにより背景色が変化します。これらタグの青字の部分が色名もしくは色を表す値です。(色を表す値の詳細は2009年11月14日の記事で。)
このタグの指定により、そのページの背景色を設定できます。

【BGCOLOR="BLUE"のとき】 【BGCOLOR="#FF00FF"のとき】

【背景画像】

さらに進んだ方法として、背景に画像を設定することも可能です。
<BODY BACKGROUND="./gazou.gif">などと指定することにより、指定したファイルが背景としてタイル状に敷き詰められます。このタグの青字の部分がパス(ファイル名への道筋)です。(パスの詳細は前々回の記事前回の記事、さらに2009年9月18日の記事で。)

【BACKGROUNDを指定したページ】 【指定した画像ファイル】

背景色と背景画像の両方を指定したときは、背景画像が優先されます。

実際には、背景色は指定されます。ただ、通常の背景画像だと背景色を全面的に隠してしまうので背景色は生かされません。例えば、透過させた背景画像と、それにあわせて背景色を設定すれば両設定を生かすことができます。

なお、ページをスクロールしたときには、通常、背景画像はページコンテンツと一緒に移動しますが、背景のみを固定させておくこともできます。
これには、BODYタグのオプションとしてBGPROPERTIES=FIXEDを加えます。

例 <BODY BACKGROUND="./gazou.gif"
BGPROPERTIES=FIXED>

これにより、ページコンテンツをスクロールさせても、それにつられて背景画像が動くことはありません。

 




 
マーキー【HTML】
 
マーキーとは次のような流れ文字のことです。(ブラウザによっては流れないことがあります。)

これがマーキーです。設定はデフォルト値ですが、少し速すぎて読みにくい気がします。

このような動きを制御する動的なタグはHTMLタグでは珍しく、事実、Internet Explorer用に作られた特殊なタグなので、ブラウザによってはこのタグは働きません。(テキストが動くことなく通常のテキスト同様に表示されるのみです。)
このタグを使う場合はブラウザ依存であることを念頭においてお使いください。
もし、どのブラウザでも同じように流れ文字を表示させたいときには、JavaScriptによって画像をコントロールするか、アニメgifやFlash映像などを作成してください。
もっとも、ブラウザのシェアの
半数以上がInternet Explorerで、他のブラウザを使っている人達は、この機能が働かないことを知っていることが多いので、他のブラウザでの表示にあまりこだわりすぎなくてもいいのでは...と思います。
  
参考までに現在のブラウザのシェアをあげておきたいと思います。
この調査はNet Applicationsが2010年1月分として発表したものです。
 
順位 ブラウザ シェア
1 Internet Explorer  62.18%
2 Firefox 24.41%
3 Chrome 5.20%
4 Safari 4.51%
5 Opera 2.38%
6 Opera Mini 0.59%

もっとも、これは都市圏での調査だろうと思うので、地方であればInternetExplorerのシェアはより高いはずです。


さて、話を本題に戻しますが、タグの記述は次のように<marquee>と</marquee>で囲うだけです。(先の例の記述です。)

<marquee>これがマーキーです。設定はデフォルト値ですが、少し速すぎて読みにくい気がします。</marquee>

パソコン上の映像に限らずTVなども含めて、動きのある映像のほとんどは原理的にはパラパラ漫画のように画面を高速で切り替えることによって、あたかも動いているように見せかける仕掛けです。
このマーキーも、文字の位置を変えながら再描画させることによって、あたかも動いているように見せかけています。(もちろん、見せかけるとはいっても、当事者が動いていると感じているのですから、それで何の障りもないのですが...。)

このようなものですから、<marquee>タグには流れる速さや回数、動きの振る舞いを制御するオプションが用意されています。

速さを変えるには、scrollderay="n"(nは数字)を用い、移動距離ではscrollmount="n"(nは数字)を指定します。

<marquee scrollderay="1000" scrollmount="5">(文章...)</marquee>

まず、scrollderayは再描画までのインターバル(時間)を調整するためのオプションです。nはミリ秒単位で指定します。基本的に数値を大きくすればするほど再描画までの時間は長くなります。
次にscrollmountは移動する距離を調整するためのオプションです。nはピクセル単位で指定します。基本的に数字を大きくするほど移動は速くなります。
もちろん、scrollderayとscrollmountの組み合わせで動きは決まりますので、一方の設定が速く動く設定であっても、他方が遅い設定になっていては、思った結果にはなりません。
つまり、両方の調整によって適切な表示を考えなければなりません。
様々に試して、いい設定を見つけてください。

スクロールの回数を設定したい場合には、loop="n"(またはinfinite)で指定します。nは回数を指定します。無限に繰り返したい場合にはinfinite(または-1)と記述します。

動きの方向や振る舞いを指定するにはdirectionやbehaviorというオプションを用います。
directionは流す方向を設定するオプションです。left(デフォルト値)もしくはrightで設定します。leftは右から左へ文字が流れ、rightは逆に左から右に文字が流れます。
behaviorでは、scroll(デフォルト値)、slide、alternateの3種類の指定があります。
scroll(デフォルト値)は例えば右端から左端へ文字が流れた後、また右から文字が現われるという振る舞いになります。
slideは反対側の端で止まります。(loopで回数を設定すれば、繰り返されます。)
alternateは左右の行ったり来たりを繰り返します。

<marquee scrollderay="1000" scrollmount="5" direction="right" behavior="alternate" >(文章...)</marquee>

この説明はloopのデフォルト値である「繰り返し」での振る舞いなので、他のオプションの設定によっては異なった動きをすることがあります。
もちろん、それぞれのオプションは名称どおり任意設定で、加えても、加えなくてもどちらでもかまいません。(加えない場合はデフォルト設定になります。)

 




 
文字スタイル【HTML】
 
文字(文字列)のことをコンピュータではテキストといいます。よって以降はテキストと呼びます。
基本的にテキストは、BODYタグの中ではテキスト用のタグが存在しなくても、そのまま表示されます。そのスタイルを変えたい場合に限りタグを使います。(ここでいうスタイルとは文字の大きさ、色、文字フォントなどをいいます。
これらを使用しても表現できないスタイルは画像処理ソフトを使って修飾文字を作ってください。

まず、テキストはその形態で大きく2種類に分けることができます。
1つは見出しのテキスト。もう1つが文中のテキストです。
見た目はどちらも同じように見えますが、用いるHTMLタグが違います。表示上では見出しのテキストは常に太字で表示されること、行の前後に空白行が挿入されること、文末が強制改行されることなどで、文中のテキストと異なります。(もっとも、このサークルのページにおいては、私の流儀(何様か)で、見出し用のテキストの場合でも文中のテキスト用のタグを用いて表現しています。文法に厳しい学者肌の人には謗られるかもしれませんが、直そうとは思いません。もちろん、他人にはお勧めしませんが...。)

【見出しのテキスト】
見出しのテキストを表示する場合には、<Hn>...</Hn>を用います。(nは1から6までの数字で、1が最大、6が最小です。)

H1での表示

H2での表示

H3での表示

H4での表示

H5での表示
H6での表示
右寄せ、左寄せ、センタリングしたい場合は、オプションのalign="位置"を使います。

例 <H2 align="center">文字の様体</H2>   ←これはセンタリングのとき。   

【文中のテキスト】
文中のテキストはBODYタグ内に文字を置いておけばそれで表示されますが、例えば「文字を大きくしたい」、「文字に色をつけたい」などのときには<FONT>...</FONT>タグを用います。
まず、文字のサイズを変えるにはSIZEオプションを使います。(SIZE="n"と表記し、nには1から7の数字が入ります。見出しとは逆に1が最小、7が最大になります。)

例 <FONT SIZE="4">サイズを変更します。</FONT>

SIZE="1"での表示
SIZE="2"での表示
SIZE="3"での表示
SIZE="4"での表示

SIZE="5"での表示

SIZE="6"での表示
 

SIZE="7"での表示
 

テキストの色を変えたい場合はCOLORオプションを使います。

例1 <FONT COLOR="RED">色を変更します</FONT>
例2  <FONT COLOR="#0000FF">色を変更します</FONT>

例2のように、BODYタグで使った16進数での色指定がここでも使えます。(色を表す値の詳細は2009年11月14日の記事で。)

テキストを太くしたいときは<B>...</B>で囲みます。(ボールドのB)
斜体のときは<I>...</I>で囲みます。(イタリックのI)
下線をつけたいときは<U>...</U>で囲みます。(アンダーラインのU)

例 <B>太字になります</B> <I>斜体になります</I> <U>下線をつけます</U>
 
太字になります 斜体になります 下線をつけます





  
特殊文字【HTML】
 
HTMLタグそのものを文中に書きたい場合、そのまま記述すれば、表示されることなくその機能が働いてしまいます。

例えば<BR>という改行のためのタグをその説明のためにページ上に表示したい場合、そのまま<BR>と文中に記述しても、これはタグとみなされ、<BR>の文字は表示されず、改行されてしまいます。
このようなときのためにHTMLの記述には特殊な文字が用意されています。
この特殊文字で記述することにより、代替文字として使用することができます。
まず < 記号。これは代替文字&lt;を使用します。そして >記号 は&gt;を使用します。(どちらもタグとはみなされないので < > が表示されます。囲まれたBRなどの文字列はそのまま記述しておいてかまいません。)
 
例 &lt;BR&gt; このように記述するとページ上では改行機能は働かず、文字<BR>として表示されます。(便宜上、先頭のみ特殊文字&lt;を使えば後方の&gt;>のままでもかまいません。)

これ以外にも " の代わりの&quot;& の代わりの&amp;などがあります。

 



 
リンク1【HTML】

ここでいう「リンク」とはハイパーリンクのことで「ページやその属するオブジェクト(画像など)間同士の連結」を意味します。だだし、一般的には「
アンカー」の意味も含みます。
 
アンカーとは、HTMLによってリンク先の情報を与え、ハイパーリンクに設定する要素(タグ)のことです。

例 TOPページへ飛びます。

上のような、別のページへジャンプさせるためのもの(一般に「リンク」と呼ばれるもの)がアンカーです。

「リンク」には指定先の違いで、ページ内へのリンクとページ外へのリンク、そしてその混合したものの3種類に分けることができます。
これら3種類のリンクの種類のすべてについて<A HREF="(リンク先)">...</A>タグを用います。違いはHREFの部分です。
ページ内のリンクにはブックマークを用います。ページ外のリンクにはそのページへのURL(ホームページのアドレス)を指定します。そして、他のページに設定されたブックマークへのリンクにはURLとブックマークを組み合わせたものを使います。

以降それらを3回に亘って説明していきます。今回はその1回目として「ページ内へのリンク」を説明します。
 

【ページ内へのリンク】

ページ内へのリンクにはブックマークというものを使うということは説明しました。このブックマークとは何かを先に説明しておきましょう。
和訳すれば本などにはさむ「しおり」のことをいい、ここでいうブックマークもホームページ上のしおりと考えていいでしょう。
ただし、現実に本などで用いる「しおり」とは違い、一般の訪問者がページ上で目視したり、設定を変えたりできるものではありません。HTMLのエンジニアがリンク先を設定するためにHTML内部にあらかじめ埋め込んでおく目印に過ぎません。
 
HTMLタグでは次のように記述します。

例 [ブックマーク側](ジャンプ先)

    <A NAME="(任意のブックマーク名)">...</A>

任意のブックマーク名とはいっても、同じページ内に重複する名前は使えません。
また、「...」の部分はインデックスとなる文字列や画像を示します。


例 [リンク(アンカー)側](ジャンプ元)

   <A HREF="#既存のブックマーク名">...</A>
 
  




 
リンク2【HTML】

今回は別ページへのリンクです。
 

【ページ外へのリンク】

ページ外へのリンクには
URLを用います。
前回の記事のHREFの部分がURLにかわるだけです。
 
URLとはUniform Resource Locatorの略でインターネット上に存在する情報資源(ページや画像など)の場所を指し示す記述法のことです。通常、http://www....で始まります。ちなみにhttpとはhyper text transfer protocolのことで、hyper text(いわゆるホームページ)の転送規約のことです。
これ以外にFTP://などを使うこともありますが、こちらはfile transfer protocolのことでファイル転送規約をあらわします。
これらの通信規約はブラウザやFTPソフトなどにおいて合わされておりますので、一般ユーザーがそれを意識する必要はありません。

例 <A HREF="http://www.ops.gr.jp">岡島パソコンスクールポータル</A>

   岡島パソコンスクールポータル  上のタグにより左のようなアンカー(リンク)が設けられます。

例のような外部のページの場合はhttp://www....で始まるURLを指定しますが、自サイト内の別ページへのリンクの場合、「相対参照」で記述することができます。
 
例 <A HREF="./ind_1002.html">2月分アーカイブ</A>

例のような記述ができるのは、ops.gr.jpのディレクトリに呼び出し先のページが存在する場合、つまり、呼び出し元ページと呼び出し先ページが同じディレクトリ内に存在していることが前提です。違う場合はそれに合わせたパスの記述が必要です。
 
なお、この記述は下のURLの省略形と考えてください。もちろん、冗長ではありますが、下のような記述でも呼び出せます。

例 <A HREF="http://www.ops.gr.jp/ind_1002.html">...
 
 




 
リンク3【HTML】

今回は別ページのブックマークへのリンクです。
 

【ページ外のブックマークへのリンク】

前回説明したように、ページ外へのリンクにはURLを用いますが、さらにページ外のページにブックマークが設定されている場合には、複合的な記述が可能です。
HREFの部分にはURLに続けて#+ブックマーク名を記述します。(この場合、ブックマーク名がblg0000036という前提です。)
 
<A HREF="http://www.ops.gr.jp/ind_1002.html#blg0000036">2月分アーカイブ</A>

もちろん、省略形である「相対参照」を使って、次のような記述もできます。

例 <A HREF="./ind_1002.html#blog0000036">2月分アーカイブ</A>

前回、前々回の記事をまさに組み合わせたものです。普通のURLだけならページ(先頭)へ移動するだけですが、ブックマークも合わせて指定することにより、ページへ移動後、そのブックマークの位置へジャンプします。 

 




 
電子メール【HTML】
 
今回の「電子メール」はタグの分類でいえば「リンク」に含まれるものですが、分けておいた方が、読まれる方が頭を整理しやすいだろうと考え、あえて「リンク」とは分けておきました。

この記事をご覧の方の多くは既に電子メールシステムをお使いだと思います。携帯電話、パソコンと、端末の違いはあれ、今では誰もが使用し、電話以上に身近な存在となっています。
私も電子メールは十五年前から使い続けています。もちろん、便利なものですが、ある意味、とても鬱陶しいものです。スパムメールの増加もその一つですが、それ以外でも、早くから受信していたのにチェックを怠り、翌日になって受信に気づいて後悔するなども少なくありません。
そのため、今はパソコンに来たメールはすべて携帯電話に転送するようにしています。

さて、余談はこれくらいで、今回の「電子メール」はホームページ上に電子メールを送信できる仕掛けを埋めこんでおくものです。パソコンでネットサーフィンをしている人なら誰もが一度くらいは使ったことがあるはずの仕掛けです。

例 azuma@ops.gr.jp  左をクリックするとメールソフトが起動されます。

例のタグは<A HREF="mailto:ask@siesta-soft.co.jp">ask@siesta-soft.co.jp</A>と記述します。
当然、ページを見た人がこちらにメールをくれるための機能ですから、自身のメールアドレスを記述します。
上のHTMLタグで、maito: 直後の1つ目のask@siesta-soft.co.jpはメールソフト起動時の宛先となる実アドレスで、<A HREF...>と</A>で挟まれた2つ目のask@siesta-soft.co.jpは文章上のインデックスとなる部分です。
したがって、mailtoの部分でアドレスを設定しておけば、インデックス部分はアドレスでなくてもかまいません。

例 メールソフト起動  これでも大丈夫です。

<A HREF="mailto:azuma@ops.gr.jp">メールソフト起動</A>

クリックした人には確認できたと思いますが、起動されたメールソフトの「宛先」にmailto:で指定したアドレスが既に設定されているはずです。これ以降は通常のメールソフトの使用と同じです。「件名」、「本文」など必要事項を入力し、送信ボタンを押せばメールは送られます。

もし、「宛先」同様、「件名」もあらかじめ設定させておきたい場合には、次のように記述します。

例 岡島パソコンスクールへのお問い合わせ

例のタグは<A HREF="mailto: azuma@ops.gr.jp?subject= 岡島パソコンスクールへのお問い合わせ">ISOBE PCサークルへの問い合わせ</A> となります。
?以降の記述はそういう決まりですので記述形式だけ確実に覚えてください。CGIまでこの記事が進んだときには詳細に説明します。

なお、上の方法までは入門書でもよく見られる方法ですが、次の記述によりCCやBCC、さらにBODYなどの欄もあらかじめ表示させて起動させることが可能です。
 
CCの記述  <A HREF="mailto:azuma@ops.gr.jp?cc=送信先リスト群">CC付電子メールの起動</A>
 
BCCの記述  <A HREF="mailto:azuma@ops.gr.jp?bcc=送信先リスト群">BCC付電子メールの起動</A>
 
BODYの記述 <A HREF="mailto:azuma@ops.gr.jp?body=本文">本文付電子メールの起動</A>

 もちろん複数の式を組み合わせて用いることができます。この場合は各式の間を&でつなぎます。

複合式

<A HREF="mailto:azuma@ops.gr.jp?subject=あるサイトからの返信&body=次のとおり返信します。">複合式</A>
 
このサイトの「メール/FAQ/コメント」ページにあるForm to Emailシステムも電子メールシステムですが、こちらはOutlookなどのメールソフトを利用せず、用意されたテキストボックスに入力された文章・文字列を直接、指定したアドレスのメールボックスに送信するシステムです。簡単・確実を望むならここで紹介したメールアドレス起動の方がいいです。が、何らかの機能を持たせたいなら、Form to Emailシステムを作らねばなりません。(HTMLだけでは、このようなシステムは作れず、CGIという機能を使わねばなりません。)

 

 
文責 東  幸 生   
 

     
   | 会社概要 | IT事業部 |採用情報 | 個人情報の扱い | 著作権 |