2024年3月8日 / 最終更新日 : 2024年3月8日 アシアル情報教育研究所 アシアル情報教育研究所ブログ タグを組み合わせて、構造を持つWebページを作ろう 〜HTMLのタグを使いわける〜 ページの「構造」 新聞でも、雑誌でも、Webページでも、誌面には情報をうまく伝えるための「構造」があります。 具体的には、記事のタイトル、記事の本文、記事の補足や脚注などです。 こうした構造があるおかげで、読者はすぐに「 […]
2024年3月7日 / 最終更新日 : 2024年3月7日 アシアル情報教育研究所 アシアル情報教育研究所ブログ 画像に効果をプラスしよう〜CSSによるフィルタ〜 画像にフィルターをかけて、効果を追加する 撮影してきた写真を、Webページに表示させてみたところ、「色味が思っていたのと違う」とか、「ページの演出意図に合わせて、色味を変えたい」ということがあります。たとえば、「セピア色 […]
2024年2月26日 / 最終更新日 : 2024年2月26日 アシアル情報教育研究所 アシアル情報教育研究所ブログ CSSで画像をアニメーションさせてみよう(4) メトロノームのように画像を動かす CSSで静止画像をアニメーションさせる CSSを使うことで、静止した画像をアニメーション表示することができます。上下・左右に動かせるのはもちろん、回転させることもできます。 参考：CSSで画像をアニメーションさせてみよう […]
2024年2月14日 / 最終更新日 : 2024年2月14日 アシアル情報教育研究所 アシアル情報教育研究所ブログ CSSでイベントを取り扱う 〜マウスオーバーの例〜 Webページで起きる「イベント」とその処理 Webブラウザを使って、Webページを表示しているとき、コンピュータはさまざまな「イベント」を処理しています。 イベントとは、クリックやマウスの移動のような、ユーザーのアクショ […]
2024年2月7日 / 最終更新日 : 2024年2月7日 アシアル情報教育研究所 アシアル情報教育研究所ブログ CSSで画像をアニメーションさせてみよう(3)動きの速度を変える 普段利用しているウェブサイトやSNSでは、目を引く視覚効果、滑らかなアニメーションがふんだんに用いられています。 CSSを使うと、静止画像を、簡単なアニメーションに仕立て上げることができます。 この記事では、CSSの設定 […]
2024年2月7日 / 最終更新日 : 2024年2月7日 アシアル情報教育研究所 アシアル情報教育研究所ブログ CSSで画像をアニメーションさせてみよう(2)平面の画像を立体的に回転させる 普段利用しているウェブサイトやSNSでは、目を引く視覚効果、滑らかなアニメーションがふんだんに用いられています。 CSSを使うと、静止画像から簡単なアニメーションを作ることができます。本格的なアニメーションではありません […]
2024年2月6日 / 最終更新日 : 2024年2月7日 アシアル情報教育研究所 アシアル情報教育研究所ブログ CSSで画像をアニメーションさせてみよう(1)キーフレームとは 普段利用しているウェブサイトやSNSでは、目を引く視覚効果、滑らかなアニメーションがふんだんに用いられています。 CSSを使うと、静止画像を、簡単なアニメーションに仕立て上げることができます。 この記事では、画像のサイズ […]
2023年8月10日 / 最終更新日 : 2023年8月10日 アシアル情報教育研究所 アシアル情報教育研究所ブログ 対比的な構図のWebページを作ろう（背景の左右に画像を配置する） ２つの事柄を、画面の左右に並べて表示させることで、劇的な対比を示すことができます。 Webページの背景の左右に画像を配置して、対比的に示す例を紹介します。 完成版をMonaca Educationにインポートする(要ログ […]
