北緯40゜の桃源郷から

ここに登場する農園は秋田市から車で約２０分ほど走った山の中にある小さな農場であります。これから始まる話は、農夫に成り立てのまったく素人同然の森のぽーと家庭菜園歴ウン十年を誇るおくちゃんとその息子であるやっちゃんとの３人が自分たちの理想とする農園を作らんがために悪戦苦闘する日々の様子を綴った物語であります。

太平山自然農園ＩＴ教室

目　次

最初に

標題に「農民必要なのはITだ」なんて馬鹿な副題をつけていますが、そんなことはまったくないのであろうと思います。そのように書いておけば、訪問者も「????なにかな？」と思ってくるかなと思っただけであります。だからあまり気にしないでください。

またIT教室なんて仰々しい名前をつけていますが、残念ながら私にはITを教えられるほどの力を持ち合わせていませんので、ここでは自分が学ぼうとしていることをまったく個人的なメモ変わりに書きとどめておこうと考えています。

近年は別にhtmlのタグを知らなくても、簡単に情報を発信することもできますし、もちろん収集もできるわけであります。

最近あらたに勉強しようとしているのはJavaScriptです。このスクリプトなら特別なものがなくてもブラウザーがあれば動作するわけですから、プログラミングの勉強をするにはお手軽で最適なものなのではないかと思うようになってきたのです。以前にも一度挑戦したのですが、文字が横にスクロールするとかといった例しかなくて、別に文字を横にスクロールさせなくてもいいやと思ってしまってやめた歴史があります。

またhtmlタグやCSS(Cascading Style Sheets)についても理解しているようで本当のところはかなり怪しいものがありますので、再学習のつもりで勉強していきたいと思います。このページはあくまでも自分のためのものでありますから、説明不足のところもたくさん出てくると思いますのでご容赦願います。

このページは当分の間完成いたしません。ですからページ目次もブランクのままになっています。なぜなら、現在私も勉強中なのであります。現在ごらんになっているページはHTML4とCSS 2.1で構成されています。これをHTML5とCSS 3およびJavaScriptを使用したものに大幅改造をしようとしております。そのためのお勉強のページとなるわけであります。

無農薬・無化学肥料の太平山農園先頭に戻るボタン

PHP

このたび必要に迫られて、PHPとMySQLを使用したアプリケーションを作成しなくてはならなくなった。PHPはスクリプト言語でありMySQLはデータベースであります。この２つ組み合わせて、自動車免許の学科問題試験の練習ソフトを作ろうということであります。

このアプリケーションは以前に作ったことがあり、実際に稼働していたのですが、自前のサーバーを構築して運用している時に、誤って消去してしまい。そのうちにレンタルサーバーに移動してしまい。そのソースもどこかにやってしまい。それきりになっていたのであります。

それを再び復活させようと思いついたのであります。当然以前のものよりは強力なものにしようとは思うのですが、もう何年も前のことなので、ほとんど忘れています。そこで今回は新たに学習する意味でも、ここにメモ的な解説を書くことによって自分の学習にも役立てようと思い立ったわけであります。

無農薬・無化学肥料の太平山農園先頭に戻るボタン

MySQL

何年かぶりのデータベースを弄るのですが、まずやらなければいけないのは、データの型の確認をしておこうと思っています。

データ型

無農薬・無化学肥料の太平山農園先頭に戻るボタン

html

ここではHTMLについては詳細を述べることは控えます。なぜならある程度のことは私自身が知っているからであります。ここでは私が知らなかったことを発見した場合に自分の学習のためにメモ書き程度に書いておこうと考えています。

要素

ある要素内に別の要素があるとき、内側の要素は外の要素の「子」と表現されます。さっきの例では、abbr は h1 要素の子要素で、またその h1 も div の子要素になります。逆に、div は h1 の「親」と表現されます。この「親子」という概念は CSS の基礎を構成し、また JavaScript で頻繁に使われるので、とても重要です。

dlタグ

tableタグじゃ駄目なんだろうかと思ったけど、tableタグよりちょっとだけ簡素化できるということかな

abbr要素

詳細な説明はWorld Wide Web Guideを参照してください。

書き方
      <p>Web標準化団体の<abbr title="World Wide Web Consoritum">W3C</abbr>…</p>
      <p>検索エンジン対策の<abbr title="Search Engine Optimization">SEO</abbr>…</p>
使用例

Web標準化団体のW3C…

検索エンジン対策のSEO…

無農薬・無化学肥料の太平山農園先頭に戻るボタン

html5

無農薬・無化学肥料の太平山農園先頭に戻るボタン

CSS(Cascading Style Sheets)

CSSだけでロールオーバー効果のあるボタンを作る

ネットサーフィンをしていると、思わぬ情報に出会うときがあります。以下の方法もネットサーフィンをやっていて偶然に見つけたものであります。CSSだけでロールオーバー効果のあるボタンを作る、ちょー簡単な方法・・・に書かれていたものですが、自身の勉強のために再度掲載しておくことにする。

このCSSを早速このサイトに書き込んだので、左側のメニューボタンがマウスをあてると透明になってまるでhover用のボタンを用意したような感じになった。これでかなりの手間が省けた。

a:hover img{
    opacity:0.8;
    filter:alpha(opacity=80);
    -ms-filter: "alpha( opacity=80 )";
}

これからのスタイルシートはこれまでまったく知らなかったものばかりなので、ちょっと調べてみることにした。

opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
display:block;

ここでいきなり[display:block;]などというCSSがでてきますが、こえはまったく個人的なことであります。以前からこれが気になっていたので、この際だから自分で理解できるようにきっちりと調査しておこうと思ったわけであります。これまで結構調査したのですが、いまいちわかってないな。

z-index

CSS3(Cascading Style Sheets, level 3)

JavaScriptいらず、CSS3で作るシンプル&クールな多段メニュー

CSS3を覚えるにはサンプルを真似して同じように作って見ることが重要だと思います。ここはまるっきりのコピーですが、どのような構造になっているのか検証しながら作成して見ることにします。


<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>
    <title>Hello, CSS3 Dropdown Menu!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="CSS3_Dropdown_Menu_test.css" rel="stylesheet" type="text/css" />
</head>
上記のHTMLだけであると、単なる普通の階層メニューにしか過ぎない。
無農薬・無化学肥料の太平山農園先頭に戻るボタン

JavaScript

DHTML（ダイナミックHTML）

Hellow World

どんなプログラムも最初はHellow Worldを表示させるところから。

    <html>>
    <head>
         <title>Hello World!!</title>
    </head>
    <body>
         <script type="text/javascript">
         <!--
         document.write("Hello World!!");
         // -->
         </script>
    </body>
    </html>
正しくは以下のように書くという説がある。 
     <html>>
     <head>
          <title>Hello World!!</title>
     </head>
     <body>
          <script type="text/javascript">
          <!--
          document.open();
          document.write("Hello World!!");
          document.close();
          // -->
          </script>

     </body>
     </html>
Hellow World実行結果
document.write("");
writeメソッドは、ドキュメントに文字列を書き出します。タグを書き出すこともできるので、例えばタグを書き出してページ上に画像を表示させたりすること可能です。 尚、ドキュメントの出力を開始したあと、document.close()で明示的にドキュメントの出力を終了しないと、書き出した文字列が表示されないことがあるので注意してください。 JavaScriptでは、大文字と小文字は区別しています。document.writeを Document.writeと大文字で記述すると、スクリプトエラーになります。

時刻を表示する

     <html>
     <head>
     <title>time</title>
     </head>
     <body>
          <script type="text/javascript">
             <!--
             dd = new Date();
             document.open();
             document.write(dd.toLocaleString());
             document.close();
             // -->
          </script>
     </body>
     </html>
date = new Date(...) (e3/N2)

1秒ごとに時刻を表示する

     <html>
     <head>
     <title>サンプル</title>
     <script type="text/javascript">
     <!--
     function jikoku() {
         dd = new Date();
         document.F1.T1.value = dd.toLocaleString();
         window.setTimeout("jikoku()", 1000);
     }
     // -->
     </script>
     </head>

     <body onload="jikoku()">
     <form name="F1" action="#">
     <input type="text" name="T1" size=50>
     </form>
     </body>
     </html>
無農薬・無化学肥料の太平山農園先頭に戻るボタン

jQuery

まずはjQueryについて学習していきたいと思います。JavaScript先に学習するのかjQueryなのかという問題がありますが、どちらも良くわかってないので、その順番はどうでも良いということに落ち着きました。jQueryはJavaScriptで構成されているのだから、当然JavaScriptを理解するのが先ではないかという正論も飛び出してきますが、そんなことを言ったら、HTML5は理解しているのか？CSSそのものも理解しているのかってことになりますので、もう最終的にこのページで目標に掲げていることがらを理解できればよしとするのであります。

jQueryをやっていれば、自然とJavaScriptを理解せざるを得ないようになるような気がします。すぐに結果が見えるようになるのはjQueryでありますから、jQuery試したり実装したりするうちにJavaScriptは理解できるようになると思います。

jQueryをgoogleのやつを利用する方法


<script src="https://www.google.com/jsapi"></script>
<script>




</script>
無農薬・無化学肥料の太平山農園先頭に戻るボタン

その他お役立ちリンク集

無農薬・無化学肥料の太平山農園先頭に戻るボタン
©2009 Crowner.Co.Ltd