どんなこと？

すべてはこのために　その１

2008-10-27T04:57:00.007+09:00

さまざまな技術や知識は集結します。
情報を得るためには

・まず検索
・取捨選択
・自分で理解し、自分の言葉に置き換える

が大切です。

さて、今日の授業です。

４限　課題をこなします。
５限　解説します。
６限　何でも質問に答えます。

というわけでまず課題から。

【本日の課題】
以下のことを調べて11月1日に僕に届くように未来にメールしてください。
色々な意味で無理なら手動で行なってください。

１．情報を得るためには検索を駆使することが大切です。

　検索技術のおさらい
　Googleでクジラ以外のほ乳類を検索するにはどうしたらよいでしょう？

２．リアルタイムに最新情報を得るためにRSSを使用します。

Gizmodo Japan（ギズモード・ジャパン）を「ここ」追加して画面ショットをください。

３．Web系会社のみならずユーザーの立場でもセキュリティの認識は必要です。

クロスサイトスクリプティングによる被害とその攻撃を防ぐ方法を簡単に
記述してください。

４．「これは何か？」を調べて「わかりやすい言葉」で伝えるための総合的な技術です。

アンケートフォームのページをHTTPSにする必要を「IT企業なのにあまりわかってない部長」に説明するためのメール文を書いてください。

５．「必要であること」を必ず伝えたいときには必然性を理解してもらいましょう。

「あまりわかってない」不動産屋の社長にHPの必要性を伝えるために5行の箇条書きを
書いてください。

ところでこれすごいね！
みんな知ってましたか？
PCから携帯のアドレスでメールができるんだよ

というかiPhoneではもともとできてるけどさ(笑

DoCoMoの人は必須だねー

imode.net

　
　

Linuxコマンド

2008-10-21T23:36:00.004+09:00

Linuxのコマンドです。

pwd　　今いる場所

ls　　　今いる場所のファイル一覧

ls -la　今いる場所のファイル一覧詳細
　詳細の説明
　drwx　
　d　　これがるとディレクトリのしるし　なければ　‐
　r　　読み込める
　w　　書き込める
　x　　実行できる（CGIなど）

cd　　ディレクトリ移動
cd ..　一つ上のディレクトリ

Apache　Webサーバー

/var/www　公開ディレクトリ

　

今日の授業（10月14日）

2008-10-14T16:56:00.001+09:00

こんにちはぁ

今日から

「Webクリエーター能力認定試験」

をテキストにしてずずーっと行います。

今までの総復習の意味を込めて

すべてをここに帰結します。

ということでまずはここをみましょう　→　ここを見る

　

今日の授業（10月3日）

2008-10-03T11:34:00.002+09:00

おはようございます。

こんにちわ！

実習先の知らせです。
これは近藤さんが見つけてきてくれたやつです。

有限会社クリフト
千葉県船橋市本町7-5-2　アオバビル3F
URL　http://www.creft.co.jp

ご希望の方がいらっしゃいましたら、遠慮なく
お申し出くださいませ。

まずは昨日のリベンジ！
とはいえ、ちょっとしたことだけだったから心配いらないよ
Gimpを立ち上げていい子で待っててね。
終わってる人はちょっとながめててね

そのあとだね

「home」の中のindex.htmlをちょっと良くしましょう。

ヘッダ
１．画像ゲット
２．ちょうどいい大きさに加工
３．文字入れやレイヤー組み合わせなど

ボタン
１．大きさを決める
２．Gmipで新規作成
３．色入れなど
ここも参考になるかもね　→　ここ
４．index.htmlにのっける

楽しみだね（*^_^*）

　

ロゴ作成　その３

2008-10-02T14:20:00.004+09:00

おもったより出来てるので

フォトレタッチにチャレンジです。

完成はこれ

素材をダウンロードしてください。

今日の授業（10月2日）

2008-10-02T12:50:00.003+09:00

昨日は緊張感あふれてましたね。

あんな感じでひとつひとつ体験していくことも大事です。

やっていく中で

「あっ　これ使えるな！」

とか思ったらこれはしめたものです。

今日も引き続きやってみましょ

　　　　　　　　　　　　　　　　　今日はここ

　

ロゴ作成　その３のその２

2008-10-01T12:05:00.006+09:00

ロゴ作成その３がおわるまで見ちゃだめ！

つぎはこれにチャレンジしてみましょう

さっきのことはちゃんと覚えていますか？

Web上のこのような記事はなかなか親切に書かれていない
ものです。

わかっている前提で書かれてるからちょっとしたことで
つまずくんですよ。
でも、このようなものを自分でやれたら素敵！

というわけでまずは試行錯誤でTRYです！

まずはここから　→　ここだよ

できたならちょっと難しいけど

出来上がりはこれだよ

１．まずはデスクトップにこれ　↓　を保存

２．それを270×270に切り抜いて保存
３．そしたらこれ
　　→　　このページを見ながらやってみてね。

　

今日の授業（10月1日）

2008-10-01T11:58:00.003+09:00

今日は午前中にWeb10月生の開講式があったので、準備が
ばたばたでした・・・

さてさて　本格的にロゴを作りましょうか？

気合いを入れていきますよぉ

ということで今日の授業はここ　　→　　今日の授業

ここまで終わった人はおめでとう！

ということでその次　　→　　応用編

　

　

ロゴ作成　その３

2008-10-01T11:54:00.001+09:00

さあて

本格的にボタンってやつを作ってみましょうかね

今日の注意事項
　１．ツールなどをアクティブにしたいときはそれぞれのタイトルバーのクリック
　２．フライング禁止！
　　　かってに進むとぜったいわかんなくなること必須ですよ。
　　　言っときましたからね！

ということでこのページを使います。

画面の配置はOKですか？

ではこれを開いてください。　→　開くのはここ

JavaScriptスペシャル

2008-09-26T12:14:00.002+09:00

さあ！　ちゃんとお勉強してますか？

とはいえ覚えてるのを試すのではなくて覚えて欲しいのが主題です。

よって試験は

13:20　開始
13:50　終了

とします。

教室は422（PC部屋の隣）
出席番号順に座ってください。
二人掛け＆間は離す。

試験は昨日送った通りです。

　

今日の授業（9月25日）

2008-09-25T00:48:00.006+09:00

おはようございます。

今日は1日おつきあいいただきますよー

げ！　もしやスペシャルか？？？

と喜んだ（心配した）みなさん。

残念でした。普通にやりますよ。

とはいえこの記事を書いた時間を見てくださいよ。

・・・とほほ・・・

「かっぺ」面接の後、クラスの学生が免許センターに落とし物をしたやつを
警察に取りに行き（だって歩きじゃいけない場所なんです・・）、
都内のデザイン事務所と協業しつつあるWebサイトのメンテを手伝い、
東京都のWebコースのカリキュラムを作成し
（秋葉学園東京校じゃないですよ東京都！つーかなんでおれ？）
文部科学省から依頼されつつあるコミュニティサイトの提案書を作り

で、やっと今に至りまする。

ふぅぅ　　　ですね。

でもね　Web系の会社はもっとやばいです！
こんなことを書いちゃうと行きたい人が減っちゃうかもしれないけど、
ほんとにやばいです。
頭を使うと無性にアミノ酸が欲しくなってふらふらになります。
その状態でありながら一つのミスも許されないんですもん。

でもね　すんごい楽しいんですよ！
ぼくだって体力（知力）があればもっと世界を目指したかったですもん。

まだまだ新しい世界だからいっくらでも可能性があるし、常にいつも新鮮さと緊張感が
良い感じで協和してるんです。

ぜひぜひ目指して欲しいなぁ。（無理にじゃないけどね）
そのためには応援は惜しみませんよ。

それから前ほどじゃないけどやっぱり話していると目がしょぼしょぼしてくる人が気になります。
今日は名指しで注意します。
それやられると集中力が切れてしまうんですよ。
無視して集中するほど人間が出来てないのでよろしくね。

というわけで

今日の午前の授業はこちら　→　今日の午前の授業

今日の午後の授業はこちら　→　今日の午後の授業

あ　　今日のネタは戦国武将！　強いリクエストがあるのでしょうがないなぁ
とうのはうそでこれは秘密です。

　

JavaScript　その６

2008-09-25T00:37:00.002+09:00

うーん・・・

悩んじゃいますねぇ

JavaScriptの授業では今まで

・どんなのがあるか？
・手打ちの難しさ
・基本的なプログラミング

について学びました。

cssと並列して進んだりしてちょっと混乱してるかな？

ということで今日は

4限　また復習？？？
5限　繰り返し処理にチャレンジ
6限　応用編か？

の3本でお送りします。（なんかサザエさんみたいｗ）

内容はまたまたこちら　　→　JavaScriptしつこいけど

　

　

ロゴ作成　その２

2008-09-25T00:31:00.007+09:00

やっと本格的にロゴの作成が出来ますね。

絵心のあるないではなくて

・技術を知識として習得して
・必要とされるときに
・必要なものが作成できる

が大切です。

まずはツールの基本的な使い方を学びましょう！

まずその前に

１．デスクトップの「work」フォルダを作成
２．この写真2枚をその中に保存


さてツールは・・・

予告通り

GIMP　を使用します。

教室にインストールされているGIMPは2.2というバージョンです。
最新は2.4
ご自宅でダウンロードして使う場合には授業で行うバージョンと
最新バージョンはツールの並び方が結構異なりますので、ご注意を！

ということで今日は下記のサイトを参考にしながら

　　ゆ　っ　く　り

と進めていきましょうね。

参考にするのはここ　→　　Happy gimping

　

Javascript その5

2008-09-20T20:39:00.002+09:00

しつこいですが・・・

先日の復習を行います。

やはりここはじっくりと身につけて欲しいのと理解して打って欲しいという
気持ちでいっぱいだからです。

ということで　ここを再び！　→　やるのはここ

クライアントからの要望

2008-09-18T09:58:00.003+09:00

サイト構築をお願いします。

要望

１．周辺の写真をヘッダに入れたい。

２．CSSというやつを使ってレイアウトしてほしい。

３．JavaScriptで技術を見せたい。

４．文字が点滅したり、流れたりするのは深いです。

５．ボタンは画像でマウスを置くと色が変わるのがいいです。

６．内容はお任せします。

７．ページ数は任意だけれど締切は必ず守ってください。

８．質問事項はメールのみですが、返信が遅れるかできない場合があります。

今日の授業（9月18日スペシャル企画）

2008-09-18T00:15:00.004+09:00

Webビジネス科の皆様

本日の授業はスペシャルです！

これまで約1ヶ月半行なっていろいろと
　頭に詰まってる
　整理しきれない
　混乱している
　悩んでる
感じが見受けられます。

なので、今日は1日使ってスペシャル企画を行います。

まずは組み合わせから

・岩間さんと大田さん
・上田さんと布施さん
・神谷さんと田中先生
・川嶋さんと和泉さん
・山口さんと秋葉さん
・岩見さんと須崎さん
・川江さんと宇佐美さん
・池藤さんと近藤さん
・平井さんと市川さん

まずは普段話したことのないような人との組み合わせにしました。
よーく交流を深めてください。

ということで・・・
相棒へご自分の「home」を圧縮して送ってください。

あ！　いじっちゃだめ！　そのまま　いまのまま　圧縮すること！
中身についてはいい訳無し、解説は可です。

・シチュエーションその１
今回、新しい方と仕事を一緒にすることになりました。
現状の自分のスキルを周知していただくために今までの作品を見てもらいます。
というわけで、「home」を送ることになったのです。

さて、先方とはメールが届くまで会話してはいけません。
つまり、メールで「ごあいさつ」をしなくてはいけないのですよ。

見知らぬ相手にきちんと自分を名乗り、作品を見ていただくためには
ひるむことなく、臆することなく、自信を持って（なくてもね）アピールを
しなくてはいけないのです。

なにしろ今日中に二人はいっしょにサイトを作らなくてはいけないのです
からね。

ということを文面にしたためて9時40分までに送る必要があります。

☆☆☆本日のスケジュール予定☆☆☆

～9:40　メール送信
～9:50　メール内容および「home」確認
～10:10　クライアントからサイト構築説明

10:20～11:10　コンセプトおよび役割分担などMeeting（屋外！）
11:20　421集合　作業開始
　　　　　・
　　　　　・
　　　　　・
14:30　締め切り
14:45　各チームプレゼン開始！
　→プロジェクタを使用します。1チーム5分程度

詳細は授業が始まってからのお楽しみ。

ひさびさ　　　　　　　　　　　　　「きーっ！」　　　　が聞こえます。

　

今日の授業（9月17日）

2008-09-17T11:58:00.003+09:00

暑いよー

まったりやりますかね・・・

ということで今日の授業はここ　　→　　今日の授業

　

Javascript その４

2008-09-17T11:57:00.000+09:00

いろいろと体験したところであらためて入門編です。

今日はゆっくり進みましょうね。

☆変数の活用その１

<script type="text/javascript">

</script>

☆変数の活用その２

var Aisatu = "こんにちわ！";
var Namae = "ポリポリです。";

document.write( Aisatu + Namae );

var Feb = 2;
var Moji = "月は英語でFebruaryです！";

alert( Feb + Moji );

☆変数の中身を変えてみる

<script type="text/javascript">

</script>

☆if文－その１

<script type="text/javascript">

</script>

☆if文－その２

<script type="text/javascript">

</script>

☆くりかえし

<script type="text/javascript">

</script>

☆ブラウザ判別

<script language="JavaScript"></script>

今日の授業（9月16日）

2008-09-16T12:45:00.002+09:00

大雨でしたねー

土曜日は大地震が来るかと水を買って待ってたんですが、
来なくてよかったです。

さて、今日はJavaScriptの3回目ですね。

まだまだJavaScriptを体験していただきたいので、ひたすら試しましょう。

やはり理解するためにはコピペじゃないほうがよさそうなので、基本、手打ちで
行きます。

ということで今日の授業はこちら　今日の授業

　

Javascript その３

2008-09-16T10:55:00.003+09:00

今日は手打ちで行きましょう！

C01 ボタンクリックで入力用ダイアログを出し、入力内容をformに表示する

<html>
<head>
<title></title>
</head>
<body>

<form name="form1">
<input type="button" value=" 入力 "

onClick="
data = prompt('入力してください','書いてね')
if(document.all)data = unescape(escape(data).split('')[0])
this.form.fmsg.value = data
">

<input type="text" name="fmsg">
←入力内容がここに出ます。
</form>

</body>
</html>

onClick="命令文"でクリックしたら"命令文"を実行するという意味です

this.form.fmsg.valueのthisはこのスクリプトの書かれた INPUTタグを指しており、this.formで属するFORM、this.form.fmsgでそのFORMの中のfmsgという名前のタグを指しています。更に、this.form.fmsg.valueと書くことでそのタグのvalue(つまり、値)を意味します

if(document.all)data = unescape(escape(data).split('')[0])は、Win版のIEで入力以外のデータが付加されるのを回避するためのものです。document.allで分岐していますが厳密にはWin版IEだけの症状です

this.form.fmsg.value='メッセージ'は、そのフォームの値を'メッセージ'にする、つまり'メッセージ'を表示するという意味です

ちなみにこの場合は
document.form1.msg.value='メッセージ'
document.forms[0].elements[1].value='メッセージ'
document.forms['form1'].elements['fmsg'].value='メッセージ' などでも同じ意味です

prompt('文章1','文章2')は'文章1'が入力ダイアログ内に表示される文字で、'文章2'は入力フィールドにあらかじめ表示される書き換え可能な文字です。'文章2'は省略できます

したがって、this.form.fmsg.value=prompt()はprompt()の入力結果をフォームへ表示するわけです

*PS2用ブラウザ「EGBROWSER」は　デフォルトで表示される入力文字列　'文章2'　に日本語を使うと入力文字を取得できなくなりますが、'文章2'を省略しておくと日本語入力も受け付けます

C03 ページに入ったとたんに名前を聞き、入力した名前をページに表示する

<html>
<head>
<title></title>
<script language="JavaScript">

</script>
</head>
<body>
<script language="JavaScript">

</script>
</body>
</html>

C01の説明も参照してください

v1 = prompt("あなたの名前を入れてください",v2)で変数v1にprompt()の入力文字を代入します

if (v1 == v2 )つまり入力した文字(v1)が最初の表示(v2つまり、だれかさんという文字列)と同じなら、「だめだよー」とダイアログが出て、SimpleC03()を再実行します

if (v1 != null && v1 != ""){nameDayon = v1}はv1が空白だったり未入力でなければ変数nameDayonにv1(入力された文字)をセットします

if(xx==true){"命令文1"}else{"命令文2"}は、もしxxがtrueなら"命令文1"を実行し、違ったら後の"命令文2"を実行するという意味です

document.write('')はページに括弧の中味を書き出します。HTMLで記述できます

alert("文章")で"文章"の入ったダイアログを表示します

Wrt()で関数Wrt()内に記述されたスクリプトが実行され入力された名前が書き出されます

IE4,5のバグ回避Windows版のIEでpromptへ日本語を入力したときに付加されてしまうゴミを除去します
if(document.all)v1=unescape(escape(v1).split('')[0])

D01 ボタンクリックでサブウィンドウを開き、HTMLを表示する

<html>
<head>
<title></title>

<script language="JavaScript">

</script>

</head>
<body>

<form>
<input type="button" value=" windowオープン "
onClick="winOpen()">
</form>

</body>
</html>

window.openに関する説明はwindow.openをご覧ください

functionは関数(複数のスクリプトをまとめて名前をつけたもの)を作る命令で、この場合はwinOpen()が関数名です

var win01でwin01という変数を作ってから=window.open('','winname','etc....')とすることでwinnameという名前のサブウインドウをwin01に代入します。こうしたあとはwin01と書くとこのサブウインドウを意味するようになります

したがって、次のwin01.document.write('xxx')はサブウインドウに'xxx'を書き出す(document.writeする)という意味で、

その次のwin01.document.close()はサブウインドウに'xxx'を書き出すのをやめる(document.closeする)という意味です

onClick="命令文"でクリックしたら"命令文"を実行するという意味です。ここでは、onClick="winOpen()"で関数winOpen()のなかに書かれた命令を実行します

D03 ボタンクリックでツールバー付きのサブウィンドウを開く

<html>
<head>
<title></title>

<script language="JavaScript">

</script>

</head>
<body>

<form>
<input type="button" value=" toolbar "
onClick="winOpen()"> windowオープン
</form>

</body>
</html>

window.openに関する説明はwindow.openをご覧ください

toolbar=1はツールバーを付けるという意味。toolbar=yesまたは toolbarだけでも同じ意味です。付けない時は、 toolbar=0とか toolbar=noまたはtoolbarを書かないという指定の仕方をします

width=500横幅をピクセル単位で指定。この場合は幅500ピクセル
height=100高さをピクセル単位で指定。この場合は幅100ピクセル
指定できる横幅と高さはそれぞれ100ピクセル以上です

win03.document.write('xxx')はサブウインドウに'xxx'を書き出す(document.writeする)という意味で、

その次のwin03.document.close()はサブウインドウに'xxx'を書き出すのをやめる(document.closeする)という意味です

onClick="命令文"でクリックしたら"命令文"を実行するという意味です

ここでは、onClick="winOpen()"で関数winOpen()のなかに書かれた命令を実行します

D04 ボタンクリックでロケーションフィールド付きのサブウィンドウを開く

<html>
<head>
<title></title>

<script language="JavaScript">

</script>

</head>
<body>

<form>
<input type="button" value=" location "
onclick="winOpen()"> windowオープン
</form>

</body>
</html>

window.openに関する説明はwindow.openをご覧ください

location=1はロケーションフィールドを付けるという意味。location=yesまたは locationだけでも同じ意味です。付けない時は、 location=0とか location=noまたはlocationを書かないという指定の仕方をします

width=500横幅をピクセル単位で指定。この場合は幅500ピクセル
height=100高さをピクセル単位で指定。この場合は幅100ピクセル
指定できる横幅と高さはそれぞれ100ピクセル以上です

win04.document.write('xxx')はサブウインドウに'xxx'を書き出す(document.writeする)という意味で、

その次のwin04.document.close()はサブウインドウに'xxx'を書き出すのをやめる(document.closeする)という意味です

onClick="命令文"でクリックしたら"命令文"を実行するという意味です

ここでは、onClick="winOpen()"で関数winOpen()のなかに書かれた命令を実行します

D05 ボタンクリックでディレクトリボタン付きのサブウィンドウを開く

<html>
<head>
<title></title>

<script language="JavaScript">

</script>

</head>
<body>

<form>
<input type="button" value=" directories "
onClick="winOpen()"> windowオープン
</form>

</body>
</html>

window.openに関する説明はwindow.openをご覧ください

directories=1はディレクトリーボタンを付けるという意味。directories=yesまたは directoriesだけでも同じ意味です。付けない時は、 directories=0とか directories=noまたはdirectoriesを書かないという指定の仕方をします

width=500横幅をピクセル単位で指定。この場合は幅500ピクセル
height=100高さをピクセル単位で指定。この場合は幅100ピクセル
指定できる横幅と高さはそれぞれ100ピクセル以上です

win05.document.write('xxx')はサブウインドウに'xxx'を書き出す(document.writeする)という意味で、

その次のwin05.document.close()はサブウインドウに'xxx'を書き出すのをやめる(document.closeする)という意味です

onClick="命令文"でクリックしたら"命令文"を実行するという意味です

ここでは、onClick="winOpen()"で関数winOpen()のなかに書かれた命令を実行します

D06 ボタンクリックでステータスバー付きのサブウィンドウを開く

<html>
<head>
<title></title>

<script language="JavaScript">

</script>

</head>
<body>

<form>
<input type="button" value=" status "
onClick="winopen()"> windowオープン
</form>

</body>
</html>

window.openに関する説明はwindow.openをご覧ください

status=1はステータスバーを付けるという意味。status=yesまたは statusだけでも同じ意味です。付けない時は、 status=0とか status=noまたはstatusを書かないという指定の仕方をします

width=500横幅をピクセル単位で指定。この場合は幅500ピクセル
height=100高さをピクセル単位で指定。この場合は幅100ピクセル
指定できる横幅と高さはそれぞれ100ピクセル以上です

win06.document.write('xxx')はサブウインドウに'xxx'を書き出す(document.writeする)という意味で、

その次のwin06.document.close()はサブウインドウに'xxx'を書き出すのをやめる(document.closeする)という意味です

onClick="命令文"でクリックしたら"命令文"を実行するという意味です

ここでは、onClick="winOpen()"で関数winOpen()のなかに書かれた命令を実行します

D07 ボタンクリックでメニューバー付きのサブウィンドウを開く

<html>
<head>
<title></title>

<script language="JavaScript">

</script>

</head>
<body>

<form>
<input type="button" value=" menubar "
onclick="winOpen()"> windowオープン
</form>

</body>
</html>

window.openに関する説明はwindow.openをご覧ください

menubar=1はメニューバーを付けるという意味。menubar=yesまたは menubarだけでも同じ意味です。付けない時は、 menubar=0とか menubar=noまたはmenubarを書かないという指定の仕方をします

width=500横幅をピクセル単位で指定。この場合は幅500ピクセル
height=100高さをピクセル単位で指定。この場合は幅100ピクセル
指定できる横幅と高さはそれぞれ100ピクセル以上です

win07.document.write('xxx')はサブウインドウに'xxx'を書き出す(document.writeする)という意味で、

その次のwin07.document.close()はサブウインドウに'xxx'を書き出すのをやめる(document.closeする)という意味です

onClick="命令文"でクリックしたら"命令文"を実行するという意味です

ここでは、onClick="winOpen()"で関数winOpen()のなかに書かれた命令を実行します

D08 ボタンクリックでスクロールバー付きのサブウィンドウを開く

<html>
<head>
<title></title>

<script language="JavaScript">

</script>

</head>
<body>

<form>
<input type="button" value=" scrollbars "
onClick="winOpen()"> windowオープン
</form>

</body>
</html>

window.openに関する説明はwindow.openをご覧ください

scrollbars=1はスクロールバーを付けるという意味。scrollbars=yesまたは scrollbarsだけでも同じ意味です。付けない時は、 scrollbars=0とか scrollbars=noまたはscrollbarsを書かないという指定の仕方をします

width=500横幅をピクセル単位で指定。この場合は幅500ピクセル
height=100高さをピクセル単位で指定。この場合は幅100ピクセル
指定できる横幅と高さはそれぞれ100ピクセル以上です

win08.document.write('xxx')はサブウインドウに'xxx'を書き出す(document.writeする)という意味で、

その次のwin08.document.close()はサブウインドウに'xxx'を書き出すのをやめる(document.closeする)という意味です

onClick="命令文"でクリックしたら"命令文"を実行するという意味です

ここでは、onClick="winOpen()"で関数winOpen()のなかに書かれた命令を実行します

D09 ボタンクリックでリサイズ可能なサブウィンドウを開く

<html>
<head>
<title></title>

<script language="JavaScript">

</script>

</head>
<body>

<form>
<input type="button" value=" resizable "
onClick="winOpen()"> windowオープン
</form>

</body>
</html>

window.openに関する説明はwindow.openをご覧ください

resizable=1はスクロールバーを付けるという意味。resizable=yesまたは resizableだけでも同じ意味です。付けない時は、 resizable=0とか resizable=noまたはresizableを書かないという指定の仕方をします

width=500横幅をピクセル単位で指定。この場合は幅500ピクセル
height=100高さをピクセル単位で指定。この場合は幅100ピクセル
指定できる横幅と高さはそれぞれ100ピクセル以上です

win09.document.write('xxx')はサブウインドウに'xxx'を書き出す(document.writeする)という意味で、

その次のwin09.document.close()はサブウインドウに'xxx'を書き出すのをやめる(document.closeする)という意味です

onClick="命令文"でクリックしたら"命令文"を実行するという意味です

ここでは、onClick="winOpen()"で関数winOpen()のなかに書かれた命令を実行します

D10 サブウィンドウの大きさを指定する

<html>
<head>
<title></title>
<script language="JavaScript">

</script>
</head>
<body>
<form>
<input type="button" value=" 1. width=100 height=300 "
onClick="winOpen0()">
<input type="button" value=" 2. width=400 height=150 "
onClick="winOpen1()">
<input type="button" value=" 3. width=100 height=100 "
onClick="winOpen2(100,100)">
<input type="button" value=" 4. width=300 height=300 "
onClick="winOpen2(300,300)">
</form>
</body>
</html>

window.openに関する説明はwindow.openをご覧ください

width=横幅をピクセル単位で指定します
height=100高さをピクセル単位で指定します
指定できる横幅と高さはそれぞれ100ピクセル以上です。(W+'')+(H+'')の部分はwidth,heightの値をつなげてウインドウの名前を作成しています。この名前はターゲット名に相当します

WinD10.document.write('xxx')はサブウインドウに'xxx'を書き出す(document.writeする)という意味で、

その次のWinD10.document.close()はサブウインドウに'xxx'を書き出すのをやめる(document.closeする)という意味です

onClick="命令文"でクリックしたら"命令文"を実行するという意味です

ここでは、onClick="winOpen()"で関数winOpen()のなかに書かれた命令を実行します

function winOpen2(W,H){命令}としておいて onClick="winOpen2(300,300)"をクリックするとW=300,H=300が関数winOpen2()のなかに書かれたWとHに引き渡されます。ここでは、たとえば、width='+W+',height='+H+'と書かれた部分が width=300,height=300に置き換わって命令が実行されます

今日の授業（9月12日）

2008-09-12T10:46:00.004+09:00

あさ　他の先生方から

「４２１教室に私物が置いてあるのは困る」

と怒られました。

とても凹んでます。

他の方も使用したり、学校見学（随時）がありますので、ご協力ください。

ということで、今日はロゴ作成。

画像を作って昨日のcssindex.htmlに表示できたら　素敵

今日こそ皆さんのセンスが問われますね。
がんばりましょうね。

今日の授業はこちら　→　今日の授業

　

ロゴ作成　その１

2008-09-12T10:09:00.005+09:00

今日はロゴ作成です。

まずは入門編

ペイントというWindowsのツールを使用しましょう。

☆今日の目標
１．cssindex.htmlにヘッダ画像をつける
２．leftにメニューボタンをつける

練習です。
ここから画像をダウンロードしてデスクトップに保存してください。

崖の上のぽにょ

まずこの画像の大きさを把握しましょう。
→画像を右クリックでプロパティを見ます。

次にペイントを開きます。

方法
　その１　「ぽにょ」を右クリック　→　「プログラムから開く」　→　「ペイント」
　その２　スタートキー　→　アクセサリ　→　ペイント　→ファイル　→　開く

開かれた画像は求めるヘッダ画像より小さいので拡大します。

変形　→　サイズ変更/傾斜
水平　200％　垂直　200％にします。

変形　→　キャンパスの色とサイズ
※「ピクセル」を選択
幅　903　高さ　200

他にも画像自体を直接ドラッグでサイズ変更できるので試してみましょう

☆課題１
これをcssindex.htmlに表示できるようにしましょう。

☆課題2
１．他の画像を検索
２．ふさわしいサイズに変更（特に高さを考えてください）
３．cssindex.htmlに表示できるようにする。

Leftにボタンを表示する

ペイントでボタンを作成します。
ファイル　→　新規
変形　→　キャンパスの色とサイズ
Leftで指定しているピクセル数を把握した上で最適と思われる
サイズにしてください。

テキスト入力ボタンをPUSH
文字を入力

名前を付けて保存
→ここではGifにしましょう。

トラップですが･･･
保存先は？

課題
１．Leftに表示
２．リンク先を自分のGmail
３．別Windowで開く

これを例題として各自
１．メニューボタンの作成
　どんなメニュー？（うどんとかおでんとかじゃないです！）
２．該当ページに表示＆リンク

☆☆☆発展バージョン

ここでは単語だけ言いますね。

ロールオーバー

チャレンジャーはぜひやってみてください。

よい子はみちゃだめ
CSSでロールオーバー

#image a{
display:block;
width:200px;
color:#F0027F;
background:url(../images/bottan.jpg) no-repeat;
height:50px;
line-height:50px;
text-decoration:none;
text-align:center;
　}

#image a:hover{
color:orange;
background:url(../images/bottan2.jpg) no-repeat;
}

→これをhtml内に

<div id ="image"><a href="URL">見本です。</a></div>

って感じかな？

☆もしくは

css－－－－－

#sidemenu dd{
font-size:13px;
border-bottom:1px solid #fff;
}

#sidemenu dd a{
display:block;
height:20px;
line-height:20px;
color:#666666;
padding-left:16px;
text-decoration:none;
}

#sidemenu dd a:hover{
color:#fff;
background:orange
;}

html－－－－－

<div id="sidemenu">
<dl>
<dt>CSSの基礎知識</dt>
<dd><a href="URL">CSS フォント</a></dd>
<dd><a href="URL">CSS テーブル</a></dd>
<dd><a href="URL">CSS ロールオーバー</a></dd>
<dd><a href="URL">CSS 背景</a></dd>
<dd><a href="URL">CSS margin</a></dd>
<dd><a href="URL">CSS float</a></dd>
</dl>
</div>

いろいろありますね。

　

今日の授業（9月10日）

2008-09-11T10:28:00.002+09:00

みなさん　こんにちは

「就職支援」お疲れ様でした。

さてさて、そろそろ近未来のビジョンを確立していく時がやってきましたね。
あせらず、じっくりと計画性をもって

　・現在やらなくてはいけないこと
　・そのために調査すべきこと
　・そのために解決すべきこと

を推し進めてください。

本日は「CSS総集編です。」

いままで、断片的にとらえていたものが帰結する感じです。

よろしく。

ということで今日の授業はこちら

　

CSSでレイアウト

2008-09-11T09:59:00.004+09:00

さて

CSS総集編です。

今日はCSSを使用してレイアウトにチャレンジしてみましょう。

まずはこれをDLしてください。　→　DL先はこちら

解凍したのち

１．index.html　→　home/cssindex.thml
２．cssと画像はhome内のふさわしいと思われるフォルダに格納してください。

☆main.cssの内容
--------------------
/*
Created by Keith Donegan of Code-Sucks.com

E-Mail: Keithdonegan@gmail.com

You can do whatever you want with these layouts,
but it would be greatly appreciated if you gave a link
back to http://www.code-sucks.com

*/

* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#faux {
background: url(faux-1-2-col.gif);
margin-bottom: 5px;
overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
width: 100%
}
#header {
color: #333;
width: 902px;
padding: 10px;
height: 100px;
margin: 10px 0px 5px 0px;
background: #ABBEBE;
}
#leftcolumn {
display: inline;
color: #333;
margin: 10px;
padding: 0px;
width: 195px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
margin: 10px;
padding: 0px;
width: 683px;
display: inline;
position: relative;
}
#footer {
width: 902px;
clear: both;
color: #333;
background: #ABBEBE;
margin: 0px 0px 10px 0px;
padding: 10px;
}
.clear { clear: both; background: none; }
--------------------

☆cssindex.htmlの内容

--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Faux Column CSS Layouts - 2 Column - faux-1-2-col</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>


<div id="wrapper">


<div id="header">

This is the Header

</div>



<div id="faux">


<div id="leftcolumn">

</div>



<div id="rightcolumn">

<a href="#">Download this CSS Layout</a>

<br /><br />

<h1>Faux Column CSS Layouts</h1>

<p>

These 2 Column Faux CSS Layouts use a background image to make it look like the
left and right columns are equal in height and independent of each other.

<br />
<br />

Things couldn't be further from the truth. I created a parent column called faux
and vertically tiled the image, that contained both the left and right child columns.
I then vertically tiled the faux background image and viola.

<br />
<br />

I first found about this method from the <a href="http://www.alistapart.com">
alistapart site</a> by a guy called <a href="http://simplebits.com/">Dan Cederholm</a>

</p>

<div class="clear"></div>

</div>


<div class="clear"></div>

</div>



<div id="footer">

This is the Footer

</div>


</div>

</body>
</html>
--------------------

課題：
１．ヘッダに文字を入れてみましょう。
２．ヘッダにロゴを入れてみましょう。
３．フッタに会社情報などを入れてみましょう。
４．左にメニューを入れてみましょう。
５．右に本文を入れてみましょう。

特）別のレイアウトでもやってみましょう。

そのほかのレイアウト例はこちら　→　ここから参照

きょうはどんなこと？（9月9日）

2008-09-10T11:53:00.004+09:00

JavaScript２回目ですね。

とはいえ、最初に「ホームページ」を作ることについて

・どれだけ考えているか？
・どう考えなくてはいけないか？

を質問します。
この世界にいるには当然いつも考え続けなくてはいけないことです。

具体的かつ技術的かつセンサブルなお答えをお待ちしております。

第１問：そもそも横は何ピクセルでつくるつもり？

あとは秘密・・・

そのあと、JavaScriptにはいりますねー（笑

ということで今日の授業はここをクリック

　　　

Javascript その２

2008-09-10T11:27:00.004+09:00

まずこれをDLしてください。

http://groups.google.com/group/webbiz08/web/0909.zip?hl=ja

解凍したのち

html 　→　「home」
gif　　　→　「home/img」

に保存してください。

それでは開始します。

-----------------------------------------------------------------------------
１．ボタンクリックで確認ダイアログを出す-分岐処理をalertに出力-

<html>
<head>
<title></title>
</head>
<body>

<form>
<input type="button" name="" value=" 押してください "
onClick="

if( confirm('あなたはうそをついたことがありますか YES=OK ') == true ) {
alert('yesを押したあなたは、正直なうそつきです(^^;')
} else {
alert('あなたは、うそつきです(^^;;')
}

">
</form>

</body>
</html>

onClick="命令文"でクリックしたら"命令文"を実行するという意味です

if( xx == true ){ "命令文" }else{ "命令文" }は、もしxxがtrueなら最初の"命令文"を実行し、違ったら後の"命令文"を実行するという意味です。この場合、if( confirm("xxx") ){ "命令文" }else{ "命令文" }という風に==trueを省略してもokです

confirm("文章")は"文章"の入ったYES/NOダイアログを表示しOK(YES)ならtrue、キャンセル(NO)ならfalseを返します

alert("文章")で"文章"の入ったダイアログを表示します

-----------------------------------------------------------------------------
２．ラジオボタンクリックで確認ダイアログを出す-分岐処理をformに出力-

<html>
<head>
<title></title>
</head>
<body>

<form name="form1">
<input type="radio" name="" value=" 押してください "
onClick="

if ( confirm('あなたは18才未満ですか? YES=OK ') == true ) {
document.form1.msg.value = 'こどもだねっ'
} else {
document.form1.msg.value = 'おとなですねっ^^;'
}

">-押してみてね
<input type="text" name="msg">
</form>

</body>
</html>

onClick="命令文"でクリックしたら"命令文"を実行するという意味です

if( xx == true ){ "命令文" }else{ "命令文" }は、もしxxがtrueなら最初の"命令文"を実行し、違ったら後の"命令文"を実行するという意味です。この場合、if( confirm("xxx") ){ "命令文" }else{ "命令文" }という風に==trueを省略してもokです

confirm("文章")は"文章"の入ったYES/NOダイアログを表示しOK(YES)ならtrue、キャンセル(NO)ならfalseを返します

document.form1.msg.valueは、form1という名前のフォームの中のmsgという名前のエレメント(この場合はINPUT文)のvalue(つまり、値)という意味です

document.form1.msg.value="xxx"は、そのフォームの値を"xxx"にする、つまり"xxx"を表示するという意味です

ちなみにこの場合document.form1.msg.valueの部分は

document.forms[0].elements[1].value=msg

document.forms['form1'].elements['msg'].value =msg

this.form.elements['msg'].value =msg

this.form.msg.value =msg などと書いても同じ意味です

-----------------------------------------------------------------------------
３．文字をクリックしたら質問を出し、答えによってダイアログを出す

<html>
<head>
<title></title>
</head>
<body>

問題 1 : <a href="javascript:void(0)"

onClick="

if( confirm('牛久大仏のおもさは4000トン?。\nこれは正解? YES=OK')
== true ){

alert('正解(^^)/ 6000枚の青銅(ブロンズ)板で作られています')

} else {

alert('残念でした(^^;;')

}

">
牛久大仏のおもさは4000トンです。
</a>

</body>
</html>

<a href="javascript:命令文">文章</A>で文章をクリックしたら"命令文"を実行します。ここでは、何もしないvoid(0)という特殊な命令を実行しています。つまり、クリックしても何もしません

onClick="命令文"でクリックしたら"命令文"を実行するという意味です if( xx == true ){ "命令文" }else{ "命令文" }は、もしxxがtrueなら最初の"命令文"を実行し、違ったら後の"命令文"を実行するという意味です。この場合、if( confirm("xxx") ){ "命令文" }else{ "命令文" }という風に==trueを省略してもokです

confirm("文章")は"文章"の入ったYES/NOダイアログを表示しOK(YES)ならtrue、キャンセル(NO)ならfalseを返します

\nは改行の意味です

alert("文章")で"文章"の入ったダイアログを表示します

-----------------------------------------------------------------------------
４．文字にさわったら質問を出し、答えによってダイアログを出す

<html>
<head>
<title></title>
</head>
<body>

<a href="javascript:function voi(){};voi()"
onMouseOver="

if( confirm('さわっちゃだめだってば...^^;。\nもう、さわらない?')
== true ){
alert('でも、もう一回だけならいいよ(^^)')
} else {
alert('さわっちゃ(#^^#)いやん')
}

">
この文字にさわると怪我するぜっ
</a>

</body>
</html>

a href="javascript:命令文"でクリックしたら"命令文"を実行するという意味ですがここではfunction voi(){}という　中味のない　voi()という関数を作ってから、続くvoi()で「なにもしない」^^;を実行してます。Netscapeの3.0からは作らなくてもvoid(0)という命令が用意されています。その場合は a href="javascript:void(0)" と書きます

onMouseOver="命令文"でマウスがさわったら"命令文"を実行するという意味です

if( xx == true ){ "命令文" }else{ "命令文" }は、もしxxがtrueなら最初の"命令文"を実行し、違ったら後の"命令文"を実行するという意味です。この場合、if( confirm("xxx") ){ "命令文" }else{ "命令文" }という風に==trueを省略してもokです

confirm("文章")は"文章"の入ったYES/NOダイアログを表示しOK(YES)ならtrue、キャンセル(NO)ならfalseを返します

\nは改行の意味です

alert("文章")で"文章"の入ったダイアログを表示します

-----------------------------------------------------------------------------
５．画像をクリックしたら質問を出し、答えによってダイアログを出す1 -onClickを使うケース-

<html>
<head>
<title></title>
</head>
<body>

<a href="javascript:function voi(){};voi()"
onClick="
if( confirm('牛久大仏は奈良の大仏様が手のひらにのってしまう程の大きさです。\n正解? YES=OK') == true ){
alert('正解(^^)/ ')
} else {
alert('残念でした')
}
">
<img src="mondai.gif" width="120" border="0"></a>
ボタンクリックすると問題が出ます。

</body>
</html>

a href="javascript:命令文"でクリックしたら"命令文"を実行するという意味ですがここではfunction voi(){}という　中味のない　voi()という関数を作ってから、続くvoi()で「なにもしない」^^;を実行してます。Netscapeの3.0からは作らなくてもvoid(0)という命令が用意されています。その場合は a href="javascript:void(0)" と書きます

onClick="命令文"でクリックしたら"命令文"を実行するという意味です

confirm("文章")は"文章"の入ったYES/NOダイアログを表示しOK(YES)ならtrue、キャンセル(NO)ならfalseを返します

\nは改行の意味です

-----------------------------------------------------------------------------
６．画像をクリックしたら質問を出し、答えによってダイアログを出す2 -javascript:を使うケース-

<html>
<head>
<title></title>
</head>
<body>

<a href="javascript:function voi(){};voi()"
onClick="
if( confirm('奈良の大仏が手のひらにのってしまう大きさの牛久大仏がギネスブックにのっている。\nさあどっち?') == true ){
alert('正解(^^)/ ')
} else {
alert(' 載っています(^^)')
}
">
<img src="MONDAI1.GIF" width="120" border="0"></a>

ボタンをクリックすると問題が出ます。

</body>
</html>

a href="javascript:命令文"でクリックしたら"命令文"を実行するという意味ですがここではfunction voi(){}という　中味のない　voi()という関数を作ってから、続くvoi()で「なにもしない」^^;を実行してます。Netscapeの3.0からは作らなくてもvoid(0)という命令が用意されています。その場合は a href="javascript:void(0)" と書きます

if( xx == true ){ "命令文" }else{ "命令文" }は、もしxxがtrueなら最初の"命令文"を実行し、違ったら後の"命令文"を実行するという意味です。この場合、if( confirm("xxx") ){ "命令文" }else{ "命令文" }という風に==trueを省略してもokです

confirm("文章")は"文章"の入ったYES/NOダイアログを表示しOK(YES)ならtrue、キャンセル(NO)ならfalseを返します (IE4.0ではこの文章があまり長いと強制終了になる場合があるようですのでご注意ください)

\nは改行の意味です

alert("文章")で"文章"の入ったダイアログを表示します

-----------------------------------------------------------------------------
７．画像をクリックしたら質問を出し、答えによってページを分岐する

<html>
<head>
<title></title>
<script language="JavaScript">

</script>
</head>
<body>

<a href="javascript:simpleb07()">
<img src="MONDAI1.GIF" width="120" border="0"></a>
ボタンをクリックすると問題が出ます。

</body>
</html>

functionは関数(複数のスクリプトをまとめて名前をつけたもの)を作る命令で、この場合のSimpleB07()は関数名です

if( xx == true ){ "命令文" }else{ "命令文" }は、もしxxがtrueなら最初の"命令文"を実行し、違ったら後の"命令文"を実行するという意味です。この場合、if( confirm("xxx") ){ "命令文" }else{ "命令文" }という風に==trueを省略してもokです

confirm("文章")は"文章"の入ったYES/NOダイアログを表示しOK(YES)ならtrue、キャンセル(NO)ならfalseを返します

\nは改行の意味です

window.location.href='SIMPLB08.HTM'は'SIMPLB08.HTM'というページを読み込むという意味です。この場合、self.location.hrefでもlocation.hrefでも同じ様に動きます

a href="javascript:命令文"はクリックしたら"命令文"を実行するという意味

-----------------------------------------------------------------------------
８．写真にさわったら説明し、答えによって拡大写真を表示する

<html>
<head>
<title></title>

<script language="JavaScript">

</script>

</head>
<body>

<a href="javascript:function voi(){};voi()"
onMouseOver="b08()">
<img src="photo_small.gif"
width="20" border="0"></a>

写真に触れるとメッセージが出ます。

</body>
</html>

functionは関数(複数のスクリプトをまとめて名前をつけたもの)を作る命令で、この場合のb08()は関数名です

if( xx == true ){ "命令文" }else{ "命令文" }は、もしxxが trueなら最初の"命令文"を実行し、違ったら後の"命令文"を実行するという意味です。このサンプルでは後の命令を省略していますので、キャンセル時には何もしません。また、if( confirm("xxx") ){ "命令文" }else{ "命令文" }という風に==trueを省略してもokです

confirm("文章")は"文章"の入ったYES/NOダイアログを表示しOK(YES)ならtrue、キャンセル(NO)ならfalseを返します

\nは改行の意味です

window.location.href='SIMPLB08.HTM'は'SIMPLB08.HTM'というページを読み込むという意味です。この場合、self.location.hrefでもlocation.hrefでも同じ様に動きます

a href="javascript:命令文"でもクリックしたら"命令文"を実行するという意味ですが

ここではfunction voi(){}という　中味のない　voi()という関数を作ってから、続くvoi()で「なにもしない」^^;を実行してます。Netscapeの3.0からは作らなくてもvoid(0)という命令が用意されていますが、2.0などではエラーになるのでこの方法にしました

onMouseOver="命令文"でマウスがさわったら"命令文"を実行するという意味です

-----------------------------------------------------------------------------
９．送信ボタンを押したらお礼と確認ダイアログを出す、NOなら送信しない

<html>
<head>
<title></title>
</head>
<body>

<form method="post"
action="mailto:xx@xxxx.or.jp"
onSubmit='return confirm("ありがとうございます(^^)/\n...でも、ほんとに送信しますか(^^；。")'>
<input type="text" name="e1">
<input type="submit" value=" 送信 ">
<br>何か書いてから送信を押してみてください。
</form>

</body>
</html>

onSubmit="命令"は送信ボタンが押されたら"命令"を実行するという意味です

confirm("文章")は"文章"の入ったYES/NOダイアログを表示しOK(YES)ならtrue、キャンセル(NO)ならfalseを返します

onSubmit="return false"で送信ボタンが押されたら"送信"を中止します

したがってonSubmit="return confirm('文章')"は、confirmダイアログへの入力がOK(YES)なら送信、キャンセル(NO)なら送信中止となります

-----------------------------------------------------------------------------
１０．ページに入ったとたんに質問し、答えによってページを分岐する

<html>
<head>
<title></title>

<script language="JavaScript">

</script>

</head>
<body>
いらっしゃいませ
</body>
</html>

functionは関数(複数のスクリプトをまとめて名前をつけたもの)を作る命令で、この場合のb11()は関数名です

if( xx == true ){ "命令文" }else{ "命令文" }は、もしxxがtrueなら最初の"命令文"を実行し、違ったら後の"命令文"を実行するという意味です。この場合、if( confirm("xxx") ){ "命令文" }else{ "命令文" }という風に==trueを省略してもokです

confirm("文章")は"文章"の入ったYES/NOダイアログを表示しOK(YES)ならtrue、キャンセル(NO)ならfalseを返します

location.href="URL"はURLのページを読みこみます

alert("文章")で"文章"の入ったダイアログを表示します

B11()で関数b11()内に記述されたスクリプトが実行されます

2008-09-08T22:40:00.001+09:00

Geolocate this post

Posted with LifeCast

本日の授業　9月8日編

2008-09-07T22:01:00.002+09:00

こんにちわー

いよいよJavascriptですねー

今日はひたすら実践編です。

簡単ですけれどすべてとても有効なものばかりですから、
気合いを入れていきましょう。

質問はいつでもどうぞ。

ということでJavascriptその１

授業内容はこちら

.

Javascript その１

2008-09-07T21:58:00.003+09:00

Javascript入門編

「home」フォルダの中にjava.htmlを作成しましょう。

以下のものをコピー貼り付けして試します。

みんなでいっしょに説明しながらやりましょうね。

フライング禁止で-す！！

--------------------------------------------
１．ボタンクリックでダイアログを出す

<html>
<head>
<title></title>
</head>
<body>

<form>
<input type="button" name="" value=" 押してください "
onClick="alert('ようこそ\nかねだworldへ(^^)/\nまぁ、ゆっくり遊んでいってください\nあとで、メールもちょうだいねっ。')" >
</form>

</body>
</html>

--------------------------------------------
２．文字をクリックしたらダイアログを出す

<a href="javascript:function voi(){};voi()"
onClick="alert('これはリンクではありません(^^)')"
>
説明はここをクリック
</a>

--------------------------------------------
３．文字にさわったらダイアログを出す

<a href="javascript:function voi(){};voi()"
onMouseOver="alert('さわっちゃ(#^^#)いやん')">
この文字にさわってはいけません
</a>

--------------------------------------------
４．写真をクリックしたらダイアログを出す1 -onClickを使うケース-

<a href="javascript:function voi(){};voi()"
onClick="alert('これはonclickでalert文を実行しました')">
<img src="sample.png" width="120" border="0"></a>
写真をクリックすると説明が出ます。

--------------------------------------------
５．写真をクリックしたらダイアログを出す2 -javascript:を使うケース-

<a href="javascript:alert('これはjavascript:でalert文を実行しました')">
<img src="sample.png" width="120" border="0"></a>
写真をクリックすると説明が出ます。

--------------------------------------------
６．写真にさわったらダイアログを出す

<a href="javascript:function voi(){};voi()"
onMouseOver="alert('これは元日早朝の牛久大仏です\n500メートル離れたところから\n私が撮りました(^^)。')"
><img src="sample.png" width="120" border="0"></a>
写真に触れるとメッセージが出ます。

--------------------------------------------
６．写真から離れたらダイアログを出す

<a href="javascript:function voi(){};voi()"
onMouseOut="alert('はなさないでね～(^^;')">
<img src="sample.png" width="120" border="0"></a>
写真に触れたあと離れる時にメッセージが出ます。

--------------------------------------------
７．リセットボタンを押したらダイアログを出す

<form
onReset="alert('ほんとに消すからね(^^;。');return true">

<input type="text" name="">
<input type="reset">

何か書いてからresetを押してみてください。
</form>

--------------------------------------------
８．送信ボタンを押したらダイアログを出す

<form action="mailto:xx@xxxx.or.jp"
method="post"
onsubmit="alert('どうも、ありがとねー(^^)/')">

<input type="text" name="">
<input type="submit" value=" 送信 ">

何か書いてから送信を押してみてください。
</form>

--------------------------------------------
９．数字入力後クリックで入力確認を出し、未入力だと再入力メッセージを出す

<form>
<input type="text" value=""
onBlur="

if( this.value == '' ){
alert('再入力')
} else {
alert('入力したのは\n'+this.value+' ですね')
} "

>
</form> 数字入力後フォーム以外の場所をクリックしてください。

--------------------------------------------
１０．Javaが使えるかどうかのダイアログを出す（<head></head>の中で使用）

<script language="JavaScript">

</script>

--------------------------------------------
１１．ページに入ったとたんにダイアログを出す1 -読み込み完了前-

<head>
<title></title>

<script language="JavaScript">

</script>

</head>

--------------------------------------------
１２．ページに入ったとたんにダイアログを出す2 -読み込み完了後-

<body onLoad="alert('いらっしゃいませ(^^)/')">

</body>

--------------------------------------------
１３．ページを出る時にダイアログを出す

<body onUnload="alert('さよ～なら～(^^)/~ また来てね～')">

</body>

--------------------------------------------
１４．XX秒後にダイアログを出す

<head>
<title></title>

<script language="JavaScript">

</script>

</head>

</head>
<body>

<form>
<input type="button" value=" クリックして5秒まつのだ(^^)/ "
onClick="window.setTimeout('msg()',5000)">
</form>

</body>
</html>

今日の授業（9月5日）

2008-09-05T10:47:00.003+09:00

昨日もまたまた時間を忘れるほどみなさん集中力を持っていて素敵でした。
「休み時間だよ～」っていってくださーいねｗ

◎昨日の復習をしましょう。

さて、昨日の予告通り・・・
今日の最初は特別ゲストが習得した知識についてプロジェクターを
使ってプレゼンします。

ぜひみなさんも目薬を忘れずに・・・って泣かすのか！？

質問はいつでもどうぞ。
Web系　与太話でもしましょうかね。
「その話を聞きたい」「あれってどうやってるの？」など募集中！
と昨日言ったのにリクエストがなくて悲しいです・・・
お待ちしてますよ。
今日は「そういう時間だよ」って宣言しますかね。

ということでCSS定義の復習とCSS外部ファイル

授業内容はこちら

.

CSSの定義まとめ

2008-09-05T10:33:00.002+09:00

今まで何度かお伝えしていますが、CSSの定義の仕方は
３通りあります。

１．直接スタイルを指定する。
<要素名 style="☆">～</要素名>

テキスト　P233

２．HTML文書内にまとめて記述する。
<style type="text/css">★</style>

例：
<head>
<style type="text/css">
p.hot
{
color: red
}
</style>
</head>

テキスト　P234

３－１．link要素で外部スタイルシートを読み込む。
<head>
<link rel="stylesheet" href="☆" type="text/css">
</head>

例：
CSSファイルを"main.css"とした場合
<link rel="stylesheet" href="main.css" type="text/css">

テキスト　P235

３－２．@importで外部スタイルシートを読み込む
@import"☆";

例：
<head>
<style type="text/css">;
@import"main.css"
</style>
</head>

※外部スタイルシートの文字コードを指定する場合には
　スタイルシートの先頭行に
　@charaset"Shift_JIS";といれる
　（これはシフトJISコードの場合）
　
　テキスト　P236
　

教材データ

2008-09-04T15:29:00.006+09:00

教材データです。

このままでは421教室は解凍できないのでここで中身を確認してください。

圧縮形式でまとめてダウンロードしたい人はこちら

classとid

2008-09-04T10:35:00.009+09:00

◎続いて　classとidについて勉強しましょう。

------------------------

【CSSの記述】　　　　　　　　　　　【タグへの記述】
div { ***** : *****; } 　　　　　　　なし
#***** { ***** : *****; } 　　　　　id="*****"
.***** { ***** : *****; }　　　　　　class="*****"

「id」は1ページ内で同じ名前を1回しか使用できない。
「class」は1ページ内で同じ名前を何度も使用できる。

<head>
<style type="text/css">
p.hot
{
color: red
}
.cool
{
color: blue
}
</style>
...

<p>通常の段落。</p>
<p class="hot">ホットな内容を赤い文字で示す段落。</p>
<p>通常の段落の一部でも<span class="cool">クールな内容は青。</span></p>

表示するとこうなります。
------------------------
通常の段落。

ホットな内容を赤い文字で示す段落。

通常の段落の一部でもクールな内容は青。

------------------------

ちなみに
同じidを同一文書の複数カ所に使うことはできません。
また、idの値はアルファベットで始めなければなりません。
（従ってid="1"という書き方は誤り）

.

CSS　ボックスの概念

2008-09-04T10:16:00.010+09:00

◎昨日、やりそこなったボックスです。

p
{
　　padding:10px 20px 30px 40px;
　　background:#eeeeee;
}

div {
　　padding:5px 20px;
　　background:#f6f6f6;
　　}

ボックスの余白において四方向のサイズを一括で指定します。値については、以下の表のようにその数によって指定する方向が決まります。

記入する値の数対象の方向
-----------------------------------------------------
1つ四方向（上/下/左/右）同じ
2つ鉛直と水平方向（上下/左右の順）
3つ上/左右/下の順
4つ右回り方向（上/右/下/左の順）

参考にするサイトはこちら

　　　　　　
.

今日の授業(9月4日)

2008-09-03T11:53:00.009+09:00

4時間目

昨日は時間を忘れるほどみなさん集中力を持っていて素敵でした。

◎昨日の復習をしましょう。

夕べのうちに皆さんにお知らせした方々、ありがとうございます。

今日の最初は特別ゲストが習得した知識についてプロジェクターを
使ってプレゼンします。

その後、昨日の続きを各自やりましょうね。
個別に
　こんなことができないのかな？
　こんなこと発見しちゃいました！
率先して手をあげてお知らせくださいね。

5時間目、6時間目

質問はいつでもどうぞ。
Web系　与太話でもしましょうかね。
「その話を聞きたい」「あれってどうやってるの？」など募集中！
と昨日言ったのにリクエストがなくて悲しいです・・・
お待ちしてますよ。

ということでCSS追加

授業内容はこちら

いよいよCSSに名前を付ける作戦です。
これがもっとも本格的かもね

授業内容はこちら

head内でのCSSの書き方

2008-09-03T11:41:00.006+09:00

さてさて　いよいよ本格的にCSSを書いてみましょう

headタグの中に以下のように書きます。
<head>
<style type=text/css">

</style>
</head>

セミコロン「；」で書くことにより複数の指定ができます。

具体的にはこんな感じ

h1 {
　　font-size:14px ;
　　color:red;
　　}

body {
　　　background-color:#ffdff9;
　　　}

注）これは表示上、全角スペースでインデントを表現しています。
　　コピペ禁止ですよ。

プロパティが一つであってもこのようにインデントを表現すると
メンテナンスがしやすくなります。

ボックスの概念

p {
　　padding:10px 20px 30px 40px;
　　background:#eeeeee;
　}

div {
　　padding:5px 20px;
　　background:#f6f6f6;
　　}

ボックスの余白において四方向のサイズを一括で指定します。値については、以下の表のようにその数によって指定する方向が決まります。

記入する値の数対象の方向
-----------------------------------------------------
1つ四方向（上/下/左/右）同じ
2つ鉛直と水平方向（上下/左右の順）
3つ上/左右/下の順
4つ右回り方向（上/右/下/左の順）

ほかはホームページ辞典を利用して随時説明します。

CSSの種類

2008-09-03T11:19:00.007+09:00

html内の標準表記はこれにしましょう

-----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>
</title>
</head>
<body>

</body>
</html>
-----------------
デスクトップの「home」→index.html

FONT設定

※ブラウザの種類（IE、Firefox）やバージョンによっては対応していない
　場合が多々あります。要注意！

◎書き方の例

font-family:serif

例
<p style="font-family:serif">こんにちは</p>

-------
フォントを指定する
font-family

serif 明朝体
sans-serif ゴシック体
cursive 草書体
fantasy ファンタジー体
monospace 等幅

-------
フォントの斜体を指定する
font-style

normal 通常表示
italic 斜体表示（イタリック体）
oblique 斜体表示

-------
スモールキャップ文字を指定する
font-varient

normal 通常の文字で表示
small-caps スモールキャップ文字で表示

-------
フォントの太さを指定する
font-weight

normal 普通（数値指定 = 400）
bold 太くなります。（数値指定 = 700）
bolder 相対的にフォント太くする。
lighter 相対的にフォントが細くする。
100～900 数値指定（100単位で指定）数値が大きい程、太いフォントとなります。

-------
フォントの文字の横幅を指定する
font-stretch

normal 標準の幅
wider 標準の幅よりも一段階広い幅
narrower 標準の幅よりも一段階狭い幅
ultra-condensed 最小の幅
extra-condensed ↓
condensed ↓
semi-condensed ↓
semi-expanded ↓
expanded ↓
extra-expanded ↓
ultra-expanded 最大の幅

-------
フォントのサイズを指定する
font-size

xx-small 非常に小さいサイズ（絶対指定）
x-small 小さいサイズ（絶対指定）
small やや小さいサイズ（絶対指定）
medium 普通サイズ（絶対指定）
large やや大きいサイズ（絶対指定）
x-large 大きいサイズ（絶対指定）
xx-large 非常に大きいサイズ（絶対指定）
smaller 親要素に対して小さくサイズ（相対指定）
larger 親要素に対して大きいサイズ（相対指定）
mm、cm、in、pt、pc、em、ex、px サイズ指定
% %指定

-------
フォントサイズの調整を指定する
font-size-adjust

数値第一候補のフォントの「小文字の x の高さ ÷ フォントサイズ」の値を指定する。
none フォントサイズを調整しません。

-------
フォントをシステムで使用しているものを指定する
font

caption キャプション・ラベルと同じフォント（中）
icon アイコンと同じフォント
menu メニューと同じフォント
message-box メッセージボックスと同じフォント
small-caption キャプション・ラベルと同じフォント（小）
status-bar ステータスバーと同じフォント

-------
ここではfont指定だけをとりあげました。

ほかはここを参考にして試してみましょう。

参考ページ

こっちのほうがよいかな？

2008-09-02T11:00:00.003+09:00

CSSとは何でしょう？

HTMLだけでは、ホームページのデザインを細かく指定することができません。
これからは、CSSを使ってホームページを作ることが推奨されています。

CSSは Cascading Style Sheet （カスケーディング・スタイルシート）の略で、
これを使うとホームページの見え方を細かく指定することができます。

CSSの書き方

CSSはHTMLのように簡単に書くことができます。↓を見てください。

p {
font-size : 12pt
}

これは、p要素のフォントサイズ（文字の大きさ）を１２ポイントに指定するCSSです。
p要素で囲まれたすべての部分の文字サイズが１２ポイントになります。

pと書いている部分をセレクタ font-sizeの部分をプロパティ（HTMLでいう属性の部分）
そして、12ptの部分を値（HTMLでいう属性値の部分）と言います。

プロパティ・値を複数指定したいときは、 ; （セミコロン）で区切って指定します。
下は、p要素のフォントサイズとフォントカラー（文字色）を指定してます。
ソースはみやすいように改行してあります。

p {
font-size : 12pt;
color : red
}

次にCSSの指定方法を説明します。一番簡単な指定方法は、
各要素の style属性に指定することでCSSが適応されます。

もう一つの指定方法は、head要素の中でCSSを宣言し、
body要素の中で適応されるというものです。style要素を使用します。

このときCSSのタイプを指定しておく必要があります。style要素の
type属性の属性値を text/css と指定しておきます。

みなさんのサイト＆ブログ

2008-09-02T10:59:00.004+09:00

こちらにみなさんのサイト&ブログをのせました。

下記情報に変更がある人は、グループメールにて変更の依頼をしてください。
（必須！）
--------------------------
川江さん

新たにWebページとブログを変更いたしました。
『猫も私もきまぐれ日記』

Webページ→http://profile.ameba.jp/eriko0313/

ブログ→http://ameblo.jp/eriko0313/

--------------------------
岩見さん

みなさんどんどんアップされているのでちょっとあせって
まだ作成中なのですが、公開させていただきます。

まだコンセプトが先行してるのみで、内容が伴ってませんが
これからどんどん手を加えていきたいと思っています。

マイホームページurl
↓↓↓
http://www.ewedding.com/sites/yoshiundergotraining

今週中には、第一段作成完了出来たらよいなと思っています。

--------------------------
藤江さん

前回作成したWebサイトは雇用能力開発機構の方々が見た場合、
少し問題があるかと思われたので作り直しました。

新アドレス
http://web05.mh5.mp7.jp/

--------------------------
大山さん

まだまだ未完成ですがＷｅｂサイト作りました。
マイペースに更新したいと思いますのでお手すきの時にでも遊びにきてみてください☆

http://ip.tosp.co.jp/i.asp?I=dorae_mon_

--------------------------
上田さん

私も凝ったものではございませんが、ブログとサイト作りました。

サイトは未完成ですが、とりあえず始めてみましたというような状態です。

今後よく勉強してよいものを作っていきたいです。

サイト　http://xrex.org/url/webwebweb/page1.html

ブログ http://flowchannel.jugem.jp/

--------------------------
池藤さん

なんとかWebサイトとBlogを開設しました。

『なんとか』等と言っていますが、言葉に見合った出来栄えではありません。

お時間の宜しいときに遊びに来て下さい。

ブログ
http://yaplog.jp/snow_drop1619/

Webサイト
http://ktmhp.com/hp/day-break

--------------------------
山口さん

なんとかブログを作ることが出来たのでご報告させて
いただきます。

わからないことがあれば聞いて、という優しい言葉を
頂いても、自分がなにがわからないのかすらわからない
状況からはじまったので（汗）もう本当になんとか完成した…
という状態です（苦笑）。

連日外出してしまって（遊びすぎました/汗）夜中にポチポチと
作業を進めるような状態だったのですが、実際にブログを作って
みて理解した事も多く、大変でしたが楽しかったです☆

ブログ→http://k4024c.blog64.fc2.com/

--------------------------
平井さん

何とか自分のWebサイトが人に見て頂けるくらい
までになりましたので、金田先生のご意見をお聞かせ
頂いて、修正後クラスメートにアドレスを送信しよう
と考えております。
平井Weページアドレス↓

http://ktmhp.com/hp/web815hirai/

--------------------------
宇佐美麗子さん

携帯へ転送設定の方、夜分遅くすいません。
自分の脳ミソ出しきって
やっとこさ、ブログを見せられる状態になったので、
お知らせいたします。

http://naluakua.blog64.fc2.com/
(携帯では、まだ見ないで下さい。)

--------------------------
大田さん

携帯に転送設定されている方、遅くに申し訳ございません。

HP（Webサイトですね）とBlogを作成しましたので、お時間ある時にご覧いただけると嬉しいです。

★HP→http://chocopie.kurushiunai.jp

★Blog→http://limelime39.blog.shinobi.jp/

--------------------------
和泉さん
前回オススメした方ではなく、"yaplog"というところで作ってみました。
結構簡単で分かりやすかったので、私でもなんとか作ることができました＾＾；
一応リンク張っておきます→http://www.yaplog.jp/

こちらが私のブログです→http://yaplog.jp/satukimei/

--------------------------
秋葉さん

お疲れ様です。ビジネス課の皆様、休養中かとおもいます。
金田先生からの課題のＨＰところどころ工事中ですが全体のデザイン等完成しましたので
アップします。デザインセンスやhtml,cssなどの記述がかなり見苦しいですが
どうぞお暇な方のぞいて見てください。コンテンツ等特に面白い箇所はないかもしれませんが、これから勉強して見栄えいいものを目指しますのでよろしくお願いします。

拙宅のサイトはこちらです↓
http://usagimaru.edo-jidai.com/

--------------------------
市川さん

このツールを使ってサイトを作ってみました。
作っていくうちに、どんどん欲が出てきて、
痒いところに手が届かないこの感じ。。。
自分の思いを実現できる技術、早く身につけたいと思いました。

お暇な時にのぞいてみてください
↓
http://ktmhp.com/hp/katuura/

--------------------------
川嶋さん

みなさんのＷｅｂサイトを見せて頂き、『工事中』ばかりで未完成ですが、Ｗｅｂサイトとｂｌｏｇが出来ました。
今後、勉強していく中で完成させていきたいと思います。
自分の趣味の域で作ってしまったので、見苦しい点も多いかと思いますが、ココがおかしい！！ｅｔｃのご意見ありましたら宜しくお願い致します。

Ｗｅｂサイト・・・http://ktmhp.com/hp/aco126/
ｂｌｏｇ・・・http://ameblo.jp/aco126/

--------------------------
布施さん

簡単ですがブログを作ってみました！
(サイトはちょっと怖くて出来ませんでした)

http://yaplog.jp/muki/

どんなこと？

すべてはこのために その１

Linuxコマンド

今日の授業（10月14日）

今日の授業（10月3日）

ロゴ作成 その３

今日の授業（10月2日）

ロゴ作成 その３のその２

今日の授業（10月1日）

ロゴ作成 その３

JavaScriptスペシャル

今日の授業（9月25日）

JavaScript その６

ロゴ作成 その２

Javascript その5

クライアントからの要望

今日の授業（9月18日スペシャル企画）

今日の授業（9月17日）

Javascript その４

今日の授業（9月16日）

Javascript その３

今日の授業（9月12日）

ロゴ作成 その１

今日の授業（9月10日）

CSSでレイアウト

きょうはどんなこと？（9月9日）

Javascript その２

本日の授業 9月8日編

Javascript その１

今日の授業（9月5日）

CSSの定義まとめ

教材データ

classとid

CSS ボックスの概念

今日の授業(9月4日)

head内でのCSSの書き方

CSSの種類

みなさんのサイト＆ブログ

すべてはこのために　その１

ロゴ作成　その３

ロゴ作成　その３のその２

ロゴ作成　その３

JavaScript　その６

ロゴ作成　その２

ロゴ作成　その１

本日の授業　9月8日編

CSS　ボックスの概念