ホームへ戻る
      
     
    
 
記事一覧
HTMLの構造【HTML】
2010.01.08】
タイトルの表示【HTML】
2010.01.09】
キャラクターセット【HTML】
【2010.01.15】
リロード【HTML】
【2010.01.19】 
ジャンプ【HTML】
【2010.01.22】 
検索キーワード【HTML】
【2010.01.23】 
文章の記述【HTML】
【2010.01.29】 
改行【HTML】
【2010.01.30】 
 
 
カレンダー&アーカイブズ

   

2010年1月
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
31
 
カレンダーの上にあるセレクトボックスを用いてアーカイブ(過去のデータ)を表示。
赤字
の日はクラスやイベントのある日。
その中で下線のあるものは記事があり、それへのリンク。
同日に複数の記事がある場合は先頭の記事に飛ぶ。
祝祭日はその日の背景に日の丸が表示されるがクラスやイベントがない場合、数字は黒字。

 
Record
 
 
 2010.01.08 ()
Personalクラス
    19:30-21:30
   於
:生涯学習センター
    控室
 
 
 2010.01.09()
Word・Excelクラス
    19:30-21:30
  於
:生涯学習センター
    第一研修室
 
 
 
・2010.01.15(金)
HomePageクラス
    19:30-21:30
  於:生涯学習センター
    第一研修室
 
 
・2010.01.19(火)
Word・Excelクラス
    19:30-21:30
  於:生涯学習センター
    第一研修室
 
 
・2010.01.22(金)
Personalクラス
    19:30-21:30
  於:生涯学習センター
    控室 
 
・2010.01.23(土)
  Word・Excelクラス
    19:30-21:30
  於:生涯学習センター
    第二研修室
 
 
・2010.01.29(金)
Personalクラス
    19:30-21:30
  於:生涯学習センター
    第一研修室
 
 
・2010.01.30(土)
HomePageクラス
    19:30-21:30
  於:生涯学習センター
    第一研修室
 
 
 

 

RecommendationLinks

  

 
【4月25日橋】
久保田早紀さんのアルバム「サウダーデ」収録曲。
「異邦人」を筆頭に、当時の彼女の曲は異国情緒あふれる曲が多かったが、この曲もポルトガルの港町を想起させる1曲。
このアルバムの半分はポルトガル録音でファドギタリスト達が参加している。「ファド」という音楽を知ったのもこのとき。
他のアルバムと違い、ファドギター中心の曲が多く、好みは大きく分かれるだろうが、当時から私はこのアルバムが一番気に入っていた。
特にファドギター伴奏の「アルファマの娘」、「トマト売りの歌」、「18の祭り」、そしてこの曲の4曲が気に入り、レコード針が擦り切れる程に聴いていた。
このアルバム以降、つまり「エアメールスペシャル」からは曲がPOPになり過ぎ、私の好みからは外れてしまった。(何様か...。)
さて紹介の曲は失恋の歌で、ある男性のことを打ち明けた同性の女性にその男性を奪われてしまう、という悲しい曲。
今では日常茶飯事のような出来事かもしれないが、時代にかかわらず三角関係(特に友人が競争相手)というのは悲惨である。

※このタイトルの4月25日橋という橋はポルトガルに実在する橋の名称である。


(Yukio)

 
 
    
 
 
 
 
 
 
 
  アーカイブ [2010年1月分]
 
2010年1月8日(金)

HTMLの構造【HTML】
 
後れ馳せながら、明けましておめでとうございます。
2010年に入り、サークルでは新たな講座として「
ホームページの作り方」講座を行っていく予定です。
つきましては、今回から特記する記事のないときは、ホームページに関する記事を中心に取り上げていくつもりです。
 
「ホームページ」とは通称であり、「Webページ」が世界共通の表記です。ここで、あえて、「ホームページ」と表記するのは、日本ではホームページの呼び名の方がより周知されているからです。(本来、ホームページはサイトのトップページの意)
ただし、トップページの意味ではないことを明確に表記するため、home pageとは記述せず、homeとpageを連結したHomepageと1語で表記しました。

私がホームページの作り方を指導するときには、必ず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サーバーというインターネット用のマシンにページ・画像一式をアップロードしなければなりません。

詳細はクラスで説明します。


※わかりにくいようであれば説明しますのでクラス開催日にお申し出ください。
 


Posted by Yukio 記事 No.0000027 
 
 
  
2010年1月9日(土)

タイトルの表示【HTML】
 
昨日に引き続きホームページ作りです。

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

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

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

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

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


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

詳細はクラスで説明します。


※わかりにくいようであれば説明しますのでクラス開催日にお申し出ください。
 


Posted by Yukio 記事 No.0000028 
 
 
  
2010年1月15日(金)

キャラクターセット【HTML】
 
既にホームページ作りの記事は3回目ですが、サークルでのクラスは今日、始まったばかりです。

前回の記事で、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>

詳細はクラスで説明します。


※わかりにくいようであれば説明しますのでクラス開催日にお申し出ください。
 


Posted by Yukio 記事 No.0000029 
 
 
  
2010年1月19日(火)

リロード【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...>タグは併用できます。

詳細はクラスで説明します。


※わかりにくいようであれば説明しますのでクラス開催日にお申し出ください。
 


Posted by Yukio 記事 No.0000030 
 
 
  
2010年1月22日(金)

ジャンプ【HTML】
 
ここでいう「ジャンプ」は前回の記事の「リロード」とよく似ています。
違うのは、前回の「リロード」が同じページを読み込むのに対して、「ジャンプ」は異なったページを読み込むという点です。
  

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

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

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


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

 
このタグと「リロード」を併用できないことはありませんが、一度、別のページへジャンプしてしまうと、以降、リロード機能は働きません。(もちろん、次のページ自体に「リロード」を組み込めば、次のページも「リロード」機能は働きます。)

詳細はクラスで説明します。


※わかりにくいようであれば説明しますのでクラス開催日にお申し出ください。
 


Posted by Yukio 記事 No.0000031 
 
 
  
2010年1月23日(土)

検索キーワード【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」の一要素に過ぎないことを理解してください。

詳細はクラスで説明します。


※わかりにくいようであれば説明しますのでクラス開催日にお申し出ください。
 


Posted by Yukio 記事 No.0000032 
 
 
  
2010年1月29日(金)

文章の記述【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、カラー=黒)が設定されたものとみなされます。

詳細はクラスで説明します。


※わかりにくいようであれば説明しますのでクラス開催日にお申し出ください。
 


Posted by Yukio 記事 No.0000033 
 
 
  
2010年1月30日(土)

改行【HTML】
 
我輩は猫である。
名前はまだない。今回は改行のためのタグです。

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

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

(BODYタグ部以外省略)
 

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

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


詳細はクラスで説明します。


※わかりにくいようであれば説明しますのでクラス開催日にお申し出ください。
 


Posted by Yukio 記事 No.0000034 

過去のデータを読むときにはサイドバーのカレンダー&アーカイブ」より。
 
 
   
   
 
サークルについて 初級者用テキスト 会場案内 著作権・個人情報の扱い メール/FAQ/コメント ホームへ