![見出し画像](https://assets.st-note.com/production/uploads/images/139582072/rectangle_large_type_2_1dd29e17182231f3a984d77d49a9f45c.png?width=800)
[情報I]HTMLの実習にピクタグラミングを使ってみましょう.
高等学校必履修科目情報Iの「コミュニケーションと情報デザイン」では,Webコンテンツの制作を題材とした実習も想定されます.しかし,時数が限られているため,マークアップ言語HTMLやスタイルシート言語CSSの理解に加え,商用Webサイトの品質に匹敵するデザインの作成は困難です.そのため,短時間かつ簡易にWebコンテンツの制作が可能な学習環境が求められます.そこで,ピクトグラムの作成を題材とし,マークアップ言語HTMLやスタイルシート言語CSSの記法の学習できるアプリケーション「ピクタグラミング」を紹介します.
1.はじめにピクトグラミングのサイトにアクセスします.
https://pictogramming.org/
![](https://assets.st-note.com/img/1714888863565-XfKFjdR0AI.png?width=800)
2.ピクタグラミングの項目の「はじめる」ボタンを押します.
![](https://assets.st-note.com/img/1714889522185-vf9Ih6A746.png?width=800)
3.初期画面です.
![](https://assets.st-note.com/img/1714891647926-X0uKiKNaER.png?width=800)
4.とりあえずいくつかの属性値を変更してポーズをとってみましょう.
![](https://assets.st-note.com/img/1714891665583-EGSRE6AJzP.png?width=800)
5.HPML(Human Pictogram Markup Language)を使って,セーフティーマークや線,円,テキストも追加できます.HTMLのタグ集合も併用して使えます.
![](https://assets.st-note.com/img/1714890689879-45AYVAQIvc.png?width=800)
この記事が気に入ったらサポートをしてみませんか?