カテゴリー別アーカイブ: 003-HTML/CSS講座

JavaScriptの動作

こんにちは。あきです。


さて今日はこの折りたたみメニュー(クリックするとメニューが開きます。)





を例にJavaScriptについて学んでいきます。



アキヒロ:
「先輩。前回はバトンの解答ありがとうございます。相変わらず寂しく悲しい毎日を送っているようで。僕はうれしいです。」


先輩:
「うるさい。俺の日常に触れるなと前から言ってるだろ。


   それで。今日は上記の”折りたたみメニュー”処理をを説明すればいいのか?」



アキヒロ:
「はい。お願いします。」


先輩:
「それでだ。最初にこの仕組みを明かすとこの処理は単純にサブメニューを隠して表示しているだけなのだ。」

アキヒロ:
「へー。でメインメニューをクリックするとサブメニューを表示する処理が実行されるんですね。」

折りたたみメインメニュー

   ・サブメニュー1
   ・サブメニュー2
   ・サブメニュー3

先輩:
「そうだ。このサブメニューを初期表示で隠すためには
   <HEAD>~</HEAD>部分に以下の様な
   スタイルシートを記述する。」


<style type=”text/css”>
<!–

.sub{

display : none

;}

–>

</style>


先輩:
「この記述により、初期表示時に


   折りたたみメインメニュー

とメインメニューのみ表示することが可能となる。」


アキヒロ:
「はあ。」


 


先輩:
「そしてこれがメインメニューをクリックすると実行されるJavaScriptの処理だ。」

<script Language=”JavaScript”>
<!–


function pMenu(id)

{


var el = document.getElementById(id);


if (el.style.display=="block")
    
el.style.display
= ‘none’;
else

    el.style.display
= ‘block’;


}

// –>
</script>

先輩:
「まあおそらく分けがわからんだろう。」


アキヒロ:
「はい。全然分かりません。」


先輩:
「こんな物は覚えなくてもいいんだ。Webで探せば似たような処理はいくらでも見つかる。


   とにかくこれも<HEAD>~</HEAD>部分に記述する。で、この処理を追うために

   function pMenu(id)

   というのだけ覚えろ。」



アキヒロ:
「なんですか?これは?」


先輩:
「これはだな関数とよばれていて”pMenu“というのは関数の名前だ。」


アキヒロ:
「ああ。この関数の中で実際にプログラムの処理が実行されるんですね。」


先輩:
「その通り。そしてこのpMenu関数は以下の様にbody欄から呼び出される。」

 


<body>


<p><
a href=”javaScript:pMenu(‘pdMENU1′)”>折りたたみメインメニュー</a></p>


<ul class=”sub” id=”pdMENU1″>


<li><a href=”“http://netbusiness.rash.jp/”“>サブメニュー1</A></li>
<li><a href=”
“http://netbusiness.rash.jp/”“>サブメニュー2</A></li>
<li><a href=”
“http://netbusiness.rash.jp/”“>サブメニュー3</A></li>


</ul>
<br>


</body>
</html>


アキヒロ:
「この箇所から呼び出されるのですね。」

 


“javaScript:pMenu(‘pdMENU1′)”


 

先輩:
「そうだ。これは誰かが折りたたみメインメニューをクリックする事で呼び出される。」


アキヒロ:
「なるほど。クリックされる事でHead部に記述してあるpMenu関数が呼ばれ書いてあるJavaScript実行されてようやく各サブメニューが表示されるのか。」



先輩:
「そうだ。そしてもしこのpMenu関数を他のWebページでも使用したい場合はこの関数を別のファイルに書き拡張子を(.js)にして保存すればいいんだ。」



アキヒロ:
「そうすることでいちいちhead部に書くことなく色々なWebページから同じ関数を呼び出す事ができるというわけですね。」


 


先輩:
「そういうことだ。」


アキヒロ:
「なるほど。この例のようなJavaScriptを使うとまたサイトマップなどに役に立ちそうですね。」


先輩:
「そうだな。ページを占有することなくメニューを表示できるからとても便利だ。」



アキヒロ:
「またまたとても参考になりました。」


先輩:
「うむ。俺はいつでも最高に役に立つ男なのだ。ようやくわかったかね。」


アキヒロ:
「それでは。また!」


先輩:
「お、おい。何かつっこんで..。あーあ。」



このページのコメント欄もこのサブメニューの仕組みを利用してます。

JavaScriptとは

こんにちは。あきです。


さて突然ですが




もう一度クリックすると閉じます。
JavaScriptを使うとこんな事ができます


ということで


今日はJavaScriptについて学んでいきます。



アキヒロ:
「先輩。今日はJavaScriptについて教えてください。」


先輩:
「なんだ。まだ知りたいことがあるのか。」


アキヒロ:
「いいじゃないですか。どうせ暇なんだから。」


先輩:
「こないだと同じ事言うな!」


アキヒロ:
「お願いしますよ。」


先輩:
「仕方がないな。で何が知りたいんだっけか?」


アキヒロ:
Javaですよ。Java。」


先輩:
「お前。JavaJavaScript一緒のものだと思ってないか?」


アキヒロ:
「違うんですか?」


先輩:
「まずそこから説明してやらなければならんのか。」


アキヒロ:
「よろしくです。」


 


先輩:
「まあ実際に使用する上で特に必要となる知識ではないが超簡単に説明してやろう。」


アキヒロ:
「なんだ。必要ないのか。じゃあいいっすよ。」


先輩:
「うるさい。黙って聞け。」


アキヒロ:
「は、はい。」


 


 


先輩:
「まずJavaScriptははじめNetscape社が開発し自身のブラウザNetscape Navigatorで使用していた言語なんだ。」


アキヒロ:
「へー。じゃあなんでJavaって名前がついてるんですか?」


先輩:
「これはJavaの開発元であるSun Microsystems
        と一時期、協力関係にあった。その影響でつけられたと言われている。」


アキヒロ:
「でもまったく別物だと。」


先輩:
「うむ。すこし文法など似ているところがあるがまったく別の言語だと思っていい。日本語と韓国語ぐらい別物だと思え。」


アキヒロ:
「なんかよく分からない例えだな。それでどんな時にこれを使うんですか?」


 


先輩:
「まずだな、HTMLだけで作成したページは文書を表示したり、リンクなどして別のWEBページを開く事はできるが、基本的は本や雑誌の用に動きのない静的なページだろ」

アキヒロ:
「はい。」


先輩:
「しかしこのJavaScriptを使えば訪問者に対して対話的なWEBページを用意できたり文字や画像などに動きを与え表現した動的なページを作る事ができるのだ」


アキヒロ:
「はー。中々賢いんですね。このJavaScriptは。」


先輩:
「そうだな。それでは簡単な書き方を説明しちゃる。」


アキヒロ:
「はい。」


 


先輩:
「まずJavaScriptを作成するのには方法が2つのあるHTMLに直接書き込む方法と外部ファイルにプログラムを書く方法だ」


アキヒロ:
「へー。CSSみたいですね。」


先輩:
「その通り。メリットもCSSと一緒だ。複数のWEBページに同じ事を書かずに一括でプログラムを管理できる。」


アキヒロ:
「なるほど。」


先輩:
「でもまあブログで使う場合はほとんど直接HTMLに書き込むのが普通だな。」


アキヒロ:
「へー。」


先輩:
「直接書き込む場合、通常は以下の様に記述をし<HEAD>~</HEAD><BODY>~</BODY>の間
   どちらでも記述できる。」

<SCRIPT TYPE=”text/javascript”>


『ここにJavaScriptプログラムを記述する』
</SCRIPT>

アキヒロ:
「うーん。」


先輩:
「まあこの例を見ろ。」

<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>


<SCRIPT TYPE=”text/javascript”>
      document.write(“先輩だぞ(^_^)”)
</SCRIPT>


</BODY>
</HTML>


先輩:
「これを実行するとWebページに


   『先輩だぞ(^_^)』
   
   と可愛く表示される。」


アキヒロ:
「ああ。とてもうっとうしい見たくもない。」


先輩:
「くっ!ただブログで使用する場合は
   <HEAD>~</HEAD>に処理を記述して
        <BODY>~</BODY>側からはその処理を呼び
        出すのが一般的な使われ方だな。」


アキヒロ:
「ふーん。」


先輩:
「それではこのページのトップで使った
   小技を例に説明していこう。」


アキヒロ:
「はい」


先輩:
「と思ったらもうタイムアップだ。
   この説明は次回じゃな。」


アキヒロ:
「えー。これからだったのに。」


それでは次回この処理について説明していきます。

CSS

こんにちは。あきです。


前回先輩よりテーブルタグについて学び
今日はCSS(スタイルシート)について学びます。



アキヒロ:
「先輩。今日はスタイルシートです。
      お願いします。」


先輩:
「また来たのか。たまには休ませてくれよ。」


アキヒロ:
「いいじゃないですか。どうせ暇なんだから。」


先輩:
「うるさい。仕方がない。それでは教えてやろう。」


アキヒロ:
「お願いします。」


先輩:
「まずCSSとはCascading Style Sheetsの略だ。」


アキヒロ:
「で、直訳すると?」


先輩:
「知らん。英語は嫌いだ。お前英語勉強してるんだろ。訳してみろよ。」


アキヒロ:
「うーん。分かりません。」


先輩:
「なんだ。お前。何年勉強してるんだ?」


アキヒロ:
「むっ!おそらくですな。


   作業を段階的に行う見栄えの紙だから…。


   『見栄えを段階的に設定するファイル


   じゃないっすかね。」


先輩:
「これはWebページのレイアウトを定義する為の規格です。」


アキヒロ:
「ちっ。知ってるなら言わせるなよ。」


先輩:
「なんか言ってかね?」


アキヒロ:
「いえ。続けてください。」


先輩:
「HTMLのタグにフォントサイズや色をいちいち設定するのは面倒だろ。」


アキヒロ:
「確かに記事の文章や見出しなんかのスタイルは一括で管理して指定したいですね。」


先輩:
「このCSSを使うと複数のHTMLのデザインをまとめて調整する事が可能になるのだ。どうだすごいだろ。」


アキヒロ:
「これは使えますね。先輩は別にすごくないけど


先輩:
「いつもそれだな。一言多いんだよな。お前は。まあそれでだ。スタイルシートの指定方法には3種類ある。」


アキヒロ:
「3種類?」


先輩:
「そうだ。


   ・インラインスタイルシート ・埋め込みスタイルシート  ・外部スタイルシート


   の3つだ。ほとんどのブログで使われてるのは外部スタイルシートだな。」


アキヒロ:
「詳しく教えてください。」


先輩:
「まずインラインスタイルシートだがこれは各タグに style=”” と属性を設定する事でフォントサイズなどを指定できる。」


アキヒロ:
「はあ。」


先輩:
「ブログのタイトルに使われる見出しタグ<h1>を例にすると」

<h1 style=”font-size:80px;”>こんにちは</H1>

先輩:
「と設定するとこんな感じで特大のこんにちはが表示できる。」


 


 


こんにちは


 


 



アキヒロ:
「うわっ!うっとうしい。でもこれタグ毎に設定するんですよね。」



先輩:
「まあな。これじゃあ一括設定できるCSSの良さが活かされないな。次は結構使えるぞ。」


アキヒロ:
埋め込みスタイルシートですか。」


先輩:
「これは各HTMLの<head>~</head> 内に
      記述するんだ。」

<HEAD>         
<STYLE type=”text/css”>
<!–            
h2{             
font-size : 12px;               
}                                     
–>                                 
</STYLE>                     
</HEAD>                      


先輩:
「この様に記述する事でこのHTMLで<h2>タグを使用した文字列は全てフォントサイズが12pxになる。」


アキヒロ:
「なるほど。これを指定したHTMLファイル内でのみ有効なんですね。」


先輩:
「そういうことだ。そして最後が外部スタイルシート。」


アキヒロ:
「はい。」


先輩:
「これは完全に独立したスタイルシートファイルを作るのだ。こうする事で複数のHTMLのスタイル情報を一括で管理できる。」


アキヒロ:
「これが通常使われている方法か。」


先輩:
「ただのテキストファイルにスタイルを設定し拡張子を.cssにすれば作成できる。」


アキヒロ:
「ずいぶん簡単ですね。」


先輩:
「うむ。そしてそのスタイルを適用したいHTMLにスタイルシートを読み込みますよ。と以下の様に設定する事でHTMLとCSSが関連付けられるのだ。」

<head>


<link href=「スタイルシートのファイル名」

rel=”stylesheet” type=”text/css” />


</head>


アキヒロ:
「なるほど。なるほど。良くわかりました。で今日の小技は。」


先輩:
「結局それが目的かよ。しょうがない。それじゃリンク文字にマウスを置くと色が変わる方法を教えよう。」

a:hover { color:#FF0000; }
a:hover { background:#FF0000; }


先輩:
「上が単純にリンク文字の色下は背景式の色が変わる。スタイルシートにこれらを設定するとリンク文字全てに適用される。」


アキヒロ:
「おお。面白い。今日も色々ありがとうございました。」

テーブルタグについて

こんにちは。あきです。


前回先輩よりブログデザインで意識する事に
ついて学んだアキヒロ。今日はテーブルタグについて学びます。



アキヒロ:
「それじゃあ今日はテーブルタグについてお教えください。」


先輩:
「うむ。テーブルタグとは基本的に表を作成する為のタグだという事はいいな。」


アキヒロ:
「ええ。こんなのですね。」











セル1-1 セル1-2
セル2-1 セル2-2




先輩:
「うむ。このタグはこのようにただ表を作成するだけでなく、文字や画像をバランスよく綺麗に表示するのにも非常に有効なタグなんだ。」


アキヒロ:
「はあ。」


先輩:
「まず画像を貼り付けた場合、画像のすぐ横に何か説明文を入れたい時があるだろう。」


アキヒロ:
「いえ。特には。下に説明文を書けばいいじゃないですか」


先輩:
うるさーい。俺は横に書きたいんだ。文字が画像に回り込んだりせず綺麗に並べて書きたい事がしょうっちゅうあるんだ!」


アキヒロ:
「分かりましたよ。まあまあそんなに興奮しないで」


先輩:
「ふーっ。ふーっ。そんな時は以下の様に書くと綺麗に表示される。」

——————————————————————


<TABLE cellSpacing=5 cellPadding=10 border=0>
<TBODY>
<TR>
<TD><IMG style=”src=”side1.jpg” border=0>
<TD vAlign=top>
これは川です。<BR>
くもが川にうつってました。<BR>
とてもきれいでした。<BR>
すこし小さい川でした。
</TD>
</TR>
</TBODY>
</TABLE>

——————————————————————





これは川です。
くもが川にうつってました。
とてもきれいでした。
すこし小さい川でした。

アキヒロ:
「小学生の作文ですか?」

先輩:
「うるさい!配置はどうだ?美しくないかね?」


アキヒロ:
「はあ。まあ。でもただの自己満足な気が。」


先輩:
「まったく。お前って奴は本当につまらん奴だの。この画像、見てみろ。素晴らしいだろ。
    ほら何か感想を言ってみろ!」


アキヒロ:
「はあ。青いです。」


先輩:
「『はあ。青いです』


   なんだその反応。もっと気持ちを込めて言葉にしろ!」


アキヒロ:
先輩も変わらないでしょ。それより。先輩。また話が大きく横にそれてます。いくつか分からない言葉があるんで教えてください。
     この『cellpadding』ってなんですか?」


先輩:
「ああ。これはだな各セル内の余白を設定できるんじゃ。」


アキヒロ:
「『cellspacing』は?」


先輩:
「これはテーブルの罫線の幅を設定する為のものだ。枠がないから分かりにくいのだろう。実際に枠を表示してみよう。」


 






これは川です。
くもが川にうつってました。
とてもきれいでした。
すこし小さい川でした。

 



先輩:
「『border』を設定すると外枠の幅が決められこれを”0″にするか、何も設定しないと枠を消すことができるのだ。」


アキヒロ:
「へー。でも設定するの面倒くさそうだし画像なんてめったに使わないから、あまりこのタグを使うメリットが感じられないなあ。」


先輩:
「そうか?横に並べても適切に表示できるというのはあることに非常に役に立つと思わないか?」


アキヒロ:
「あること?」


先輩:
「そうだ。」


アキヒロ:
「うーん。なんでしょう?」


先輩:
「お前もっと考えろよ。それはだな


   記事の目次だ。」


アキヒロ:
「記事の目次?」


先輩:
「そうだ。記事を書くたびに目次をトップに追加していくだけだと、縦幅がどんどん長くなり最新記事に行くまでにスクロールを多くしなければならなくなるだろう。」


アキヒロ:
「はい。」


先輩:
「だがこのテーブルタグを使い、余白や罫線の幅などを調節して横に並べて表示すれば、見やすい目次を作る事ができるのだ。こんな感じで」







TEST

 ・TEST11111
 ・TEST2
 ・TEST3
 ・TEST4
TEST

 ・TEST1
 ・TEST22222
 ・TEST3
 ・TEST4
TEST

 ・TEST1
 ・TEST2
 ・TEST333333
 ・TEST4

アキヒロ:
「なるほど。これはいいですね。」


先輩:
「まだ他にも画像を丸く表示したり、額縁を付けたりと色々な小技があるのだがそれらはあまり覚える必要はないだろう。」


アキヒロ:
「わかりました。」


先輩:
「以下のサイトにアクセスしてみろ。簡単にテーブルを作る事ができる。


   テーブルタグ作成ツール


アキヒロ:
「わかりました。今日もありがとうございます。」

デザインについて

こんにちは。あきです。

前回先輩よりHTMLの骨組みについて学び、
今日は使えるタグについて学ぶ予定ですが…。

アキヒロ:
「先輩。先輩。それじゃあ今日は文字色を変えて動かしたり、点滅させたりする方法と
       
ステータスバーに文字を流す方法を教えてください。」

先輩:
「お前な。そんなに覚えてどうするんだ。」

アキヒロ:
「どうするって。当たり前じゃないですか。自分のサイトに使うんですよ。」

先輩:
「なぜ使いたいんだ?」

アキヒロ:
「そりゃ伝えたい情報を色々目立たせる事ができるじゃないですか。」

先輩:
「全部使うつもりか?おい?」

アキヒロ:
「なんだ。やだな先輩。今日はやけにシリアス顔ですね。」

先輩:
「お前な。少し訪問者の視点に立って考えてみろ。お前のような貧弱ブログにわざわざ訪問してくれる人達は、それ以外の色んなブログに最初に訪問していて目がクタクタなんだぞ。」

アキヒロ:
「はあ。」

先輩:
「ただでさえお前の意味不明な文章読むに多大な労力を必要とするのに、その上こんな事されてみろ。」

続きを読む

タグと要素について

こんにちは。あきです。


前回先輩よりHTMLとは何かを学んだアキヒロ。今日はHTMLの
タグについて学びます。



アキヒロ:
「こんにちは。先輩。それでは今日もよろしくお願いします」


先輩:
「うむ。それでは今日は前回に引き続き日本の総理大臣について説明すればいいんだな。」


アキヒロ:
「勘弁してください。」


先輩:
「冗談だよ。それではタグについて説明していく。」


アキヒロ:
「はい。」


先輩:
「まずタグとは『<』『>』で囲まれている
      文字列を指す。」


アキヒロ:
「???」


先輩:
「例えばWEBページのタイトルを指定する場合

   <title>タイトル名</title>
   

とこのように記述するとタイトルが表示される。」


アキヒロ:
「はあ。」


先輩:
「そして『<title>』を開始タグ、『</title>』を終了タグと呼ぶ。これらは『title』タグと呼ばれていて開始タグと終了タグは基本的にセットで指定するんじゃ。」


アキヒロ:
「へー。」

先輩:
「HTMLは「HyperText Markup Language」 の略称だ。
        この中の Markup は「“マーク(印)”をつける」という
        意味がある。つまりHTMLとはタグを用いて、文書に
        マーク(印)をつけていく、言語なんだ。」

アキヒロ:
「なるほど。」

先輩:
「あと一つタグ以外に要素という言葉も覚えておけ」


アキヒロ:
「要素?」


先輩:
「うむ。要素とは


   【開始タグ】【内容】【終了タグ】


   の『』で囲まれた全体を呼ぶ。先程の例だと
   『<title>タイトル名</title>』


   の『』の中が要素だ。とこれらを「title」タグと
    呼ぶ人もいれば、「title」要素と呼ぶ人もいる」

アキヒロ:
「なんか分かったような、分かんないような。」


先輩:
「うむ。とにかく要素とは開始タグと終了タグの間にある内容も含めた全体を指すと覚えておけ」


アキヒロ:
「こんなつまんない事よりか、色変えたり文字を動かしたりする方法を教えてくださいよ。」


先輩:
「お前が基本から学びたいと言ったんだろうがー」


アキヒロ:
「そうでしたっけ?」


先輩:
「まったく。とにかくだこれらは基礎の基礎だからしっかり覚えておけ。そしてこれらがHTMLの簡単な骨組みだ。」


<html>


 <head>
     (タイトルなど表紙を構成する要素)
 </head>


 <body>
     (見出しなどの本文を構成する要素)
 </body>


</html>


アキヒロ:
「これだけですか。」


先輩:
「うむ。タグを多く使うと非常に複雑に感じるが
   これらにタイトルと本文を加えればWEBページが
   できてしまう。」


アキヒロ:
「へー。それじゃ次は色々なタグについて
   教えてください。」


先輩:
「それは次回じゃな。」


アキヒロ:
「またか。わかりました。それでは。」

HTMLとは

こんにちは。あきです。


今日はアキヒロがHTMLについて学びます。



アキヒロ:
「先輩。」


先輩:
「ん。」


アキヒロ:
HTMLってなんですか?」


先輩:
「ん。なんて言ったのかね。君。よく聞こえないんだが。」


アキヒロ:
HTMLってなんなんでしょう?」


先輩:
「それはまじめに聞いてるのか?」


アキヒロ:
「はい。」


先輩:
「お前、今時、小学生でもそんな質問しないぞ。」


アキヒロ:
「へへへ。」


先輩:
「この業界で働いててその質問は


   『先輩?今の日本の総理大臣て誰ですか?』


   という質問より劣るな。」


アキヒロ:
「ぐっ。」



先輩:
「おそらく


   『日本の総理大臣て何なんでしょう?』


   という質問に匹敵する。」



アキヒロ:
「総理大臣は小泉孝太郎です。」



先輩:
「それは息子だ。アホ!そういえば最近彼は何をやってるんだろう?ってとにかくなぜそんな質問を今頃してくるんだ?」


アキヒロ:
「いやなんとなく。HTMLってよく聞くなと思って」



先輩:
「当たり前だ!アホ!お前だけだ知らないのは!」


アキヒロ:
「アホ。アホ言わないでください。」



先輩:
「はー。本当にお前って奴は。あー、とりあえずお前の貧弱ブログを開き右クリックで『ソースの表示』をクリックしてみろ。」


アキヒロ:
「はい。また出た。この意味不明な記号。」


先輩:
「これがHTML以上!」


アキヒロ:
「おーい。おーい!」


先輩:
「あーわかったわかった。今のがお前のブログのHTMLだ。


   このようにHTMLとは一般的にWEBページを作成するための言語で、全てのWEB上にあるページはHTMLで作られていると考えてもいい。」


アキヒロ:
「….。」


先輩:
「そしてHTMLは、そのままではただのテキストファイルなんだ。さっき見たようにな。
これをインターネットエクスプローラーなどのHTMLドキュメントを表示するブラウザソフトを使用する事によって正しく表示する事が出来る。」



アキヒロ:
「ええ。そんなこたぁ知ってます。」



先輩:
「なんだ!お前は!何が知りたいんだ?だいたいHTMLを知らなくても、一応貧弱だがブログを作れてるじゃないか。何も今更、HTMLなんて学ぶ必要ないだろ。」


アキヒロ:
「いえ。何事も基礎はおさえとかなければ。」


先輩:
「何が基礎だ。それよりもっとアフィリエイトの勉強をしろ。」


アキヒロ:
「それは言わないでください。」


先輩:
「で結局何が知りたいんだ?」


アキヒロ:
「なんかタグだとか何とか…。」


先輩:
「『<TAG>~</TAG>』こんなやつか?」


アキヒロ:
「そうです。どうやって使うか基本的なところを教えてください。」


先輩:
「それはだな。もう時間がないから次回じゃ。」


アキヒロ:
「はい。わかりました。」



それでは次回は基本的なタグの使い方です。