2007年03月27日

ウロボロスいいよ

スキー行きてー
 
いや、スキー、行ったことないんですよ。(だから?^^
 
 
なんかLinux関連の話題を書いたからでしょうか、思いっきりLinuxユーザーからのアクセスが増えたんですが、すみません、正直ぼく小学生だからそんなのわかんない(´ヮ`)
 
 
それでそれで、次は[CSS]ホームページ作成講座とやらに入るところですが、なにせまだまだ脳内で原稿の整理がついてなくて・・・これからがんばりたいと思います。(まともにCSS始めたのはつい今年入ってですけど
 
 
うん、日記だ。紛れもない日記だよ。
 
 
感想コメントはぼくらの原動力。このブログを読んで役に立った、面白かった、ここ間違ってる、え、や、優しくなんかないわよ!別にアンタのために指摘したんじゃないんだからねっ!?ほ、ほんとは・・・好き。
 
 
 
 
・・・ともかく、原動力ですので、残していってくれると喜びます。シャイな方は右の方にあるGoogle様の広告をクリックして行ってくれても気持ちは伝わります(笑)
posted by ラリコ at 13:12 | Comment(0) | TrackBack(0) | 小日記

2007年03月26日

せっせかせっせかと

自宅のサーバーを一日中と設定していました。BINDでLAN内DNSをたてて、Apache2のVirtualHostをがんばって、LAN内用のドメインがインターネット上で使ってるドメイン(cosa2.com)と同じことでLAN内から独自ドメインで利用しているブログに一切アクセスできなくなって(あたりまえ)、めちゃくちゃあせりました。
 
あとDebian/sargeのstableにはPHP5パッケージがないんですねぇ。これもEtchのあおりでしょうか・・・まぁ、別にわざわざMakeするほどでもないから、いいんですけどね。
 
そして、結果、MovableTypeを設置することもできてよかったす。外からアクセスできない可能性大ですけど。
 
 
せっかくのサーバーもあまってるので、これを使ってなにかしようかとおもいますー。ネトゲとか
 
 
ちなみにメモ。
BIND9 設定反映(必ず各ゾーンのシリアルナンバーを上げること) rndc reload
Apache2 モジュール追加 / 削除  a2enmod  /  a2dismod
               サイト設定追加 / 削除 a2ensite  /  a2dissite
(ただのシンボリックリンクを貼って、Apacheをreloadさせるコマンドみたいだけど)
 
Apache2のVirtualHost設定(ネームベースの方ね)はsites-availableフォルダにファイルを作って、
 
<VirtualHost *>
DocumentRoot /home/ユーザー名/public_html
ServerName ユーザー名.ドメイン.comか何か
</VirtualHost>
 
だけでも設定できた。設定反映に、a2ensite忘れずに(`・ω・´)
本当は*のところに共有するIPを書いて、できればポートも書かないといけないらしいけど、一つしかIPないからいいかなー的な。もちろんIPベースなら書かなきゃだめだけど。あと、SSLは特性上ネームベースのVirtualHostはできないらしい。覚えておこう(`・ω・´)
 
Apache2の便利さに慣れたらもう1.3に戻れませんね!
 
ちなみに、前はmod_rewriteでマルチホストを実現しようとたくらんで(マルチではないか・・・バーチャルかな?)、こんなのを書いてたけど、同じドメインで外部サーバーにブログやらサイトなんかもってると、まぁむりぽ(´ヮ`)
(DNS設定は、*.ドメイン.comとかnetとか で、ワイルドカードなんか使って、全て飛ばしてたから。 )
 

       RewriteEngine   on
       RewriteCond     %{HTTP_HOST}    ^www\.cosa2\.com$
       RewriteRule     (.*)            /var/www$1      [L]

 

       RewriteCond     %{HTTP_HOST}    ^www\.[^.]+\.cosa2\.com$
       RewriteRule     (.*)            %{HTTP_HOST}$1  [C]
       RewriteRule     ^www\.([^.]+)\.cosa2\.com(.*)   /home/$1/public_html$2  [L]

 

       RewriteCond     %{HTTP_HOST}    ^[^.]+\.cosa2\.com$
       RewriteRule     (.*)            %{HTTP_HOST}$1  [C]
       RewriteRule     ^([^.]+)\.cosa2\.com(.*)   /home/$1/public_html$2  [L]

 
 とりあえず、%{HTTP_HOST}は定数で、\が来てるのは.をエスケープするためしか理解できん(ぇ
RewriteCondは書き換えの条件だったかな?
上から、wwwがついてるときには/var/www(デフォルトのDocumentRoot)に飛ばして、
www.ユーザー名.ドメインで来た時には、/home/ユーザー名/public_html、
ユーザー名.ドメインできたときも、/home/ユーザー名/public_htmlに飛ばす。感じ。
(もちろんうちのドメインがcosa2.comだったから上の例はcosa2.com)
 
あと上にも書いたけど、DNSの設定で、*.ドメイン名.comとかnetとか を全てこのサーバーに飛ばさなきゃだめ。回避コードを書くくらいなら、いっそVirtualHostにお引越し(`・ω・´)さっさとお引越し!
 
 
 
 
 
 
あとなぜか3ヶ月ぶりに鯖止めたら、気になっていたProFTPdの不具合が直った・・・気がする。やたらめったらログに深刻なエラーを吐き出してログインできなかったのに、うーん、やっぱりなにかたまってたんだろうか・・・??(そのまま一ヶ月も放置した俺も俺だが(´・ω・`)
 
 
ふぅ、これだけのことしかしてないのに、なんで一日もかかったんだろ・・・というか日記のつもりだったのに、なんでこんなに意味不明専門用語ちっくなものが飛び交ってるんだ・・・
posted by ラリコ at 09:42 | Comment(1) | TrackBack(0) | 小技術

[HTML]ホームページ作成講座その他タグ

さて、図表要素TABLEタグの説明も終わりましたので、これでほとんどHTMLのエッセンスはご理解いただけたと思います。

いよいよCSSと行きたいところですが、その前にちょっとした落ち穂拾いをしたいとおもいます。

普段あまり使われることがないかもしれませんが、こんなタグもあるよという話です。


<HR>


HR要素は文章中に横罫線を引くためのタグで、BRタグなどと同じように終了タグを持たないタグである。





インターネット上にあるこんな区切り線はHRタグで実現されていることが多いです。(たまにIMGタグで横に長い線の画像を貼っているものも見かけますが^^;


<UL></UL>
<OL></OL>


ULもしくはOL要素は箇条書きのための要素です。これら二つのタグはサブタグを持っていて、箇条書きされる個々の項目は<LI></LI>で括るようにします(LIタグは終了タグを省略して、まさに箇条書きのように書くこともできるようです)。また、ULとOLの違いはといいますと、下の例を見ていただければ分かるかと思いますが、

<UL>
<LI>すし</LI>
<LI>てんぷら</LI>
<LI>ふじやま</LI>
</UL>


  • すし
  • てんぷら
  • ふじやま

<OL>
<LI>ふじ <!-- <LI>タグは終了タグを省略してもよい -->
<LI>たか
<LI>なすび
</OL>

  1. ふじ
  2. たか
  3. なすび

このようにULで書いた箇条書きは●が打ってあるのに対して、OLでは数字が項目の前に勝手につきます。
また、この二つのタグは入れ子にすることもできます。その場合、LIの中にもう一つLIが入っていた場合文頭にある●が■や▼といったほかの記号に入れ替えられ、OLの場合に区別できるようにアラビア数字とギリシャ数字が使い分けられます。



また、箇条書きと似ていますが、定義リストを作成するための要素もあります。

<DL></DL>

定義リストとは、何かの項目について定義する場合に、定義文が改行されて字下げされているのを自動的にしてくれるものです。定義というとご大層な印象をうけますが、要するに説明するときに使われるものです。

定義リストでは定義する項目を<DT></DT>、その定義文を<DD></DD>で囲みます。

これも簡単な例を挙げてみましょう。

<DL>
<DT>HTML</DT>
<DD>Webページを記述するためのマークアップ言語W3Cが作成している規格で、最新版はHTML 4.01。</DD>
<DT>CSS</DT>
<DD>Webページのレイアウトを定義する規格。</DD>
</DL>


HTML
Webページを記述するためのマークアップ言語。W3Cが作成している規格で、最新版はHTML 4.01。
CSS
Webページのレイアウトを定義する規格。
このように説明する文章が勝手に字下げされているのがわかります。便利ですね〜普段使うことないと思いますけど^^;




<PRE></PRE>

PRE要素は整形済みテキストを表示するときに便利なものです。整形済みテキストとは、今までにも触れたようにHTMLは基本的に文章のレイアウトを苦手としています。たとえば、タグで括られた文章中で半角スペースをあけてもブラウザには無視されますし、TABスペースがいくつあってもきちんと反映されません。また、文の体裁を整えるために改行をいれようにもいちいち<BR>と書かなければいけません。

インターネットに公開したい文章には予めそのような体裁がすでに整えられていたり、またスペースの場所・間隔が大事な文章(例えばHTMLのコードもそうですね。スペースも改行も無視されて一行にずらっとならんだコードがあってもなかなか読めません)が多々あります。そんなときにこのPREタグを使えば便利です。いちいち<BR>と打たなくても改行してくれますし、半角スペースもTABスペースもきちんと表示されます。



しかし、あくまでもHTMLはマークアップ言語だということをお忘れずに☆使いすぎは禁物です。



文字参照

上でも言いましたが、HTMLにはタグなどのために<>&”などといった文字は特別な文字と認識され、そのままでは表示できません。しかしながら、これらの文字をどうしても表示させたい場合があります。そんなときには文字参照と呼ばれる方法を利用することが出来ます。

文字参照には数値文字参照文字実体参照の二種類がありますが、ここでは文字実体参照の方をご紹介します。
文字実体参照とはうえにあげたような特別な文字を特定の符号で表す参照方法です。

よく使われそうな参照文字をあげておきます。

<    &lt;
>   &gt;
&   &amp;
"   &quot;
 (半角スペース)   &nbsp;






さて、こんなもので、HTML編は終了したいと思います。まだまだ説明したくても説明しきれないことがたくさんありますが、それは出てきたときに説明していきますし、ここまで読んだみなさんのちからなら自分で調べることも出来ると思います。

インターネット上にはタグ辞書などと呼ばれるものも多数ございますので、そちらを参考にしてもいいかもしれません。

また、疑問・質問はコメント欄に書いてくだされば、お答えできる範囲で答えて行きたいと思います。



では、次回からはCSS編に突入したいと思います!!乞うご期待(
posted by ラリコ at 01:04 | Comment(0) | TrackBack(0) | 小技術

2007年03月25日

[HTML]ホームページ作成講座TABLEタグ

さてさて、お勉強の時間ですよー(笑)

勉強だと思うから嫌だからゲームだと思えばいいんだと言われて育ってきましたが、思い込みでどうにかなるんなら今頃僕もアインシュタインですね。別になりたくはないけど。あ、いやアインシュタインが嫌いとかじゃないですよ?ただ思い込みじゃなく、好きだということは何をするにしても必要ですよね。


まぁともかく、今日は表の書き方、タイトルどおりTABLEタグについてご説明いたします。

図表なんてそんなに滅多に使うことでもなかろうに、と思ってはいけない。実はホームページの作成においてはTABLEタグは意外なところにも使われていたりします。今日はそんな話。


<TABLE></TALBE>


まずは基本的なことから。図表要素はHTMLにおいて、表を構成する他のサブ要素とともに用いられ、柔軟に表を設計することを可能にする。しかし、表の作成はタグが複雑になりがちで、不適切なタグの開始や終了によってブラウザにうまく認識されない、思う結果にならないなどといった問題が起こることもある。

表要素は他の要素と違いいくつかのサブ要素を持っています(これは今までに紹介したプロパティ、タグの<>の内側にかく属性、とは違うもの)。


TABLE要素のサブ要素には主に以下のようなものがあげられます。これらのタグは今まで出てきたタグのプロパティと違って、<TABLE>このようにTABLEタグの開始タグと終了タグの間に入れ子になるように書きます。</TABLE>

<CAPTION></CAPTION>

表題要素。このタグに括られた文字は表題として扱われ、表の上に中央寄せされて表示されます。また省略することができます。


<TR></TR>

TR要素は表の1行をあらわします。このタグでTD要素を括るようにして表の一行を定義します。


<TH></TH>
<TD></TD>

TH・TD要素は表の各行の個々の列を表します。THとTDの違いは、THタグに囲まれた文字列はその行もしくは列の見出しとして扱われます。特に区別しない場合にはTDを用いることが多いようです。

また、通常各行(TRタグで括られた行)にあるTH+TDの数は等しくないといけません。つまり一行目に3コマあるときには二行目も三行目もそれ以降も全ての行はTH+TDの数が三つなければなりません。特別な場合に、セルを統括するときには特別なプロパティを指定した上で、THあるいはTDの数を減らせますが、これはまた出てきたときに説明したいと思います。


これだけだと何がなんだか分かりづらいと思いますので、簡単な例を挙げて説明したいと思います。

<TABLE border="1"><!-- TABLEの始まりを表します。borderプロパティは表の枠線の太さをあらわします -->
<CAPTION>表:東証株価指数</CAPTION><!-- 表の説明文です。 -->

<TR><!-- 表の一行目の始まりを表します。</TR>までが一行と認識されます。 -->
<TH bgcolor="#c0ebc0">    </TH><!-- THは見出しタグですが、これは一番上の行の一番左側のセルということになります。ワザと空白にしています。 -->
<TH bgcolor="#c0ebc0">株価指数</TH><!-- 一番上の行の二番目のセルです。表題は株価指数です。 -->
<TH bgcolor="#c0ebc0">前日比</TH><!-- 同様に三番目のセルです。これも表題タグです -->
</TR><!-- ここまでが表の一行になります。 -->

<TR><!-- ここから表の二行目になります。 -->
<TH bgcolor="#c0ebc0">TOPIX</TH><!-- 二行目の一番左のセルです。表題はTOPIXです -->
<TD>1530.64</TD><!-- TDも一コマをあらわすためのタグでしたね。二番目のセルです。表題ではないことに注意してください。 -->
<TD>3.10%</TD><!-- 同様に三番目のセルです。 -->
</TR><!-- 二行目はここまでです。 -->

<!-- 以下同じように続きます。 -->


<TR>
<TH bgcolor="#c0ebc0">大型株</TH>
<TD>1555.30</TD>
<TD>3.24%</TD>
</TR>

<TR>
<TH bgcolor="#c0ebc0">中型株</TH>
<TD>1583.96</TD>
<TD>2.75%</TD>
</TR>

<TR>
<TH bgcolor="#c0ebc0">小型株</TH>
<TD>2301.95</TD>
<TD>2.50%</TD>
</TR>

<TR>
<TH bgcolor="#c0ebc0">市場第二部</TH>
<TD>4318.03</TD>
<TD>2.22%</TD>
</TR>

<TR>
<TH bgcolor="#c0ebc0">マザーズ</TH>
<TD>1485.80</TD>
<TD>3.22%</TD>
</TR>

<TR>
<TH bgcolor="#c0ebc0">REIT</TH>
<TD>1643.87</TD>
<TD>-0.58%</TD>
</TR>
</TABLE>


実際には各タグの間に改行を入れる必要はありませんし、入れてもブラウザには反映されませんが、ここでは分かりやすさを重視するために、敢えてTR(行)のまとまりごとに改行を入れてみました。

各行の説明はコメント<!-- -->(前に出てきましたね。これにはさまれた文字列はブラウザからは無視されるのでした。)に譲って、ここでは簡単な補足をしたいと思います。

まずTABLEタグにborderプロパティが指定されていると思います。うえにも説明を書きましたが、これは表の枠線と中の区切り線の太さを指定しています。もちろん数字が大きければ大きいほど太い線になります。0を指定すると線が見えなくなります。

また、各THのタグにbgcolorプロパティが指定されているのが分かりますか?TR・TH・TDもそれぞれ要素ですので、このように各要素についてのプロパティも指定することができるんです。bgcolorは文字からもなんとなく想像がつきますが、背景色のことです。行或いは列の見出しと言ってもそのままでは通常のセルとなんら変わりはないので、ワザと背景色を変えて強調しています。色の指定については前にやった16進数のsRGBですね。


では上のHTMLを実際にブラウザに通してみます。

表:東証株価指数
    株価指数 前日比
TOPIX 1530.64 3.10%
大型株 1555.30 3.24%
中型株 1583.96 2.75%
小型株 2301.95 2.50%
市場第二部 4318.03 2.22%
マザーズ 1485.80 3.22%
REIT 1643.87 -0.58%


きちんと表題が一番上に表示されているのがわかりますね。・・・ところで、表題の背景色ですが、どうやら僕の執筆環境、というか、このブログの仕様上THタグにプロパティが指定できないみたいです。(本来は出来るはずなんですけどね・・・)
色つきで見たい方はご自分で確かめてください^^;


ところで、僕の場合もそうでしたが、Tableタグを使う場合中にいろんなタグを入れ子にするために途中でわけが分からなくなることも結構あります。きちんと各タグを終了させないとブラウザが混乱して望むような結果が得られないことがありますよ。そんなときには一つ一つタグを紙に書いて開始と終了をあわせてから入力するといいかもですよ。






さて、表についてはもう一つあります。上でもちょろっと言いましたが、TABLEタグには図表作成という本来の目的以外に利用される場合があります。

それはページのコンテンツのレイアウトを整えることです。


いままでの講座で習ったことを使ってHTMLを実際に自分で作ったことがある方は分かると思いますが、HTMLってなかなか思うようにコンテンツの場所を定めることができないものです。

たとえば、文章を二カラム(新聞のように二つのまとまりで文章を表示させる)で表示させることなんかなかなか難しいと思います。

こんなときにはTABLEを使えば解決します。

<TABLE border="0"><!--borderを0にしてならべても区切り線が表示されないようにします。 -->
<TR>
<TD><p>Webページを記述するためのマークアップ言語。W3Cが作成している規格で、最新版はHTML 4.01。HTMLは文書の論理構造や見栄えなどを記述するために使用される。また、文書の中に画像や音声、動画、他の文書へのハイパーリンクなどを埋め込む</p></TD>
<TD><p>Webページのレイアウトを定義する規格。これまで、WebページのレイアウトはHTMLを用いて記述され、HTMLにはレイアウトに関する仕様が大量に取り込まれたが、これは、文書の論理構造を記述するという本来のHTMLの目的に反するため、文書の視覚的構造を規定する枠組みとしてCSSが新たに策定された。CSSを使うと、フォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報を文書本体(及び文書の論理構造を記述したHTML)から切り離すことができ、ユーザが複数のレイアウトから適当なものを選択することができるようになる。WWWに関する標準化団体W3Cで標準化されている。</p></TD>
</TR>
</TABLE>

こうすると、このように2カラムに表示させることができました。

Webページを記述するためのマークアップ言語。W3Cが作成している規格で、最新版はHTML 4.01。HTMLは文書の論理構造や見栄えなどを記述するために使用される。また、文書の中に画像や音声、動画、他の文書へのハイパーリンクなどを埋め込む
Webページのレイアウトを定義する規格。これまで、WebページのレイアウトはHTMLを用いて記述され、HTMLにはレイアウトに関する仕様が大量に取り込まれたが、これは、文書の論理構造を記述するという本来のHTMLの目的に反するため、文書の視覚的構造を規定する枠組みとして CSSが新たに策定された。CSSを使うと、フォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報を文書本体(及び文書の論理構造を記述した HTML)から切り離すことができ、ユーザが複数のレイアウトから適当なものを選択することができるようになる。WWWに関する標準化団体W3Cで標準化されている。



TABLEって便利ですねー


ただし、以前にも言いましたが、HTMLはあくまで文章構造の要素をブラウザに示すためのマークアップ言語で、このような表示・レイアウトは本来CSSに任せるべきものです。
よって上のようなTABLEレイアウトはちょっとしたページなどではCSSをいちいち書くのが面倒くさいときに使われるテクニックで、本来推奨されるべきものではありません。
でもインターネット上を見てみても未だにたくさんのページがTABLE要素によってレイアウトされています。要するTABLEとCSSではお互い一長一短があるわけです。ここらへんはまたおいおい説明していきたいと思います。(とくにCSSに入ったらたっぷりやりたいですね)



では、本日もTABLEタグ一個でしたが、これで終わりたいと思います。TABLEタグには他にもいろんなプロパティがありますが、それも含めておいおい出てきたときに説明したいと思います。
posted by ラリコ at 01:54 | Comment(0) | TrackBack(0) | 小技術

2007年03月23日

[HTML]ホームページ作成講座IMGタグ

さて、今までの知識でも十分魅力的なページが作れるようになりました。


・・・あれ?なんか忘れてないか?

俺が見てきたサイトはもっといろんな図形や表が使われてて華やかだったぞ?


ご心配なく、忘れていませんよ。今日はそんな図形を書くタグを紹介したいと思います。
(あ、書くといっても画像は予め用意しておいてくださいね


<IMG>

IMG要素は文章中の指定箇所に画像を埋め込みます。IMGタグのプロパティにsrc及びaltがあります。

src
というのはsourceのことで、つまり埋め込む画像の在り処をあらわします。

altというのはブラウザにおいて画像が表示されなかった場合に表示される代替文字列です。
またIEなどでは画像にマウスカーソルをのせてしばらくすると説明が表示されますが、これもこのaltプロパティで指定されている文字列が表示されています。

画像の在り処にはAタグの場合と同じくURLを指定することができます。

たとえば、ピピネラ座(もうお馴染みですね)へのバナー画像を文章中に貼る場合には、

<IMG src="http://file.pipp.cosa2.com/banner.png" alt="ピピネラのバナー">

のように書きます。

そうすると、この様に表示されます。

ピピネラのバナー

IEの人はマウスカーソルを画像にのせてみてください。ピピネラのバナーという文字列が表示されると思います。

一見このaltプロパティはいらないように思いますが、例えばファイルの在り処が間違っていて、ブラウザがうまく画像を表示できなかった場合にでも、

存在しない画像

この様にaltで指定した説明が表示され、とりあえず雰囲気は伝わります。(また世の中には画像を表示できないテキストブラウザというものもあります。)

また、IMGタグはBRタグと同じように終了タグをもたないタグです



ところで、

以前Aタグが出てきたときには説明していませんでしたが、AタグのhrefプロパティにもIMGのsrcプロパティにもファイルの在り処を示すための方法が二つあります。

絶対パス相対パスと呼ばれるものです。


どういうことかといいますと、

絶対パスとはどこに自分(この場合には上のタグを埋め込んだ文章)がいようともあるファイルを絶対に指すパス(パスは道筋だと考えてください。)のことで、現実にたとえると、住所みたいなものです。住所はたとえ自分がどこに住んでいようとも、日本国○○県××市□□町1-2-3のように指定すれば手紙は届きますよね。

インターネット上の話に限って言えば、URL(UniformResourceLocator)でもって指定することができます。上のピピネラのバナーはこの方法(バナーのURLはhttp://file.pipp.cosa2.com/banner.png)で指定しています。

あれ?URLってブラウザのURLバーに入れるやつだよね?

って思った人もいるでしょう。

その通りです。
では試しに上のURLをブラウザのURLバーに入れてみてください。バナーの画像が表示されると思います。この様にインターネット上にあるすべてのファイルはURL(住所)を持っているのです。


では、相対パスとは何でしょうか。自分(上と同じくタグを埋め込んだ文章)を起点とした相手ファイルの居場所を指す指定方法です。
ちょっと難しいでしょうか。現実にたとえると、例えばご近所さんとの会話で、「うちのとなりのとなりに新しいスーパーがオープンしたんだって」と言うとします。もしあなたの家を知っていれば、スーパーの住所を言ってないのに、相手にはきちんと新しくオープンしたスーパーの場所が伝わっていますよね。これがまさに自分を起点としたファイルの指定方法。つまり相対パスなのです。

インターネット上のファイルもあなたのパソコンの中身と同じようにフォルダごとにファイルが入っています。例えば、画像を埋め込みたいファイルとその画像ファイルが同じフォルダに入っているとすれば、相対パスでは

<IMG src="./gazou.jpg" alt="サンプル画像">

この様にファイル名の前に./(ドットとスラッシュ)をつけるようにします。この./は省略可能で、単純にファイル名だけを指定しても構いません。

もし画像ファイルがsyasinというフォルダ
(以前にも申しましたが、HTMLとは本来ワールドワイドつまり世界中のコンピュータで理解できなければなりません、よってフォルダ名やファイル名には出来るだけローマ字や英語名を使いましょう。文字コードの問題もあって日本語のフォルダ名が通じない場合があります。)
に入っているとすれば、./syasin/gazou.jpgのように./フォルダ名/ファイル名のように指定します。

また、もし画像ファイルが一個上のフォルダに入っているのならば、../gazou.jpgのように../ファイル名のように指定します。

もうお分かりかと思いますが、

./
今いるフォルダ
../一個上のフォルダ

を示しています。


では、じゃあ絶対パスと相対パス、一体どっちがいいんだ!?という疑問が沸いてくるでしょう。

どちらにもそれぞれの利点があります。たとえば、相対パスは上の./や../でも分かるように、あくまで近くのものを指し示しめすのに適しているので、例えば、四つ上のフォルダだと../../../../のようになりますし、一個上のフォルダに入っている別のフォルダにあるファイルを指し示したい場合にもややこしくてしかたありません。また、相対パスでは違う人のページにある文章やファイルを指し示すことはできません。こんなときには絶対パスを使いましょう。

逆に同じフォルダにある文章・画像ファイルを指し示すのにいちいちURLを打つのは面倒くさいでしょう。そんなときには相対パスをオススメします。

また違う観点から見ると、インターネット上にある画像ファイルは通常著作権があり、使用に十分配慮が必要なうえに画像のある場所へいちいちアクセスするため、所有者のサーバーへの負担も問題となることがあるため、許可をとった場合などの特殊な事情を除き、IMGタグでは相対パスを使うといいでしょう。もちろん自分の画像なら絶対パスをつかってもいいんですけどね。

あとは、好みの問題ですね。


あ、上でも言いましたが、インターネット上には直リン禁止と書いてあるものがあります。これはそのファイル(文章なり画像なり)に直接リンクを貼ったり、IMGタグで呼び出してはいけないということです。サーバーから禁止されている場合もありますので、Aタグ同様注意してあげてください。


表の書き方について書こうと思いましたが、またまた長くなりましたので、また今度にしましょう!
(こうして予定はどんどん延びていきます。
posted by ラリコ at 23:43 | Comment(0) | TrackBack(1) | 小技術

2007年03月22日

合成写真ブーム

近頃、ピピネラ座でかかりっきりです。おれデザイナーでも写真家でもねーのに、なんで壁紙とか作ってんだ!?

最近のまじめな自信作。




うん、パクリっぽいぞー(


で、こんなのを作ってるとですねどうしても出てくるわけですよ。駄作というか電波作が。


さすがにピピネラ座には却下されたので、ここいらに晒し逃げ(

okikae.jpg



もう、思い残すことはない!(
posted by ラリコ at 02:37 | Comment(0) | TrackBack(0) | 小ネタ

[HTML]ホームページ製作講座Aタグ

ん、もうみんな飽きたということで終了でおk?



というわけで、第5回は昨日までに語れなかったタグについてお話いたします。

現在インターネットにおいて(それ以外の場所でも)なぜHTMLがここまでも発展したのでしょうか。それはHTMLにはこれから紹介するハイパーリンクという技術が実装されているためでしょう。ハイパーリンクというと凄そうな印象ですが、要するにみなさんがインターネット上のページでたどるリンクのことです。

いまや常識ですが、改めて考え見るとあれはすごいと思いませんか?言ってしまえば世界中の文章が一つにつながった感じです。例えばこのHTML講座も僕の力量が足りないところはリンクを貼ってここを参照してくださいって言えばそれだけで説明はついたようなものですね。(やりすぎると僕の存在価値がなくなりますが。。

では、その大変にすごいハイパーリンクですが、HTMLでは一体どうなっているのでしょうか。

もちろんご想像通り、これもタグですね。


<A></A>

A要素は参照するファイルへのURLを文章に貼り付けます。読者はこのタグに囲まれた文字列(或いは画像など)をクリックすことによってダイレクトに筆者が参考してほしいURLに飛ぶことが出来ます。
使い方は、

<A href="参照ファイルのURL">実際に文書で表示する文字</A>

例えば僕のもう一つのサイトピピネラ座に飛ばしたいときには、

<A href="http://pipp.cosa2.com/">ピピネラ座</A>

と書けばいいですね。そうすれば、

ピピネラ座

実際の文章にはこのように表示されます。ピピネラ座はこれからHPを作る人のためにフリー(無料)で使える素材を提供している素材サイトです。ここで得たHTMLの知識をすぐ発揮したいけど、ページを整えるためのイラストやアイコンがないという方は是非訪れてみてください。(じゃなくてもリンクを体験するために一度飛んでみるといいかもしれません。ハイパーリンクの便利さが体験できます。

前にも言いましたが、タグには要素のほかにもプロパティという項目が設定できます。Aタグの場合にはhrefというプロパティでリンク先のURL、またはファイルへのパスを指定することが出来ます。またこのほかにもtargetプロパティがよく使われます。これはリンク先のURLをどのウィンドウで開くかを設定するものです。

例えば、現在のページを表示しているウィンドウにリンク先のページを表示したい場合には、

<A href="http://pipp.cosa2.com/" target="_self">ピピネラ座</A>

と書けばいいですね。そうすれば、

ピピネラ座

上のリンクとの違いは実際に押してみると分かりますが、新しいウィンドウが開かず、いまのウィンドウで内容が表示されます。戻るときにはブラウザの戻るボタンを押してください。

同じウィンドウに表示してしまった場合今見ている内容はもちろん消えてしまいますので対比してほしいときなどには新しくウィンドウを開いてほしいときがあります。そんなときにはtargetプロパティに次のように指定します。


<A href="http://pipp.cosa2.com/" target="_blank">ピピネラ座</A>

と書けばいいですね。そうすれば、

ピピネラ座

このようになります。違いはやっぱり実際に押してみてください。ちなみに、targetプロパティを指定しなかった場合にはどうなるかといいますと、前にも言いましたとおりにタグはブラウザによって独自に解釈されていますので、ブラウザの設定によって動作は異なるようです。僕のIE6の環境ではtarget="_self"と同じ動きをしました。



Aタグのように同じタグにいくつものプロパティがあることがあります。Aタグにも上に紹介した以外にもプロパティがありますし、以前紹介したタグ要素のほとんどにもプロパティが存在します。ただしこれらは普段あまり使われないので、実際に使うときに調べるといいでしょう。ここらへんもなれが必要です。HTML タグ などと検索してみるといろんな資料が見つかりますし、この講座でも今後必要に応じて紹介していきます。


少々短いようですがリンク要素はそれだけ大切ですので今日はここまでにしておきましょう。


注:インターネット上のサイトにはこのページにはリンクを貼らないでくださいやリンクはトップページにお願いしますなどといった注意書きをよく目にすることがあります。そのような場合にはサイトの管理人の都合がありますので、素直に従ってあげてください。
posted by ラリコ at 02:03 | Comment(0) | TrackBack(0) | 小技術

2007年03月21日

[HTML]ホームページ製作講座タグの詳細2

先々日に岩瀬敬吾のインストアライブに行ったっていう記事をあげて以来毎日一人は岩瀬敬吾っていう検索ワードでここにたどり着いてるんですが、ごめんなさい普通ににわかファンです。。

さて、自己満足HTML講座シリーズ今日で4回目になりました。もうそろそろ皆さん飽きてきたころですかね?僕はもう飽きてきたころです(ぁ

まぁ、真摯なる読者のみなさんのためにもまだまだがんばりたいと思います。


今日は前回の続きでいろんなタグの詳細についてお話したいと思います。予ねて言っていますようにHTMLとは本来文章の構造を意味づけする言語であり、各タグもブラウザによって独自に解釈され、視覚的にその囲まれた部分の構造が理解できるように表示されるわけです。しかし、それでは文章の表示を意図的に変えたいときには困ることがあります。

例えば、第一段階見出しと下位の見出しの大きさの差をなくしたいときや、文字の大きさや色を変えたいときなどです。

そのために、CSS(CascadingStyleSheets)と呼ばれるシステムが用意されています。これはそのスタイルという言葉からも連想されるようにまさに文章の体裁を整えるためのシステムなのです。

ところが、簡単な文章などのためにわざわざCSSを読み込んだり、いちいち定義するのが億劫な場合もあります。そんなときのためにHTMLには独自に文字の様式を指定する要素が実装されています。(ここらへんの成り立ちの経緯にはすこしややこしい事情があるようです。詳しく知りたいひとはググってみるといいかもしれません。)

これらの要素を使うことによって簡単に文字の様式を変えることができますが、何度も言っていますようにHTMLとは本来文章の構造を記述する言語であり、このようなフォントスタイル要素(文章の表示を無理やり変える要素)の仕様は前にもお話したHTMLの仕様書でも推奨されていません。また、HTMLはブラウザが解釈しているためCSSと違い、ブラウザ毎に少しずつ違いが出るようです。デザインをきちっと整えたい場合はCSSを使うことをオススメします。本講座でもHTMLが終わりましたらCSSの講座に移りたいと思います。僕が飽きていなかったら(ぁ



<B></B>

Bold要素と呼ばれるものです。つまり囲んだ文字列を強制的に太字で表示させるためのタグです。前々回の宿題にも出ていましたね。


<I></I>

Italic要素です。囲んだ文字をイタリック体にします。これも前々回の宿題になっていたものでした。注意すべきなのは、イタリックにすると確かに文章の中では目立ちますが、多くの場合読みにくくなるという弱点があります。


実はあんまり推奨されていないタグを宿題に出すのはどうかと悩んだものですが、すぐに表示が違うということでは分かりやすいので、タグの効果の分かりやすさを優先させていただきました。多用は厳禁ですが、ちょっとくらいなら・・・ダメ?あっそう。


<BIG></BIG>

見ての通りBIG要素です。囲んだ文字をワンサイズ大きいものにします。これと反対なのが下のSMALL要素です。


<SMALL></SMALL>

SMALL要素。つまり文字を一段階小さなものにします。


<FONT></FONT>

FONT要素です。フォントスタイル指定要素の全てを担っているといっても過言ではないでしょう。実は上のBIG要素もSMALL要素もこれひとつで実現可能なのです。また多くの場合、FONT要素は文字の色指定などに使われます。本来はCSSを使うべきなのですが、便利で簡単なので僕もよく使ってしまいます。

使い方は、
<FONT color="" size="大きさ"></FONT>
などと、色ならタグの中のFONTに続いて半角スペースをあけ、color=のように書きます。また、慣例的に指定した値を""(ダブルクオーテーション)で囲む習慣があるようです(ここらへんにもきちんとした決まりがあるようですが。)。このようなタグの中にかく要素以外の指定部分をプロパティと呼びます。サイズについても同じです。また一番最初の回の宿題でお分かりでしょうが、HTMLのタグについてはスペースに至るまで全て半角書かなければなりません


colorプロパティに指定できる値は色名を直接英語で指定するか、#を先頭につけた16進数のsRGB値で書きます。

sRGB値とは昔美術などで習った光の三原色(この三色の光で全ての色を表現できるんですね)であるR(Red)・G(Green)・B(Blue)の三色のそれぞれの強さ(つまりどれぐらい混ぜるか、ですね)を0~255(もちろん0が最小で255が最大です)までの数字で指定して、16進数に変換し、R・G・Bの順番で並べた2桁*3の16進数の数字です。

考えてみれば分かることですが、光は混ざり合えば合うほどに白になりますので、各色が最大に混ざり合った色(sRGB風に書けば#FFFFFF)はをあらわすことになります。以下に16進数表示と色名をいくつか書きますので参考にしてください。

Black #000000
Gray   #808080
Maroon  #800000
Purple  #800080
Green #008000
Olive #808000
Navy #000080
Teal #008080
Silever #C0C0C0
White #FFFFFF
Red #FF0000
Fuchsia #FF00FF
Lime #00FF00
Yellow #0000FF
Blue #0000FF
Aqua #00FFFF

このほかにも色名はたくさんありますし、sRGB値については256^3(256の3乗)もの色が指定できますのでいろいろな色を試してみるといいでしょう。またインターネット上にはいろんな色のRGB値を見本とともに提供しているサイトも見かけられますので利用してもいいかもしれませんね。


サイズ
sizeプロパティに指定できる値は1~7までの数字で、何も指定していないときの基本フォントサイズは3になります。(つまりBIGタグを一回使えばフォントサイズは4になるわけです。)


もう耳にタコができるほど言っていますが、HTMLのタグ解釈はブラウザソフトに頼っていますので、同じcolor="Red"で、size="4"でもブラウザによっては違いが発生することも珍しくありません。いやならCSSを使いましょう(笑)





さて、今回は無理やりに文字のスタイルを指定するタグを紹介してきましたが、これらのタグの使用はあまり推奨されていません。便利だからって使いすぎないようにしましょう。またこのようなフォントスタイルタグには他にもフォントを等幅フォント(文字の字間が全て同じ幅のフォント)にする<TT></TT>などがあります。


では今回はここまでです。次回はタグの中でも特別な機能を備えているものたちを紹介したいと思います。宿題は前回と同じように今回紹介しましたタグをできるだけ多くつかって文章を作ってください。また特にFONTタグのプロパティについていろいろなものを指定してみてください。(本来は推奨されていないタグを使えという宿題は心苦しいところではありますが。

なによりも慣れは肝心です☆
posted by ラリコ at 00:04 | Comment(0) | TrackBack(0) | 小技術

2007年03月19日

[HTML]ホームページ製作講座タグの詳細1

飽きないうちに一気に攻めます!(何
さて、ホームページ製作講座、今日で三回目です。
 
いつもどおり復習から入りましょう。
 
まず、HTMLとは文章の要素に印をつけるための言語でした。その印には<></>(タグ)と呼ばれるもので文章を囲めばよかったですね。前回の宿題では5つの要素をサンプルに出しました。
 
 
html4.jpg
 
 
こんな感じになりましたら正解です。
 
これを見ればまたもや賢明な読者の皆さんにはお分かりでしょうが、要素のマークをつけられた文章はブラウザに読み込まれると自動的にその要素にふさわしい表示になります。それがまさにホームページなわけです。(ホームページという呼称は不適切な気もしますが、ウェブページと呼ぶとちょっと賢くなった気分かもしれません。慎重な人はHTML文章と読んでくださいw
 
 
ところで、上のサンプルを見ると、タグで囲んでも一見するとなにも起きていないかのように見えるタグもありますね。それも踏まえて一番最初に見せたサンプルについて解説しましょう。
 
忘れた人のために。こんなファイルでした。 
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift-JIS">
<TITLE>HTMLを使ってみよう</TITLE>
</HEAD>
<BODY>
<!-- ここから本文部分 -->
<H1>連載HTML作成講座</H1>
<P>HTMLはマークアップ記述言語の一種で、
ドキュメントの構造を記述するための言語であるSGMLより派生した。
HTMLはSGMLの特徴である「文章の意味を構造から記述できること」に加え、
文章以外の画像を埋め込んだり、また<STRONG>外部文章への参照を直接指示</STRONG>することができます。</P>
</BODY>
</HTML>

 
順番に見て行きましょう。まずは1行目
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">

 
普通の初心者向けHTML講座には出てこないかもしれませんが、ここでは今後(スタイルシートとか)のためにあえて説明することにしました。
 
最初にも言いましたがHTMLとは全世界共通の言語でなくてはなりません。つまり、それにはれっきとしたルールが必要なわけです。またHTMLは自然言語(普通にしゃべる言葉)と違って人間が作り出したものですので、何回も必要に応じてその文法というべき仕様が幾度か変わっています。ブラウザソフトはこの仕様に沿ってHTMLを解釈するわけです。
この仕様はW3Cと呼ばれる機構が制定していて、上のタグではその仕様のバージョン4.01を指定しているわけです。また多くの初心者サイトで指定してないこともありますが、指定しないでおくとブラウザが都合のよいように定義してくれます。(大雑把ですね
 
またちょっと混乱するかもしれませんが、実は同じバージョン4でもいくつかの定義があるのです。いきなりバージョン4を適用しても多くのホームページでまだバージョン3に従っていたらせっかく新しいバージョンを制定してもなかなか広まってくれないません。その期間にはどちらのバージョンでもきちんと表示されるように同じバージョン4内にもいくつかバージョンがあります。つまり転換期用なわけですね。興味のある方は文章型定義で調べてみてください。思うように情報が出てこない場合にはw3cなどとキーワードを増やしてみるといいかもしれません。
 
さて、ちょっと長くなりましたがここのところは完璧に理解する必要はありません。分からなければ、サンプルをそのままコピーすればいいのです。
 

<HTML></HTML>
 
 HTML要素です。要するにこのタグにはさまれた文章がHTML文章であると指定しているのです。
 
 
<HEAD></HEAD>
 
HEAD要素。現実世界の文章にたとえるとちょっと難しいのですが、文章についての説明をするところです。このタグに囲まれたところはブラウザには表示されません。タグを閉じ忘れると文章全体が表示されなくなり、困ったことになります。
 
 
<META http-equiv="Content-Type" content="text/html; charset=Shift-JIS">
 
メタ要素と呼ばれるものです。いろんなことをブラウザに教えるためにあるタグです。例えばここでは二つの事柄を示しています。
 
content="text/html
 
一般的にブラウザはHTML文章以外にもいろんなファイルが読み込めたりします。例えば、拡張子.txtとついたテキストファイルをブラウザで開いても内容はしっかり表示されますし(改行はしっかりされませんが)、Flashムービーと呼ばれる拡張子.swfファイルをブラウザで開けば再生することもできます。 
そこでこのプロパティではこのファイルがHTML文章であることをブラウザに教えてくれているわけです。 
 
また、何度も言っているようにHTMLは世界共通ですので、タグ以外の実際に表示する文章もいろんな国の言語に対応しておかなければなりません。しかし実際日本に住む私たちがバリバリ中国語で出来たページやドイツ語で書かれたページを頻繁に読むことはあんまり多くはありません。そこで、いろんな言語の文字を文字セットとして切り分け、必要なところでブラウザに読み込ませるようになっているのです。
 
charset=Shift-JIS"
 
とはJISが定めた日本語の文字コードのことをさしているわけです。
 
 ところで、またまた混乱させる事実を言いますが、同じ日本語でもさまざまな文字コードがあります。日本語には漢字のようにたくさんの文字があります。これをいかにして効率的にまとめるかという歴史的経緯があるのです。興味のある方はインターネット上で文字コードについて調べてみてください。
一般的なWindowsユーザーの方ならShift-JISで間違いはないでしょう。
 
 
<TITLE></TITLE>
これは簡単ですね。タイトル要素です。つまり文章のタイトルです。ブラウザにもよりますが、IEの場合このタグに囲まれた文字列がウィンドウのタイトルになっています。ここでは「HTMLを使ってみよう」となっていますので、ブラウザで開くと、「HTMLを使ってみよう Microsoft Internet Explorer」と表示されたわけです。
 
 
<BODY></BODY>
 
ここからいよいよ本文になります。BODY要素です。ここの間に書かれた文章が実際に表示されます。
 
 
<!-- -->
 
ちょっと要素とは違うのですが、コメントを書くために使うタグです。つまり注釈です。長い文章を書いてるとあとで自分でも何を書いたか分からなくなるときがありますよね。そんなときには予め注釈をつけておくと便利です。もちろんブラウザで見ても表示されません。
 
 
<H1></H1>
 
第一段階見出し要素です。本の章の見出しのように見出しを指定することができます。また第一段階からも分かるように第二段階、第三段階・・・と全部で第六段階まであります。第二段階とはタイトルのあとにあるサブタイトルのようなイメージです。そしてそこからも分かるように段階が下がるごとに文字の大きさも小さくなるわけです。サブタイトルとタイトルが同じ大きさだったら分かりにくいですもんね。
といってもほとんどの場合第二段階<H2>までで事足りますが。
 
 
<P></P>
 
段落要素です。このタグの間に挟まれてる内容がひと段落として認識されます。通常段落というと、一行目に字下げしてるものですが、HTMLでは字下げはしていません。そのように文章を書かない国・文化があるからです。ただし改行はきちっとやってくれます。
 
 
 
 
さて、実はこれだけ覚えておいてもHTMLできちんとした文章が書けますが、それ以外にもこんなタグがあります。
 
 
<EM></EM>,<STRONG></STRONG>
 
EM要素とSTRONG要素は文章の中で強調したいところにつけるタグです。強調された文章はブラウザで大きく太字になります。EMとSTRONGの違いはと聞かれると、ほとんどの場合EMが強調、STRONGがもっと強調という答えが返ってきます。特に使い分けを考えなくてもいいでしょう。
 
 
 <BR>
 
BR要素は強制改行に使われるタグです。文章は基本的にブラウザが適時に改行をいれて表示させますが、体裁を整えるためなどどうしても強制的に改行を入れてほしいときに使います。珍しい</>終了タグのないタグです。<BR />とも書かれているようです。
 
 
 
ちょっと長くなってしまいましたね。きりがいいところで今回はここまでにしておきましょう。ちょっと腕が疲れました。疲れたときにはちょっと指を伸ばして、ついでに腕も伸ばしてストレッチなんかしてみましょう。
 
予告していた<B><I>については解説することができませんでした。次回に回します。こんなことを言うとどんどんスケジュールがずれてくるのでしょう。
 
 
では今日の宿題は今日出てきた要素を全て使って文章を作成してみてください。なんどもタグを打って体で覚えることが重要なのです。
posted by ラリコ at 23:12 | Comment(0) | TrackBack(0) | 小技術

2007年03月18日

[HTML]ホームページ製作講座タグと要素

さて、何気に真剣にやってくれてる人がいる以上やめるにやめれなくなったこのコーナー。今日は二回目の連載です。
まず前回の宿題についてから入りたいと思います。まず、前回のサンプルの日本語部分を好きな文章に変えることは簡単にできたと思います。一例ですが、以下のように普通に表示されたのではないでしょうか。
 


html2.jpg

 
二番の英文字を全て全角文字に変えるところについては、下のようにtxtファイルに打った文字がそのまま全て出力されたと思います。
 
html3.jpg
 
さて、これらの問題からなにか分かりましたか(なんの意味もなく宿題を出しているわけではないのですよ、きっと)。
 
賢明な読者ならすぐに<>で囲まれた部分にHTMLの真髄が隠されていることに気づいたと思います。
実はこの<>で囲まれた英字こそがHTMLの要点で、タグと呼ばれるものなのでした。
前回からも言っているようにHTMLはマークアップ記述言語と呼ばれる「文章の意味を構造から記述する」コンピュータ言語なのです。
 

文章の構造を記述するとはどういうことでしょうか。
例えば一般的な文章には以下のような要素が考えられます。(作者は作文の専門家ではないので他にもあるし、厳密には間違っているところもあるかもしれません。

 

・タイトル
・見出し
・段落
・強調語句  などなど


みなさんがこれらの要素を現実世界で見分けるには視覚イメージに頼っていると思います(例えば、タイトルは本の表紙についている、段落の始まりは字下げしている等)。


ところが、コンピューターがこれらの要素を理解するためには誰かがこれらの要素について、ここからここまでだよというマークをつけあげる必要があります(学生の頃に教科書の重要な語句にマーカーでラインを引くイメージです)。

そして、これこそがまさにマークアップするということなのです。言葉通りですね。
そのマーカーともいえるものの役割を担っているのが、HTMLではまさしく<>で囲まれているタグと呼ばれるものなのです。HTMLとはタグに始まってタグに終わるといっても過言ではありません。また、このタグに囲まれている要素のマークのことをそのまま要素と呼びます。

タグは<>(開始タグ)と</>(終了タグ)で一セットで、中には例外もありますが、マーカーの線の始まりと終わりだと考えてみると分かりやすいでしょう。このタグのセットによって文章の中のタイトルや見出し、段落の始まりなどを指定しているわけです。

例えば、前回のサンプル<HTML></HTML>というタグはHTML要素をあらわすタグで、これに囲まれた文章がHTML文章であることをコンピューター(正確にはHTMLを解析するブラウザソフト)に教えているわけです。
 

実際タグを書くときにはいくつかルールがあって、例えば前回の宿題にもなりましたが、

半角文字で書く
中に不要なスペースを空けない
例外を除き必ず<>と</>のように文章を囲むセットで書く
 
などと決められています。
 
 
 
上のように書くとタグって多くて覚えられそうにないなと思うかもしれませんが、実際に文章の要素がそんなにないようにタグもそんなにたくさんはありません。しかも普段よく使うタグなんてほんの10個かそこらです。それにそれすらも覚えていなくてもHTMLを実際に書くときになってから調べてもすぐに見つかるぐらいです。
 
 
例えば僕がよく使っているタグをいくつか紹介します。今回の宿題はこれらのタグを使ってHTMLの文章を書いてください。
 
<H1></H1>
<H2></H2>
<P></P>
<B></B>
<I></I>
 
ヒント:文章は前回のサンプルの<BODY>と</BODY>の間に記述すること。
 
 
次回はこれらのタグの意味と、いよいよ最初のサンプルのタグの意味。そしてちょっとした発展内容に入りたいと思います。お楽しみにw

posted by ラリコ at 22:31 | Comment(0) | TrackBack(1) | 小技術

岩瀬敬吾インストアライブInタワレコ

なんとたった30分のインストアライブのために片道3時間の隣県のタワレコまで行ってきてしまいましたよ!
前々から気になっていたところに友人に誘われたので、これぞとばかりにはっちゃけてきました。といってもにわかファンの僕ですが。
行ってきたのは、これ
 
 
 
岩瀬敬吾のBright dayというアルバムの発売を記念してのイベントで、握手&サイン入りポスタープレゼントなんてやってました。
 
そんいで、短刀直入に感想から言うと、

 


迫力が違いすぎる!!

 

やっぱり生で聞くと違いますね。なんというか、激しさに倒されてしまいそうな感じです。僕は基本的に音痴で、耳もよくないのでどれだけいいスピーカを使っても音のよさなんてのはわからないわけですが、それでも音の迫力にやられましたww(大きさだけではないんですよねー
んでんで、お気に入りな「ノイズとため息」はもちろん、実は聞いたことのなかった未来とかも歌詞だけじゃなくて表現のイメージ(澄んだ感じの情熱とか)がダイレクトに伝わってきて、おいしかったですw(何
 
ま、敬吾に関しては言葉より聞いて貰った方が伝えやすいかなwよかったら聞いてみてくださいw
 にわかファンのぼくが言うのもなんですけど(ぁ
 
 
ちなみに握手した友人が、「カラオケにあんまり曲入ってないですね」っていうと、 「それはこっちの人に言って」って言われたそうですw
 
 
・・・お前が元凶か!?(ぇw
 
 
 
 
 
 
 
シングルで「ノイズとため息」だけも出てますので、よかったらこの曲だけでもw
 
 
 
 
 
行き帰りで写真もいくつか撮ったので、また適当に選んでピピネラ座にあげます。こっちもよかったらどうぞw

posted by ラリコ at 21:14 | Comment(0) | TrackBack(0) | 小日記

2007年03月17日

[HTML]ホームページ製作講座イントロ

気を取り直して本日から連載でHTML講座なんてやってみたいと思います。
さて、そもそもホームページを記述する際に使われるHTMLとはなんでしょうか。またよく初心者の方から「HTMLってプログラミング言語とは違うの?」などといったような質問を受けます。
 
『HTML4.01 仕様書邦訳』には
 
地球規模での配信を目的に情報を公開するためには、全てのコンピュータが潜在的に理解可能であるような出版用母語の一種である、世界中で理解される言語が必要となる。World Wide Webで使われる出版言語は、HTML(HyperTextMarkupLanguageの略)である。
 
とあります。つまり、簡単に言うと、ホームページを配信するために、世界中どこに行っても共通なコンピュータ言語がHTMLなのです。HTMLはブラウザ(Internet ExplorerやNetscape Navigatorなど)と呼ばれるソフトによって全て解釈され、視覚的に表示されます。
 
この言語は非常にシンプルで理解しやすいため、初心者の方でも簡単に習得し、ご自分のホームページを作ることができるようになります。以下10回(予定)の講座であなたもHTMLを習得しよう!
まずHTMLと実際に表示されるときの動作を確認するために以下のようなファイルを作って見ましょう。
適当なフォルダもしくはデスクトップにて「右クリック→新規作成(W)→テキストドキュメント」の順番でファイルを作成し、ファイル名:sample.txtとしてください。
(ご使用の環境でファイル名の後ろに.txtなど拡張子が表示されないときは、適当なフォルダを開き、ツールバーから、「ツール(T)→フォルダオプション(O)」を選択し、表示タブから「登録されている拡張子は表示しない」のチェックをはずしOKボタンをクリックしてください。その後ファイル名を変更するときには.(ドット)以下の部分(ここでは.txt)が消えないようにしてください。また設定を戻す際には上の手順をたどりチェックボックスにチェックを入れてOKを押してください。)
ファイルアイコンをダブルクリックして、内容を編集します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift-JIS">
<TITLE>HTMLを使ってみよう</TITLE>
</HEAD>
<BODY>
<!-- ここから本文部分 -->
<H1>連載HTML作成講座</H1>
<P>HTMLはマークアップ記述言語の一種で、
ドキュメントの構造を記述するための言語であるSGMLより派生した。
HTMLはSGMLの特徴である「文章の意味を構造から記述できること」に加え、
文章以外の画像を埋め込んだり、また
<STRONG>外部文章への参照を直接指示</STRONG>
することができます。</P>
</BODY>
</HTML>
これを上書き保存して、ファイル名をsample.txtからsample.htmlに名前を変更してください。
「拡張子を変更すると、ファイルが使えなくなる可能性があります。変更しますか?」の質問にはい(Y)とクリックしてください。ファイルのアイコンが変わったことを確認して、アイコンをダブルクリックしてください。
 
html1.jpg
 
ブラウザソフトが開き、上のように表示されたらお疲れ様でした。表示されない場合は以下のことを確認してください。
ファイル名は合っていますか?sample.txtではなくてsample.htmlと名前を変更したことを確認してください。
内容を全て半角で打ち込んでいますか?スペースを含めて日本語以外の部分は全て半角で打ってください。
 
それでも解決しない場合はコメント欄へ
 
 
 
これだけではまだなにも分かりませんが、次回から順番を追って説明いたします。今はただHTMLファイルとはただのテキスト情報であるということさえ分かっていただければ結構です。
 
 
宿題的なもの。
上のサンプルの日本語の部分をお好きな文章に変えて打ち込み、表示されることを確認してみてください。
サンプルの英字記号部分を全角文字に変えて表示イメージを確かめてみてください。
 
ヒント:htmlを再編集するときにはファイル名を再び.txtに戻し編集するか、IEの場合にはツールバーの「表示(V)→ソース(C)」の順番でメモ帳を開き編集することができます。
posted by ラリコ at 22:48 | Comment(3) | TrackBack(1) | 小技術

誕生日後夜

まさか連続で更新されてるとは思うまい!!
 
 
 
・・・それ以前にまだここが更新されてるとも思うまい!!(ぇ
 
 
さて、誕生日を迎えました。そんな誕生日にしたこと。
 
まず前日から徹夜(ぁ
0時ちょうどに玄関を叩く声が聞こえたかと思うと某友人乱入。
 
もう毎年恒例の誕生日嫌がらせを敢行される。
 
 
うん、もういい加減誕生日にライターを贈るのをやめてくれwそろそろコレクションが開けそうだから・・・
 
 
 
んで、その後3時まで騒ぐ。(半寝
ここらへんでアンサイクロペディアのサーバーがすごぶる悪くなる。1ページ表示するのに2時間て(´・ω・`)
 
3時に友人は引き返し、そこから恐怖の執筆タイム。なんか、トリスタについて、自分が出したお題で小説を書かないと誰かに消される脅迫観念を味わいつつ、自分のと、ネット上の友人とのリレー小説でダブル執筆(ぁ
 
10時に執筆を諦め(もう小説とか_)、ちょいっとお出かけ。昼は某友人その2におごってもらって、16時までピピネラ座の作戦会議(何)、んで、ノックダウンして気づくと誕生日もあと10分で終わる時間。
 
 
そして、今に至る。
 
 
 
なんか久々に外出たぞ有意義な一日が過ごせたぞー
posted by ラリコ at 02:17 | Comment(0) | TrackBack(0) | 小日記

2007年03月15日

ピピネラ

そろそろ見る人がまったくいなくなったでしょう!
 
なにせ週3更新宣言をしたにもかかわらずまったくの放置プレイ。
 
 
でもそれにはわけががが。
 
こんなブログを立ち上げてみました。ホームページを作る人を応援しますw
 
総合素材サイト
 
ピピネラ座
 
友人との共同運営ですが、とりあえずやっと正式公開にこぎつけました・・・
 
コンテンツはこれから増えるのだと信じて疑いません(`・ω・´)
 
 
 
 
でもこっちはもうあんまり更新しないかも(ぁ
 
 
 
 
もうというか絶対更新しなさそうだよねー
 
 
 
 
ごめんなさいごめんなさいごめんなs(ry 
 
posted by ラリコ at 01:58 | Comment(0) | TrackBack(0) | 小日記

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。