2024年3月8日 / 最終更新日 : 2024年3月8日 アシアル情報教育研究所 アシアル情報教育研究所ブログ タグを組み合わせて、構造を持つWebページを作ろう 〜HTMLのタグを使いわける〜 ページの「構造」 新聞でも、雑誌でも、Webページでも、誌面には情報をうまく伝えるための「構造」があります。 具体的には、記事のタイトル、記事の本文、記事の補足や脚注などです。 こうした構造があるおかげで、読者はすぐに「 […]
2024年3月7日 / 最終更新日 : 2024年3月7日 アシアル情報教育研究所 アシアル情報教育研究所ブログ 画像に効果をプラスしよう〜CSSによるフィルタ〜 画像にフィルターをかけて、効果を追加する 撮影してきた写真を、Webページに表示させてみたところ、「色味が思っていたのと違う」とか、「ページの演出意図に合わせて、色味を変えたい」ということがあります。たとえば、「セピア色 […]
2024年2月29日 / 最終更新日 : 2024年2月29日 アシアル情報教育研究所 アシアル情報教育研究所ブログ JavaScriptによるタートルグラフィックス(試作版) タートルグラフィックスとは タートルグラフィックスは、初心者にも理解しやすい、目で見えるフィードバックを提供する、プログラミングの教育用ツールです。画面上を動く「タートル」(亀)をカーソル代わりに使って、線や図形を描くこ […]
2024年2月29日 / 最終更新日 : 2024年2月29日 アシアル情報教育研究所 アシアル情報教育研究所ブログ JavaScriptによるアニメーション HTMLとJavaScript を使ったシンプルなアニメーションの例を紹介します。具体的には画面上でボールが跳ねるプログラムです。 サンプルアプリの動作:ボールが枠の中で跳ねるアニメ このプログラム […]
2024年2月26日 / 最終更新日 : 2024年2月26日 アシアル情報教育研究所 アシアル情報教育研究所ブログ CSSで画像をアニメーションさせてみよう(4) メトロノームのように画像を動かす CSSで静止画像をアニメーションさせる CSSを使うことで、静止した画像をアニメーション表示することができます。上下・左右に動かせるのはもちろん、回転させることもできます。 参考:CSSで画像をアニメーションさせてみよう […]
2024年2月14日 / 最終更新日 : 2024年2月14日 アシアル情報教育研究所 アシアル情報教育研究所ブログ 摩擦のシミュレーション コンピュータ上で運動をシミュレーションする コンピュータ上で、物体の運動をシミュレーションすることができます。 その際には、物理学の知識を厳密に適用しなくても、「それらしく」見せることができます。 実際のところ、コンピュ […]
2024年2月14日 / 最終更新日 : 2024年2月14日 アシアル情報教育研究所 アシアル情報教育研究所ブログ CSSでイベントを取り扱う 〜マウスオーバーの例〜 Webページで起きる「イベント」とその処理 Webブラウザを使って、Webページを表示しているとき、コンピュータはさまざまな「イベント」を処理しています。 イベントとは、クリックやマウスの移動のような、ユーザーのアクショ […]
2024年2月13日 / 最終更新日 : 2024年2月13日 アシアル情報教育研究所 アシアル情報教育研究所ブログ ボールの弾みをシミュレーションする ボールの弾み(跳ね返り)をシミュレーションする ボールを高いところから落とすと、徐々に加速しながら落ちていきます。そして地面に当たると跳ね返ります。 跳ね返ると、今度は上昇していきますが、徐々に減速して、あるタイミングで […]
2024年2月7日 / 最終更新日 : 2024年2月7日 アシアル情報教育研究所 アシアル情報教育研究所ブログ CSSで画像をアニメーションさせてみよう(3)動きの速度を変える 普段利用しているウェブサイトやSNSでは、目を引く視覚効果、滑らかなアニメーションがふんだんに用いられています。 CSSを使うと、静止画像を、簡単なアニメーションに仕立て上げることができます。 この記事では、CSSの設定 […]
2024年2月7日 / 最終更新日 : 2024年2月7日 アシアル情報教育研究所 アシアル情報教育研究所ブログ CSSで画像をアニメーションさせてみよう(2)平面の画像を立体的に回転させる 普段利用しているウェブサイトやSNSでは、目を引く視覚効果、滑らかなアニメーションがふんだんに用いられています。 CSSを使うと、静止画像から簡単なアニメーションを作ることができます。本格的なアニメーションではありません […]