記事一覧

・	水平線【HTML】【2010.02.05】
・	画像【HTML】【2010.02.012】
・	相対参照【HTML】【2010.02.14】
・	背景【HTML】【2010.02.19】
・	マーキー【HTML】【2010.02.20】
・	文字スタイル【HTML】【2010.02.26】

カレンダー＆アーカイブズ

2010年2月


	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

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


*Record*

・ 2010.02.05 (金)
	Personalクラス 19:30-21:30 　於:生涯学習センター　　　　第二研修室
・ 2010.02.12(金)
	Homepageクラス 19:30-21:30 　　於:生涯学習センター　　　　控室
・ 2010.02.14(日)
	Word・Excelクラス 19:30-21:30 　　於:生涯学習センター　　　　控室
・ 2010.02.19 (金)
	Personalクラス 19:30-21:30 　於:生涯学習センター　　　　控室
・ 2010.02.20(土)
	Word・Excelクラス 19:30-21:30 　　於:生涯学習センター　　　　実習室
・ 2010.02.26(金)
	Homepageクラス 19:30-21:30 　　於:生涯学習センター　　　　控室

Recommendation（Links）

【Be my best friend】

八神純子さんのアルバムJUNKO THE BESTに収録された曲。
BESTという名がついているが、アルバムの半分は新規収録曲。この曲は山川恵津子さんの曲だが、新規収録。
いまだに最も好きなシンガー。
歌の上手さももちろんだが、なにより作曲の才能には目を見張る。
音楽が好きなのでいろいろなシンガーの曲は耳に入れるが、いまだ彼女を超えるライターは私の中ではいない。
同アルバムに収録された「愛色の季節」も同じく好きな一曲である。
　

彼女のアルバムは全体的に好きで、アルバム「純」までは全て買ったが、アルバム「コミュニケーション」、「純」あたりで好みの音楽からはずれてきたような気がして、それ以降は買うこともなかった。
特に思い入れのあるアルバムは「Lonely girl」と「Full Moon」。
(Yukio)

;

アーカイブ　［2010年2月分］

2010年2月5日（金）

水平線【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">のように併用することも可能です。

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

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

Posted by Yukio

記事 No.0000035　


2010年2月12日（金）

画像【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日の記事には取り上げていないので、次回、詳細に取り上げます。

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

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

Posted by Yukio

記事 No.0000036　


2010年2月14日（日）

相対参照【HTML】

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

./image/gazou.jpg

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

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

../gazou.jpg

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

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

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

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

Posted by Yukio

記事 No.0000037　


2010年2月19日（金）

背景【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>

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

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

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

Posted by Yukio

記事 No.0000038　


2010年2月20日（土）

マーキー【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>

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

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

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

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

Posted by Yukio

記事 No.0000039　


2010年2月26日（金）

文字スタイル【HTML】

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

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

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

H1での表示

H2での表示

H3での表示

H4での表示

H5での表示

H6での表示

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

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

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

例　サイズを変更します。

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

SIZE="5"での表示

SIZE="6"での表示
　
SIZE="7"での表示
　

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

例1　色を変更します
例2 色を変更します

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

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

例 太字になります　斜体になります　下線をつけます

太字になります　斜体になります　下線をつけます

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

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

Posted by Yukio

記事 No.0000040　

過去のデータを読むときにはサイドバーの「カレンダー&アーカイブズ」より。