まほうじゅ＋こぎん刺し
まほうじゅＰＬＡＺＡ、ご案内ブログなど、まほうじゅブログの詞
子供たちが駒に向かい 視界を広げ
火車（ひしゃ）や 勝利や 知恵までも つかもうとしている
「まほうじゅとは、おもちゃだよ。」と、ウソを言えない私、
見る間に学力が伸びるの気づいていた
部屋のオブジェが表す 「何か」
ボケかけのママの脳も揺さぶるらしい
互いにとって、気持ちいつも探る遊び
ちょっと、教室じゃ習えない「まほう術」
（Ｍｅｌｏｄｙ：久保田早紀「異邦人」）
＊＊＊＊＊＊
おうちではじめるプログラミング、
今回でひとまず最終回といたします。
カウンタープログラムの作成にのって、基本的な要領をやってみました。
最後に、プラスアルファで知っていると役立つ主な命令を羅列していきます。
興味のあるものを取り入れて、プログラミングに活用してもらえればと。
お好きなものを選んで食べてください、ということで、バイキングです。
ただし、まだ基礎的な出し物しか取り揃えてございません。
他に食材はネット上に山ほど転がっています。
＊HTMLタグ
<meta charset="utf-8">
<head>範囲に置く設定関係の単独タグです。表示文字タイプを指定します。
アップロードしてネットから使用した時に文字化けを起こしていたら
このタグを追加してみましょう。
<form name="form1"><input type="text" name="number" value="78"></form>
実行画面から入力できます。入力値をJavaScriptの変数に取り込み利用するには
c=document.form1.number.value；
フォームform1「の」インプット要素number「の」内容valueが変数cの内容になります。
入力、ボタンのクリックなどイベント実行、そのプログラム中で変数への設定があり
計算などに活用という手順で、入力値を処理に利用できます。
ここは<span style="color：red；">重要なポイント</span>です。
文章中の特定のスパン(部分）を加工するタグです。
タグは実は、少々のスタイル設定を直接書き込むこともできます。
例では<span style="color：red；">～</span>の範囲は赤い文字になります。
<img src="sea.jpg" width="400px" height="300px">
そこに画像を表示させる、という単独タグです。
サイズを指定すると、元の画像がタテヨコ比率が違う場合でも強制的に
指定サイズにするため、画像が歪むことがあります。タテまたはヨコだけサイズを指定すると
それを基準にタテヨコ比率を保って表示します。
＊ＣＳＳ設定（範囲内の文章に設定する）
font-weight：bold；
文章を太字にします。選択肢はboldの他にnormal（標準）または100刻みの数値指定。
400がnormal、700がboldに相当し上限は900です。
font-family：sans-serif；
書体をゴシック系にします。対して明朝体系のフォントにするには font-family：serif； 。
もっと細かく「MS－ゴシック」など有名な書体を用いる方法も、実はあります。
＊ＣＳＳ設定(範囲に設定する）
padding-left：10px；
文章の左側に範囲と同色で指定した量の余白を作ります。
範囲の幅自体がそれだけ増します。余白の付加はright、top、bottomにも可能です。
padding：10px；
範囲の四辺に余白を作ります。
範囲自体は幅が20px（左右の分）、高さが20px（上下の分）増します。
border：solid 1px rgb(100,20,50)；
範囲に枠線を作ります。線タイプ、サイズ設定、色指定を順不同で記述できます。
線タイプとして指定できるワードは
solid（直線）double（二重線）dotted（点線）dashed（破線）none（線なし）
border-bottom：solid 1px rgb(100,20,50)；
範囲の下辺に枠線をつけます。辺のどれかだけ枠線をつけることも可能です。
border-radius：50px；
範囲の角を丸めます。範囲の角を、指定値を半径とした扇形にします。
50pxの指定をタテ100px、ヨコ100pxの正方形の範囲に適用すると円になります。
visibility：hidden；
範囲を非表示にします。1部を覆うように1番上に（1番最後に）<div id="shield">
を作っておきながら、非表示にしておき、状況によって表示させ、案内を出す、
イベントがある部分を覆ってクリックを妨げるなどの使い道がありなす。
非表示の解除には visibility：visible；
＊JavaScript
if(flg==0){ ・・・ }
条件に合った時だけ｛ ｝の命令文を実行します。変数flgイコールゼロか、と
判別するには ダブルイコールにします。 flg=0 はflgの値をゼロにする意味
になってしまいます。
判別するには他に、flg>=0（flgはゼロ以上か） flg<=0（flgはゼロ以下か） など
があります。
if(flg==0){ ・・・ }
else if(flg==1){ ・・・ }
else if(flg==2){ ・・・ }
条件に行って違う命令文を実行させます。
count=0；while(count<100){ ・・・ }
条件countが100に達しない間、命令文を繰り返し実行します。
これだけ知っていれば、相当なプログラムが作れるでしょう。
ただ、不格好ながらも、の感は否めません。あくまでも超基礎。
よりスマートにプログラミング遊びをするコツはたくさんあります。
調べてみるとヒントになる検索ワード（HTMLタグ、ＣＳＳ設定、
JavaScript命令、その他）を紹介しましょう。
＊おすすめの検索ワード
inputタグ
<input type="text">だけは紹介しました。他に、実行画面から
入力するためのいろんなtypeが存在します。
tableタグ
整然とした表を用いた画面構成をしたい時にヒントになります。
<table>表範囲</table>
<tr>表の1行</tr>
<td>表の1セル</td> などの要素で表を構成できます。
aタグ
リンク動作を扱います。
<a href="gooogle.html">サイトへジャンプ</a>とリンク付き語句を作る他、
<a name="sec1">Section1</a>プログラム中のジャンプ先目印の設定、
<a href="#sec1">その１</a>ジャンプ先へのリンクを作る など。
display：inline；
範囲の表示上の扱い方を変えます。<div>は通常block設定です。その
ため普通に<div>を作り続けると右にスペースがあっても下へ作って
いきます。inline（行中要素）と扱いを変えると前の範囲の右に（スペー
スが許せば）作っていきます。他に設定語はnone、table-cell など。
for(i=0；i<100；i++)
判別変数設定語のwhileよりもスマートに行ける、繰り返し処理記述の
大定番の命令です。
autogo=setInterval(doing(),10000)；
endgo=clearInterval(autogo)；
setTimeout(endgo,100000)；
設定した間隔ごとに繰り返し処理を行う命令です。変数にする形式で
設定します。それを対象にしたclearIntervalで終了させられます。
setTimeoutは設定秒後に1回、命令を発動させられます。
例は doing()関数を10000秒ごとに実行します。命令名autugo。
endgoはclearInterval(autogo)でautogoを停止させる命令の定義です。
setTimeout（endgo）は100000秒後に発動します。
ただし、パソコンの1000秒は通常の1秒に相当します。
配列変数
背番号を付けた同名の変数グループを使うことで、効率よく処理する
プログラムが書けます。
GIMPで背景を透明に
表示しても動かしても、プログラムで扱うのは四角い範囲です。
しかし、キャラクタの画像を囲み外側を透明にするような描画ソフトの
使い方を知っていると、お好きなキャラクタを画面上で動かせるように
なります。
他にも、上を見ればきりがありません。
ＣＳＳを別ファイルに。JavaScriptを別ファイルに。ローカル変数。
オブジェクト。canvas。DOMツリー。ｊQuery・・・・・・。
求めればスキルアップのタネは膨大です。
思う存分、プログラミング遊びを楽しみください。
シリーズ「おうちではじめるプログラミング」として連載しています。
途中から読んでもわからない記事だと思うので
バックナンバーをご確認ください。1話から読むことをお勧めします。
テーマ別「プログラミング入門」
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
