goo blog サービス終了のお知らせ 

作って遊ぼう&学校の応援

 最近JavaScriptを取得、学校支援の〈動く教材〉を作っています。

HTML・CSS・JavaScriptの取得をめざして〔CSS編〕

2025-05-06 12:36:46 | 教材の開発
 先日HTMLの教材をアップしてからかなり時間が経ちましたが、力不足からなかなかでき上りませんでした。どこまで掲載したらいいかも自信のない状況でした。「これだけ知ってれば何とかなる。」というところで落ち着きました。
 要は「わからないとき、どうやって調べるか!」これは私が0から出発してたどり着いたところですが、これにもハードルがあって、基本的なところがなければ到達できない領域です。これをクリアする内容です。

 では、学習頑張ってください。最後には添付資料付きのサイトを紹介します。一気にそこをご覧になるのも有効かと思います。

 全部で7ページありましたがいかがだったでしょうか。
 基本的な書式はHTMLで記入して、それを装飾するのがCSSという風に考えてホームページを作成します。

 添付ファイルも含めた学習のためのホームページを作っていますので、そこをご覧ください。
 次のURLか、その下の画像(バナー)をクリックするとそのサイトに飛びます。








一応、引っ越してみました。はてなブログへ

2025-04-19 11:35:37 | 作って遊ぼう教室

 はてなブログです。ブログ仕様の色々なところを試してみましたが、うまく機能しているようです。

 しばらくは両ブログを運用してみたいと思います。

 ちなみに閲覧者は0人です。ここからのスタートですね。

 17日に「やってみよう」と取り組みました。まず、はてなブログと決めました。やり方をスマホでスクリーンショットで写真にしました。次に、パソコンで移行に取り組みました。やり方通り順調に行きましたが、ほぼ1日以上かかりました。圧縮されたzipファイルができてダウンロードしました。次ははてなブログでIDとパスワードを取得して、乗り換えのやり方をスマホに記録して、パソコンで乗り換えを行いました。これも時間がかかりますがチャンとやってくれます。
 気を付けるところが2つあります。
① 向こうサイドの作業時間が数時間や1日以上かかるときがあります。待ち時間は勝手にやってくれますのでそのサイトを綴じても作業は進みます。gooblogもはてなグログも同じです。「終わったかな」とサイトを見て確かめます。私の場合、作業継続中を何回か見たあと終了していました。
② zipファイルをダウンロードするとダウンロードのホルダーに保存されます。はてなの場所それをそのまま使いますが、ファイルの種類を選択するところがって、どこでzipファイルを選択しないと作業が進みません。私の場合そこで1回つまずきました。

 作業が全部終わるまで1日かかったと思います。
 そこで、写真を移すか聞いてきますので「移す」を選択しました。4000枚ほどの数字が出てきて、1日目は188枚が移されました。2日目は2000ほどの写真が移っていました。3日目の今日はまだ完了していません。あちらのほうでgoobブログからはてなブログへの写真のコピー保存をセッセと無料でやってくれているようで頭が下がります。
 移ったはてなブログをHTMLで詳しく見てみると、今の段階の写真表示は、一つ一つgooブログの写真ホルダーから読み込んで表示させていますので、11月18日に削除されてしまうと写真が失われてなくなってしまう運命です。写真もしっかり移行しなければいけません。


 以上永々と書きましたが、引越やってみてください。スマホだけでも出来そうです。

新聞でつくる兜(かぶと)三種

2025-04-17 10:58:28 | 作って遊ぼう教室
 いよいよ5月5日「子どもの日」が近づいてきました。

 2021年に投稿した同じ表題の記事がいっぱい読まれているので、ここに再掲します。あの時の孫は、私と同じ背格好になり、この春に中学校に入学しました。その下の孫2号は小3です。時のたつのは早いですね〜。

以下再掲

 兜(かぶと)は子どもの日には欠かせないアイテムです。私の小学校二年生の孫が、3月のひな祭りが過ぎるとすぐFaceTimeで「おじいちゃん、かぶとの作り方を教えて~!」と連絡してきました。早速、その場で作ってみたところです。目を描いて「金魚になっちゃった!」と喜んで見せてくれました。兜を横から見ると”つの”が”ひれ”になって、金魚のように見えました。
 妹の保育園児はチューリップ組(4才)ですが、一人ひとり兜を教わりながら作れたそうです。誰にも作れそうですね。

 これが新聞で作った3種の兜です。(一般的な)兜、角(つの)兜、とんがり兜です。
 かぶるとこんな感じです。
 私の孫のように、作り方を教えてあげるのもいいですよ。

 では、作ってみましょう。

 新聞紙は2面で1枚になっているものを用意してください。その新聞の長い方の辺を“長辺”、短い方の辺を“短辺”と表現します。


 3種の兜は正方形の形から作ります。
 短辺を一辺とする正方形からは(一般的な)兜と角(つの)兜ができます。ということはこの2つはそれぞれ新聞1枚で作れるということですね。
 長辺を一辺とする正方形からはとんがり兜ができます。つまり新聞紙2枚で作れます。


 短辺を一辺とする正方形の作り方です。

 角(かど)の両端の短辺と長辺を合せると、写真のように短辺の長さを長辺側に移すことができます。

 重なっていない長方形のところを三角の方に折り曲げて三角の部分を開くと、短辺を一辺とする正方形になります。

 長辺を一辺とする正方形の作り方

 2面で1枚になっている新聞紙を3枚用意してください。そのうち2枚で長辺を一辺とする正方形を作ります。もう1枚は長辺の長さの比較に並べます。

 右側上の新聞を下にずらして長辺を一辺とした正方形を作ります。重なったところにノリを付けて接着します。


 これで正方形の新聞ができました。これから兜を作ります。

作り方

【(一般的な)兜】

 新聞の短辺を一辺とする正方形を用意します。

 三角に折ります。しっかり角を合せます。

 両角を直角の角に合せるように折ります。

 両方の折り下げた三角形の半分を折り上げます。

 次の写真のように折り曲げて、角(つの)を作ります。

 下の三角は2枚からできています。その上の一枚を写真のように折り上げます。

 さらに、両角を結ぶ線を折り目として折り上げます。

 下の三角を兜部分の隙間(すきま)に差し入れます。

 奥まで入れてください。
 (一般的な)兜の完成です。

【角(つの)兜】

 写真番号⑦までは【(一般的な)兜】と一緒です。その続きからです。

 次の写真の“線”は折り目です。

 折り目のように、少し斜め上に折り上げてください。

 
 左右の尖(とが)った角(かど)が角(つの)になるように、ちょっと下をハサミで切って、その下部分を折り曲げます。切れ目にノリを付けて、切れ目がきれいになるよう接着します。


 その後は、【(一般的な)兜】の作り方の写真番号⑩からと同じです。






 角(つの)兜の完成です。

 いかがですか。
 ちょっと角の部分が折れ曲がっていませんか?私の作ったものも新聞では柔らかすぎてフニャっとまがってしまいました。そこで次のように割り箸を角に入れてやるとピシッとカッコよくなります。

 最後の仕上げに、割り箸やストローのようなものを差し入れてください。


【とんがり兜】

 新聞紙の2面1枚の長辺を一辺とする正方形を用意してください。

 
 まず、三角に折ります。


 左右の角(かど)を、下の直角の角(かど)に合せるように折ります。


 左右の上側の辺を、中央線に合せるように、左右から折ります。


 写真のように、左右の下側の三角形を折り上げます。


 写真のように、折って小さな角を作ります。


 写真のように、下の2枚ある三角の上側1枚を折り上げます。


 両角を結んだ線を折り目として折り上げます。


 下の残った三角を兜部分の隙間(すきま)に入れていきます。

 奥まで入れて完成です。

再掲


 
 兜の完成です。

 作り方をまとめました。







この縮小の〔つくり方〕の写真をタップするとpdfファイルがダウンロードできます。


 読んでいただいた皆さんから、子どもたちに作ってやったり、一緒に作ったりと楽しむことができますね。
 わからないところは折紙で兜づくりの記事を参考にしてください。

兜(かぶと)づくり - 作って遊ぼう&社会に開かれた学校の応援

そこに新聞紙かチラシありませんか!ここに次のような三種の兜(かぶと)の作り方を紹介します。時間があれば作ってみませんか。〔パソコンページ〕5...

兜(かぶと)づくり - 作って遊ぼう&社会に開かれた学校の応援


 最後まで、読んでいただきありがとうございました。
 

HTML CSS JavaScript の習得をめざして〔HTML編〕

2025-04-01 11:11:56 | 教材の開発
 「私と一緒に〔動く教材〕をつくりませんかー」といってもなかなかそんな人がいないのが現実です。これからずーと続けて行くのですが、もしもそんな方がいたら第一歩としてほしいと学習教材を提供することにしました。
 動く教材を作れるにはHTML CSS JavaScriptの3つを習得する必要があります。HTMLはホームページをつくる基本的な言語です。これだけで基本的なホームページが作れます。私の3つのホームページはすべてこれです。 CSSはその画面をデザインする言語です。「見たい、魅力的なホームページ」にするためのものです。 JavaScriptはそれに動きをつけたり利用者の意図に合わせて機能させる言語です。
 ここではまずHTMLについて学習します。
 この中にサンプルプログラムを紹介していますが、ブログのシステム上利用はできません。最後に〔利用できるところ〕を紹介しますので、そちらを利用してください。ただし、パソコンで利用するには問題ありませんが、Androidのスマホで使うと◯〇〇〇.txtのテキストファイルの日本語が文字化けしてしまいます。何がそうさせるのか原因を探っているのですがわかりません。しばらくお待ち下さい。
4月2日追記
 原因は解明できませんでした。メモ帳に変わるようなアプリを入れたらいいという結論ですが、皆さんのスマホなので不可能です。申し訳ありませんが断念します。スミマセン!
4月3日追記
 上記の件解消しました。ご協力いただいたcametan_42さんにはお礼申し上げます。テキストファイルを保存する段階で間違っている事を教えていただきました。お陰さまで一つ賢くなりました。ありがとうございました。

 以上ですが、習得はいかがだったでしょうか。字が小さくて見えにくいようでしたら、タップして拡大してご覧ください。

 添付ファイルを利用できる他のホームページがありますので、そこをご覧ください。ぐっとわかり易くなります。下のURLかバナー(画)をクリックしてください。




〔再掲〕キッチンペーパーでひな人形を作ってみませんか。

2025-02-28 12:21:13 | 作って遊ぼう教室
 これは3年前の投稿ですが、時期が来ましたので再投稿します。
 キッチンペーパーアニマルというのは、おしぼりで作る人形があったんですが「キッチンペーパーと折紙でつくったら、簡単に子どもでもいっぱい作れる!」と思って考案したものです。
 良かったら作ってくださいね。

 もうすぐひな祭りですね。ひな人形は飾りましたか。わが家ではKPA(キッチンペーパーで作ったアニマル)をボディーにして色紙で着飾ったひな人形を作っています。
 皆さんも作ってみませんか!

 ここに作り方を紹介します。

 また別に詳しく説明したブログもあります。ここをタップすると見ることができます。

 小1の子どもたちが作りました。


キッチンペーパータオルで作る動物(キッチンペーパーアニマル) - 作って遊ぼう&学校の応援

[ハロウィンとクリスマス]バージョンのわんちゃんです。基本的なわんちゃんです。キッチンタオルでワンちゃん[犬]を作ってみました。体型はほんとうの犬と全く違いますが、...

goo blog

 これに、男雛には、束帯・烏帽子・笏を、女雛には、十二単・冠・檜扇を身に付けさせると“ひな人形”になります。

 そうやって作ったひな人形です。


作り方を紹介

 では作っていきましょう。










 次は、束帯などの衣装を作ります。

 タップで拡大図





タップで拡大

タップで拡大

 真っすぐに立たないときには、このように十二単の後ろを折ったりハサミで切ったりして調整してください。


作り方のプリント
 キッチンペーパーアニマル本体の作り方です。プリントをタップするとダウンロードできます。


 ひな人形の衣装などの作り方です。プリントをタップするとダウンロードできます。




 ご覧いただきありがとうございました。


元サイト《KPAひな人形の作り方》

〔ホームページ〕







OSZAR »