第1回 凝ったホームページを作ろう  2001.09.05
第2回 ダイナミックHTMLに挑戦   2001.09.12
第3回 ページを飾るプログラム    2001.09.19
第4回 くるくる変わる写真    2001.09.19






第1回 凝ったホームページを作ろう
2001.09.05
 いろいろ迷った末に今回講座名を「道場4」としました。

 実際には今年の講座では2回目なので「2」でよいわけですが、昨年実施した「1」や「2」とは、もちろん2001年版「1」とも内容的に異なるという意味で「4」としました。「新」とか「本家」とか銘打たなかったのは、当初から掲げてきた、「誰でも、かんたんに、自分のホームページが持てる!」の精神をはずしたくないからです。

 プロバイダ・サービスの充実や低価格・高性能ホームページ作成ソフトの登場で当初講師のめざした「個人ユーザのためのかんたんホームページ作成」は高嶺の花ではなくなりました。

 実際、でき映えにさえ文句をいわなければ、まったくのパソコン初心者でも、アッというまにホームページが作れてしまうご時世です。

 こんな時代に誰もが思うのは、「人と違う個性的な自分だけのページをつくりたい」、「もっと、きれいなホームページにしたい」ではないでしょうか?

 そんなわけで、今回脱HP初心者めざして「動的ホームページ」の王道、スタイルシートやJavaScript、その他の便利な(おもしろい)小技をやります。

 と言っても、先月の「エクセルらくらく計算」でやったように、勉強というより結果を出すことを優先(つまり「お遊び」)でいきます。

 HTML(ん、ん?)やダイナミックHTML(ん、ん?)を本格的に勉強したい方は(「誰もがホームページデザイナー」という時代にそんな人いるんかいな?)、例によって「裏のパソコン教室」の方へお回りください。


 え〜っ、第1回は、「ホームページ道場」の毎回恒例、「テーマを決めよう!」です。

 いつものことなんですが、これやると誰もが一番無難な「私の趣味」をテーマに選んじゃって、それはそれで作りやすいのですが全員似たようななページで全然おもしろくありません。



 そこで今回は「私の趣味」はテーマとして禁止。   (>_<)

以下から自分のテーマを選択してください。
  1. 「私の中学生時代」
     白黒でもよいから昔の写真を準備してください。
     卒業記念写真なんかがいいです。ひとりひとりの顔なんか本人以外わからないから・・・・・いろいろ思い出を書きつらねれば、うちうちでは盛り上がることウケアイ。

  2. 「もし私が〇〇だったら・・・・」
     「総理大臣だったら」とか、「猫だったら・・・」(漱石の「わがはいは猫である」等参考に)。自分のうちのペットになりかわって「ペット通信」してる人もいますよ。
     ペットの写真とか、動物の写真とか持って来てください。

  3. 私の「うまいもの十選」
     自分の得意な料理。好きな食べ物、お菓子等。
     お料理レシピとか完成料理の写真。みやげ物なら包装紙とかパンフレットを持って来てください。

  4. その他。「こんなアホなテーマ、誰もせんやろ」と言うのがあれば何でも。
     たとえば「町内スーパー安いもんめぐり」(主婦の方にはたまらんテーマだそうです。だれか作りませんか?)
 大事なことは、まずテーマを膨らませること。次にホームページに使う文章を考えます。

 毎回ここで大半の人がギブアップするので、今回テーマごとにまとめる内容を指示します。各項目について、100字程度で結構ですからオリジナル文をまとめてみましょう。


テーマ1:わたしの蛍雪時代(若い人にはわかるかなあ。先生、古い!!)
  • 学校名、卒業年度
  • 覚えておれば担任の先生の名前(フルネームはさけましょう)
  • 遠足の思い出
  • 体育祭の思い出
  • 文化祭の思い出
  • その他、楽しかったこと何でも(嫌なことは書かないのがたくさん書けるようになるコツです)
テーマ2:わがはいは〇〇である(ペットの視点から自分を見つめる)
いろいろパターンが考えられますので、これは1例です。
  • わたしのご主人紹介(プロフィール)
  • わたしのおうち(ペットの目線で自宅紹介)
  • ご主人の好きなこと
  • ご主人のお仕事
  • ご主人の家族
  • わたしとご主人の関係


テーマ3.わたしの「うまいもの十選」
  • 品名
  • (みやげ物であれば)値段、主に買うお店
    (お料理であれば)レシピ
  • わたしがこれを推薦する理由
   この内容を十回繰り返し。



テーマ4.・・・・

 これは自分で考えてちょうだい。



課題1)テーマを決めて、書こうと思う内容を短くまとめる。

 やってみるとわかりますが、テーマさえ決まれば文章はいくらでも書けます。

 文章はウィンドウズ付属の「メモ帳」に書いていきます。
 htmlとか拡張子とか、難しいこと考えずに、「メモ帳」はメモ帳として普通に文章をつくって、「メモ帳」として普通に保存しといてください。
 そして先生のことだから、どっかで「普通でない」ことやるんでしょ?

 あったり〜。それは後のお楽しみね。

 はあ〜あ、ヤッパシ(ため息)

課題2)ソースコード編集の練習

 今後の創作に必要になってくる基本操作のレッスンをします。
 まずは前回「ホームページ道場」でもやりました「ホームペー○作」レッスン。
 いつも言ってるように、「○作」は創作のことだって!
 決して「△作」のことじゃありません!!

 いつものことだけど、わざわざ断わるところがあやしい・・・・・
 まずはレッスン用ホームページを開いてください。
 こちら。

メニューの
   表示→ソース
と進んでください。

 このホームページのソースコード(HPの本体)が「メモ帳」に表示されます。下図参照。



メモ帳のメニューから
   ファイル→名前をつけて保存

 このファイルを自分の専用フォルダに、名前はそのままで「保存」します。

サンプルホームページを閉じます。


 専用フォルダに保存した方のファイルを、マイドキュメントからフォルダを開いてWクリックで開きます。

ファイルがブラウザ(インターネットエクスプローラ)で開きます。

このファイルをメモ帳でも開きます。

  IE画面で
  表示→ソース

ですね。これでメモ帳が開きます。

ベテランの方にはおなじみの「マルチウィンドウ」ですね。

ここで、「タイトル」と「本文」を自分のものに打ち変えてみましょう。

「メモ帳」で上書き保存、「ブラウザ」で更新ですよね。憶えていますか?

は〜い、ここまでは前回「道場」でもやりましたね。

次からが新しい。



課題3)かんたんなスタイルシートを使ってみる

まずはこちらのページ。

 ここでタイトルが波打ってない人は、ブラウザがスタイルシートに対応してないので、このレッスンはあきらめてください・・・

 わ、わっ、怒らない、怒らない。

 上のサンプルが無理な人はこちらを・・・・

 たぶん、どっちかでいけるはずです。

 課題2でやったように、ソースコードを出して自分のフォルダに保存して下さい。

 最初のサンプルはスタイルシートでタイトルの装飾をやってます。次のサンプルはマーキーです。スタイルシートがうまく機能しない方はこちらの課題をやってください。余力のある方は両方やってもらって結構ですよ。

 一からこれを自分で打とうとすると、やれスペルミスだ、全角/半角を間違えただの、たいへんなので例によって「手抜き・かんたんプログラミング」といきます。

 自分のオリジナル部分以外、ぜ〜んぶコピーでいいです、コピーで。

 むずかしいプログラムの文法なんかわざわざ憶えなくてもコピーでちゃ〜んと動くんだから、それでいいんです。

 どこからどこまでコピーしたらよいか、「おもしろページ」を見つけたらそれだけを見ぬく力があれば十分です。

      はあ〜、やっぱし最後はこれだ・・・・・

講師の「ホームページ○作教室」でした。


トップページへ