ピクタグラミング© 2024 Yamato Kishita

1目次
0. ピクタグラミングについて••• p3

1. ピクトグラムの表示••• p5

2. ピクトグラムエリアを変化させる••• p73. 人型ピクトグラムを変化させる••• p94. ピクトグラムに線，円，文字を追加••• p12

5. HPML への CSS の適用••• p15

6. HPML への CSS の適用（id）••• p17

7. HPML への CSS の適用（class）••• p19

8. HPML と HTML を組み合わせる••• p21

9. 練習問題••• p23

10. オリジナルの作品制作••• p242

0. ピクタグラミングについて
概要
Web ページを作成するためには，プログラミング言語の他に HTML (HyperText Markup Language） というマークアップ言語と，CSS (Cascading Style Sheets） というスタイルシート言語が必要になります．HTML は Web ページの構造を作成するため，CSS は Web ページの見た目を整えるために使用します．ピクタグラミングは，ピクトグラムの作成を通じて HTML と CSS の記法について学習することができるアプリケーションです．
ピクタグラミングでは，HPML（Human Pictogram Markup Language）というピクトグラムを作成する
ための独自のマークアップ言語を定義しており，HPML を記述することで様々なピクトグラムを作成することができます．

ピクトグラムとはピクトグラムとは，「非常口」に代表されるグラフィックシンボルであり，図 0-1 が一例です．ピクト
グラムを使うことで，情報を視覚的に伝えることが可能です．「非常口」のピクトグラムに描かれている“人の形状をしたピクトグラム”は「人型ピクトグラム」と呼ばれます．

図 0-1. ピクトグラムの例（国土交通省ホームページより引用）
ピクトグラムは学校や商業施設，道路など，様々な場所で見ることができます．年齢や国籍などに関わらず，情報を伝えることができる手段として注目されています．

アクセス
ピクタグラミングは以下の URL からアクセスすることができます．
https://pictogramming.org/apps/pictagramming
コード例
これからピクタグラミングの練習を始めていきます．紹介するコード例は，以下のリンクからダウンロードすることができます．
https://drive.google.com/drive/folders/10rdcjirWfZmzHwPvrL7S9hAl0vaa7Y14?usp=sharing

3

画面説明
図 0-2 がピクタグラミングの画面，表 0-1 が画面の説明です．

図 0-2. ピクタグラミングのスクリーンショット
表 0-1. ピクタグラミングの画面説明
領域・ボタン説明
ピクトグラム表示領域 / コード記述領域 コード記述領域に記述した内容がピクトグラム表示領域に反映され，ピクトグラムを用いた作品を作ることができます．
コード記述支援ボタン領域
ボタンを押すことで，対応するコードがコード記述領域に入力されます．
作品名入力領域
作品名を入力することができます．
画像ダウンロードボタン
ピクトグラム表示領域に作成した作品を，画像にしてダウンロードすることができます．
コードダウンロードボタン
コード記述領域に記述したコードをダウンロードすることができます．
コードアップロードボタン
ダウンロードしたコードを，コード記述領域にアップロード
することができます．
URL 化ボタン
コード記述領域のコードと作品名入力領域の作品名を含んだ情報を URL にして，クリップボードにコピーします．
座標系表示ボタン
ピクトグラム表示領域に座標系を表示します．
さっそくピクタグラミングを始めてみましょう．

4

1. ピクトグラムの表示
タグとはHTML や HPML では，タグを組み合わせることで，様々なピクトグラムコンテンツを作成することができます．タグは以下のような形で記述します．
<タグ名 属性名="属性値"> タグのコンテンツ </タグ名>
開始タグ
内容
終了タグ
タグは開始タグ，内容，終了タグからなっており，内容の中にはさらにタグを書くこともできます．
また，開始タグの中には，属性というものを記述することができます．ピクタグラミングでタグについて学んでみましょう．
ピクタグラミングにアクセスすると，図 1-1 のような画面が表示されます．アクセスした時点でコード
記述領域コードが入力されており，ピクトグラム表示領域の中央に人型ピクトグラムが表示されています．

図 1-1. ピクタグラミング画面（初期状態）
コード記述領域には，「コード例 1」のコードが入力されています．

コード例 1（example-1.txt）<pa type="n" scale="1" background-color="#ffffff"><hp x="0" y="0" scale="1" body="0" lua="0" lla="0" rua="0" rla="0" lul="0"
lll="0" rul="0" rll="0" color="#222325" orientation="front"></hp></pa>
コード例 1 は pa タグと hp タグで構成されています．「type="n"」といった属性の記述が複数されていますが，いったん無視してください．pa タグは Pictogram Area（ピクトグラムエリア）を，hp
タグは Human Pictogram（人型ピクトグラム）を意味するタグです．

5ピクトグラムを表示するためには，まず pa タグを記述する必要があります．pa タグを記述すること
で，ピクトグラムを表示させるエリアを指定できます．そして，pa タグのコンテンツに hp タグを記述することで，人型ピクトグラムを表示させることができます．表 1-1 も参考にしてください．

タグセット
<pa>
<hp>

表 1-1. HPML タグセット
処理
Pictogram Area（ピクトグラムエリア）を設置する．
pa タグの中に記述することで，Human Pictogram（人型ピクトグラム）を表示する．

なお，このように pa タグの中に hp タグを記述したとき，pa タグを親要素，hp タグを子要素といいます．hp タグだけで人型ピクトグラムを表示させることはできず，pa タグが親要素である必要があります．
使用するタグや属性を変更，追加することで，ピクトグラムを変化させることができます．次の章で見ていきましょう．

6

2. ピクトグラムエリアを変化させる
1 章では，pa タグと hp タグについて見てきました．2 章では，ピクトグラムに背景を設置したいと思います．背景を設置するには pa タグの type 属性を変更させる必要があります．初期状態では「type="n"」と type 属性には"n"が指定されていますが，これはピクトグラムエリアのタイプをNormal（標準）にするという意味です．
"n"を，"p"や"a"，"i"，"s"，"sg"，"sr"，"rv"にすることもできます．これらは，ピクトグラ
ムエリアをそれぞれ，Prohibit（禁止），Attention（注意），Instruction（指示），Safety（安全），Safety Green（安全（緑）），Safety Red（安全（赤）），Reverse（反転）にするという意味
です．type 属性の値を"n"から"a"に変えてみましょう（「コード例 2」）．

コード例 2（example-2.txt）<pa type="a" scale="1" background-color="#ffffff"><hp x="0" y="0" scale="1" body="0" lua="0" lla="0" rua="0" rla="0" lul="0"
lll="0" rul="0" rll="0" color="#222325" orientation="front"></hp></pa>"n"を"a"に変えると，図 2-1 のように Attention（注意）のマークが表示されます．

図 2-1. ピクタグラミングの画面（コード例 2）
pa タグには，type 属性の他に，scale 属性と background-color 属性もあります．scale 属性はピクトグラムエリアの大きさを変更する属性，background-color 属性はピクトグラムエリアの背景
色を変更する属性です．自由に値を変化させてみましょう．

7

表 2-1 に pa タグの属性一覧を示します．
表 2-1. pa タグの属性一覧
処理

属性

とりうる値

type="arg1""n", "p", "a",
"i",
"s",
"sg",
"sr",
"rv"

scale="arg1"

正の数backgroundcolor="arg1"

色キーワード，16
進 数 文 字 列 ， RGB
関数など

ピクトグラムエリアのタイプを指定する．
それぞれ，Normal（標準），Prohibit（禁止 ） ， Attention （ 注 意 ） ， Instruction（指示），Safety（安全），Safety Green（ 安 全 （ 緑 ） ） ， Safety Red （ 安 全（赤）），Reverse（反転）に変更する．
ピクトグラムエリアの大きさを指定する．
arg1 に は 正 の 数 を 指 定 す る ． 幅
arg1×640px，高さ arg×640px の大きさとなる．
背 景 色 を 指 定 す る ． type 属 性 が "n" ，"p"，"a"，"i"，"s"のいずれかの場合のみ有効であり，"sg"，"sr"，"rv"の場合無効である．

初期
値
"n"

備考
図 2-2 を
参照

"1"

-

"#ff
ffff
"

下記「色
の指定方
法につい
て」を参
照

ピクトグラムエリアのタイプについて
pa タグの type 属性の値を変化させると，ピクトグラムエリアのタイプを変更させることができます．
図 2-2 に，ピクトグラムエリアのタイプ一覧を示します．

図 2-2. ピクトグラムエリアのタイプ一覧

色の指定方法について
HTML や CSS で色を指定する方法には，色キーワードや 16 進数文字列，RGB 関数などがあります．これはピクタグラミングにおいても同様です．

例えば，赤色を指定したい場合，色キーワードなら"red"と指定します．ですが，"red"は 16 進数文
字列や RGB 関数でも表現できます．16 進数文字列なら"#ff0000"，RGB 関数なら"rgb(255, 0, 0)"とすれば，色キーワードで"red"で指定したことと同じになります．
詳しくは，教科書や MDN のドキュメント（https://developer.mozilla.org/ja/docs/Web/CSS/CSS_col
ors/Applying_color）等を参照してください．

8

3. 人型ピクトグラムを変化させる
ここまでは，pa タグの属性を変化させることでピクトグラムエリアを変化させてきました．3 章では，
hp タグの属性を変化させることで人型ピクトグラムを変化させたいと思います．
hp タグには，位置や大きさ，身体や手足の角度，色，向きを変更する属性があります．hp タグの属性の値を変化させてみましょう（「コード例 3」）．

コード例 3（example-3.txt）<pa type="a" scale="1" background-color="#ffffff"><hp x="20" y="30" scale="0.6" body="60" lua="-120" lla="45" rua="45"
rla="90"
lul="20"
lll="-60"
rul="45"
rll="-60"
color="#222325"
orientation="front"></hp></pa>
すると，図 3-1 のようにピクトグラムが変化します．人型ピクトグラムが転んでいるかのようになりました．注意マークの中に転んだ人型ピクトグラムがいるため，転倒に注意するように伝えるピクトグ
ラムを表しています．

図 3-1. ピクタグラミングの画面（コード例 3）
x 属性と y 属性はそれぞれ水平方向，垂直方向の位置を指定する属性です．また，scale 属性は人型
ピクトグラムの大きさを指定する属性です．そして，body 属性，lua 属性，lla 属性，rua 属性，
rla 属性，lul 属性，lll 属性，rul 属性，rll 属性は，それぞれピクトグラムの体全体，左上腕，
左前腕，右上腕，右前腕，左大腿，左下腿，右大腿，右下腿の角度を指定する属性です．
表 3-1 に hp タグの属性一覧を示します．

9

属性x="arg1",
y="arg2"

とりうる値
数値

scale="arg1"

正の数

angle="arg1,
arg2, arg3,
arg4, arg5,
arg6, arg7,
arg8, arg9"

数値

body="arg1",
lua="arg2",
lla="arg3",
rua="arg4",
rla="arg5",
lul="arg6",
lll="arg7",
rul="arg8",
rll="arg9"
color="arg1"

数値

orientation="arg1""front"，または"side"

色キーワー
ド，16 進数文
字列，RGB 関
数など

表 3-1. hp タグの属性一覧
処理
x 属性は水平方向の位置を，y 属性は垂直方向の位置を指定する．なお，右方向，下方
向を正の方向とする．
大きさを指定する．縦横それぞれ arg1 倍にする．
身体の部位ごとの角度を指定する．arg1 から 順 に ， body （ 体 全 体 ） ， lua （ 左 上腕），lla（左前腕），rua（右上腕），rla（右前腕），lul（左大腿），lll（左下腿），rul（右大腿），rll（右下腿）の角度を変更する引数であり，arg 度だけ反時計回りに回転する．引数を全て指定しない場合，body, lua, lla, rua, rla,lul, lll, rul, rll の順に優先して指定される．身体部位の名称は，図 8 を参照．
身体の部位ごとの角度を指定する．angle
は複数の部位の角度をまとめて指定する属性であったが，これらは 1 つずつ角度を指定する属性である．angle と同様に，arg
度だけ反時計回りに回転する．angle で角度を指定している場合も，これらの属性で角度を指定した部位は，これらの属性の値で上書きされる．
塗りつぶす色を指定する．

人型ピクトグラムの向きを指定する．
"front"の場合は正面向きに，"side"の場合は横向きにする．

10

初期値
ともに"0"

"1"

備考
図
3-2
を参
照
-

全て"0"

図
3-3
を参
照

全て"0"

図
3-3
を参
照

pa タ グ のtype 属 性 が"n" ， "p" ，"a" の と き …
"#222325""i"，"sg"，"sr"，"rv"の と き …
"#eeedef""s" の と き …
"#009c64""front"

2 章
「色
の指
定方
法に
つい
て」
を参
照
-

ピクトグラムエリアの座標について
表 2 にあるように，hp タグに x 属性や y 属性を指定することで人型ピクトグラムの位置を指定することができます．ここで，ピクトグラムエリアの座標の考え方を示します．
ピクタグラミングでは，pa タグで表したピクトグラムエリアの上下左右の中心を x="0"，y="0"の地点とします．そして，ピクトグラムエリアの左右の端をそれぞれ x="-320"，x="320"の地点とし，上下の端をそれぞれ y="-320"，y="320"の地点とします．これは pa タグの scale 属性の値が変化しても変化しません．つまり，ピクトグラムエリアの大きさに関わらず，座標は同じです（例えば，pa タグの scale 属性の値が"1"でも"0.5"でも，ピクトグラムエリアの右上の点は x="320"，y="320"の地点となります）．図 3-2 に座標の考え方を図にしたものを示します．

図 3-2. ピクトグラムエリアの座標について（ピクトグラムエリアの大きさが変化しても，座標は同じ）
この座標の考え方は，hp タグに関わらず，次のセクションから出てくる HPML タグに関しても同様です．困ったときには，座標系表示ボタンを使用すると，座標系がわかりやすいです．

部位についてピクトグラムの部位の名称は図 3-3 の通りです．体全体が body です．その他は，1 文字目が L/R で左右（Left, Right）を，2 文字目が U/L で上下（Upper, Lower）を，3 文字目が A/L で手足（Arm, Leg）
を判断しています．例えば，rla は Right Lower Arm の略であり，右前腕を示しています．

lla

rla

lua

rua

lul

body
y
rul

lll

rll

図 3-3. 人型ピクトグラムの身体の部位の名称

11

4. ピクトグラムに線，楕円，円，文字を追加
HPML タグには，線や楕円，円，テキストを描画するための line タグや ellipse タグ，circle タグ，
text タグもあります．4 章では，line タグを用いて段差を作成してみましょう（「コード例 4」）．

コード例 4（example-4.txt）<pa type="a" scale="1" background-color="#ffffff"><hp x="20" y="30" scale="0.6" body="60" lua="-120" lla="45" rua="45" rla="90"
lul="20" lll="-60" rul="45" rll="-60" color="#222325" orientation="front"></hp><line x1="-160" y1="150" x2="80" y2="150" width="20" color="#222325"></line><line x1="80" y1="140" x2="80" y2="210" width="20" color="#222325"></line><line x1="80" y1="200" x2="160" y2="200" width="20" color="#222325"></line></pa>

3 つの line タグを加えることで，図 4-1 のように段差を表現でき，段差で転倒しないよう注意を促す
ピクトグラムを作成できます．

図 4-1. ピクタグラミングの画面（コード例 4）
コード例 4 では，pa タグの中に 3 つの line タグを加えましたが，line タグ以外のタグを pa タグの中に複数入れることも可能です．例えば，pa タグの中に hp タグを 2 つ加えると，人型ピクトグラム
が 2 体表示されます．
表 4-1 に HPML のタグセットを，表 4-2 から 4-5 に line タグ，ellipse タグ，circle タグ，text
タグの属性一覧を示します．

タグセット<line><ellipse><circle><text>

表 4-1. HPML タグセット
処理
pa タグの中に記述することで，線を描画する．
pa タグの中に記述することで，楕円を描画する．
pa タグの中に記述することで，円を描画する．
pa タグの中に記述することで，テキストを描画する．

12

属性
x1="arg1",
y1="arg2",
x2="arg3",
y2="arg4"

とりうる値
数値

width="arg1"
color="arg1"

正の数
色キーワー
ド，16 進数
文字列，
RGB 関数など

属性
x="arg1",
y="arg2"

とりうる値
数値

width="arg1",
height="arg2"
angle="arg1"
color="arg1"

属性x="arg1",
y="arg2"
r="arg1"
color="arg1"

表 4-2. line タグの属性一覧
処理
初期値
x="arg1" ， y="arg2" の 全て"0"点 か ら ， x="arg3" ，
y="arg4"の点にかけて線を描画する．
"20"
太さを指定する．
塗りつぶす色を指定する． pa タ グ の type 属 性 が"n" ， "p" ， "a" の と き …
"#222325""i"，"sg"，"sr"，"rv"のとき… "#eeedef""s"のとき… "#009c64"

表 4-3. ellipse タグの属性一覧
処理
初期値
x="arg1"，
ともに"0"
y="arg2"の点を楕円の中心とする．
正の数
それぞれ幅と半径 ともに"50"を指定する．
数値
回転する角度を指 "0"定する．
色 キ ー ワ ー 塗りつぶす色を指 pa タグの type 属性が"n"，ド，16 進数文 定する．
"p"，"a"のとき… "#222325"
字列，RGB 関数"i"，"sg"，"sr"，"rv"のとなど
き… "#eeedef""s"のとき… "#009c64"
表 4-4. circle タグの属性一覧
とりうる値
処理
初期値
数値
x="arg1"，
ともに"0"
y="arg2"の点を円の中心とする．
正の数
半径を指定する． "50"色キーワード， 塗りつぶす色を指 pa タグの type 属性が"n"，16 進数文字列， 定する．
"p"，"a"のとき… "#222325"
RGB 関数など"i"，"sg"，"sr"，"rv"のとき… "#eeedef""s"のとき… "#009c64"

13

備考
図 3-2
を参照

2
章
「色の
指定方
法につ
いて」
を参照

備考
図 3-2 を参照

2 章「色の
指定方法に
ついて」を
参照

備考
図 3-2 を参照
2 章「色の
指定方法に
ついて」を
参照

属性
x="arg1",
y="arg2"

color="arg1"

fontsize="arg1"
fontfamily="arg1"

表 4-5. text タグの属性一覧
とりうる値
処理
初期値
数値
x="arg1"，
ともに"0"
y="arg2"の点をテキスト描画の左下の点とする．
色 キ ー ワ ー 色を指定する．
pa タグの type 属性がド，16 進数文"n" ， "p" ， "a" の と字列，RGB 関
き… "#222325"
数など"i" ，"sg" ，"sr" ，"rv" の と き …
"#eeedef""s" の と き …
"#009c64"
正の数
フォントの大きさを "50"
指定する．
フォントファ フ ォ ン ト を 指 定 す "Hiragino Kaku
Gothic ProN"
ミリー
る．

備考
図 3-2 を参照

2 章「色の指定方法について」を参照

下 記 「 fontfamily 属性について」を参照font-family 属性について
font-family 属性には，"Arial"などのフォントの名称を指定することができます．詳細は MDN のドキュメント（https://developer.mozilla.org/ja/docs/Web/CSS/font-family）等を参照してください．

14

5. HPML への CSS の適用
今までは HPML の属性を用いてピクトグラムを作成してきました．ですが，ピクタグラミングでは HPMLに CSS を適用してピクトグラムを作成することもできます．
CSS を適用するには，以下のような記述をする必要があります．
セレクター {
プロパティ: プロパティ値;}

セレクターとは，どの HPML タグに対して，CSS を適用するか指定するものです．例えば，hp タグに対して CSS を適用したい場合，セレクターには hp が入ります．
プロパティとはスタイルの種類のことです．CSS には多くのプロパティがありますが，ピクタグラミン
グでは CSS の学習を短時間で行えるようにするため，HPML にのみ使用できるプロパティを用意しています．HPML のプロパティとプロパティ値は，HPML タグの属性名と属性値と同様で，処理も同様です．
なお，HPML の属性を用いても CSS を適用しても，できる処理は同じですが，両方記述した場合，HPMLの属性による指定が優先されます．なお，CSS は style タグの中に記述することで適用することができます．コード例 4 の pa タグと hp タグを CSS で書き換えてみます（「コード例 5」）．

コード例 5（example-5.txt）<pa type="a" scale="1" background-color="#ffffff"><hp x="20" y="30" scale="0.6" body="60" lua="-120" lla="45" rua="45" rla="90"
lul="20" lll="-60" rul="45" rll="-60" color="#222325" orientation="front"></hp><line x1="-160" y1="150" x2="80" y2="150" width="20" color="#222325"></line><line x1="80" y1="140" x2="80" y2="210" width="20" color="#222325"></line><line x1="80" y1="200" x2="160" y2="200" width="20" color="#222325"></line></pa><style>pa {type: a;scale: 1;
background-color: #ffffff;
}
hp {
x: 0;
y: 50;
scale: 0.6;
body: 60;
lua: -120;
lla: 45;
rua: 45;
rla: 90;
lul: 20;lll: -60;
rul: 45;
rll: -60;
color: #222325;
orientation: front;}</style>15図 5-1 のように，HPML の属性を CSS に書き換えても，図 4-1 と同じピクトグラムになります．

図 5-1. ピクタグラミングの画面（コード例 5）
hp タグの属性ではなく，CSS で書き換えることができました．

注意
hp タグの angle プロパティのみ，「angle: "60, -120, 45, 45, 90, 20, -60, 45, -60";」というように，プロパティ値をクォーテーションマークで囲う必要があります．

16

6. HPML への CSS の適用（id）
ここまでで，hp タグに対して CSS を適用することができました．次は line タグに対して CSS を適用しましょう．ですが，今までのコードを見てわかるように，line タグは 3 つ記述しており，それぞれ指定したい値が異なります．そこで，id 属性を使用します．
<タグ名 id="id の値"> タグの内容 </タグ名>
開始タグ
終了タグ
id 属性は，コード全体で一意である必要があります．つまり，複数のタグに対して，同じ id の値をつけることができないということです．
id 属性の値の前にハッシュ記号（#）をつけることで，CSS のセレクターとすることもできます．そのため，3 つの line タグにそれぞれ id 属性を指定し，line タグに対しても CSS を適用できます（「コード例 6」）．

コード例 6（example-6.txt）<pa><hp></hp><line
id="line-top"x1="-160"
color="#222325"></line><line
id="line-center"x1="80"color="#222325"></line><line id="line-bottom" x1="80"
color="#222325"></line></pa>

y1="150"x2="80"

y2="150"

width="20"

y1="140"x2="80"y2="210"width="20"

y1="200"

x2="160"

y2="200"

width="20"<style>pa {type: a;scale: 1;
background-color: #ffffff;}
hp {x: 20;
y: 30;
scale: 0.6;
body: 60;
lua: -120;
lla: 45;
rua: 45;
rla: 90;
lul: 20;lll: -60;
rul: 45;
rll: -60;
color: #222325;
orientation: front;}#line-top {x1: -160;
y1: 150;
x2: 80;y2: 150;
width: 20;
color: #222325;

17}#line-center {x1: 80;y1: 140;
x2: 80;y2: 210;width: 20;
color: #222325;}#line-bottom {x1: 80;y1: 200;
x2: 160;
y2: 200;
width: 20;
color: #222325;}</style>id 属性を使用したことで，図 6-1 のように 3 つの line タグに対して個別に CSS を適用できました．

図 6-1. ピクタグラミングの画面（コード例 6）
次の章では，id 属性とは違う属性を利用した CSS の適用について見ていきます．

18

7. HPML への CSS の適用（class）
6 章では，3 つの line タグに対して．個別に CSS を適用することができました．7 章では，3 つの line
タグ全てに対して CSS を適用することができる class 属性を使います．
<タグ名 class="class の値"> タグの内容 </タグ名>
開始タグ
終了タグ
id 属性は，コード全体で一意である必要がありましたが，class 属性は一意である必要がありません．
複数のタグに対して同じ class 属性の値をつけることで，一度に CSS を適用することが可能です．
class 属性の値の前にピリオド（.）をつけることで，CSS のセレクターとすることができます．人型
ピクトグラムの色と線の色をどちらも灰色に変更したくなったと仮定して，class 属性を使用して CSSを適用してみましょう（「コード例 7」）．

コード例 7（example-7.txt）<pa><hp class="gray"></hp><line id="line-top" class="gray"></line><line id="line-center" class="gray"></line><line id="line-bottom" class="gray"></line></pa><style>pa {type: a;scale: 1;
background-color: #ffffff;}
hp {x: 20;
y: 30;
scale: 0.6;
body: 60;
lua: -120;
lla: 45;
rua: 45;
rla: 90;
lul: 20;lll: -60;
rul: 45;
rll: -60;
color: #222325;
orientation: front;}#line-top {x1: -160;
y1: 150;
x2: 80;y2: 150;
width: 20;
color: #222325;}#line-center {x1: 80;y1: 140;
x2: 80;19

y2: 210;
width: 20;
color: #222325;}#line-bottom {x1: 80;y1: 200;
x2: 160;
y2: 200;
width: 20;
color: #222325;}.gray {
color: gray;}</style>すると，図 7-1 のように人型ピクトグラムと線の色を灰色にすることができます．

図 7-1. ピクタグラミングの画面（コード例 7）
複数の HPML タグに対して同じ CSS を適用したいとき，一つ一つ指定すると時間がかかってしまいます．
ですが，class 属性を利用することで，同じような記述を何度もする必要がなくなります．このように，CSS を使用する利点は，再利用性の高いコードを書くことができるということです．

20

8. HPML と HTML を組み合わせる
ここまでは HPML を用いて段差に注意を促すピクトグラムを作成してきましたが，ピクタグラミングでは，HPML を HTML と組み合わせることも可能です．
コード例 6 に見出しを意味する h1 タグを組み合わせてみましょう（「コード例 8」）．

コード例 8（example-8.txt）<h1>転倒に注意してください</h1><pa><hp></hp><line id="line-top"></line><line id="line-center"></line><line id="line-bottom"></line></pa><style>h1 {text-align: center;font-size: 50px;
margin: 0;}
pa {type: at;scale: 1;
background-color: #ffffff;}
hp {x: 20;
y: 30;
scale: 0.6;
body: 60;
lua: -120;
lla: 45;
rua: 45;
rla: 90;
lul: 20;lll: -60;
rul: 45;
rll: -60;
color: #222325;
orientation: front;}#line-top {x1: -160;
y1: 150;
x2: 80;y2: 150;
width: 20;
color: #222325;}#line-center {x1: 80;y1: 140;
x2: 80;y2: 210;width: 20;
color: #222325;

21}#line-bottom {x1: 80;y1: 200;
x2: 160;
y2: 200;
width: 20;
color: #222325;}</style>すると，図 8-1 のように，ピクトグラムに加えて，見出しのテキストが表示されます．

図 8-1. ピクタグラミングの画面（コード例 8）
HPML タグに，HTML タグを組み合わせることで，ピクトグラムを含んだコンテンツを容易に作成することができます．

22

9. 練習問題
ここまでで，一通りピクタグラミングの使い方を見てきました．次は，以下の練習問題に取り組んでみましょう．

練習問題 1
HPML タグの属性を使用して，図 9-1 のような，サッカーを禁止するピクトグラムを作成してください．

図 9-1. サッカー禁止のピクトグラム

練習問題 2HPML タグに CSS を適用して，図 9-2 のような，バトンパスのピクトグラムを作成してください．

図 9-2. バトンパスのピクトグラム

2310. オリジナルの作品制作
ここまで，ピクタグラミングの使い方を見てきました．HPML を用いることで，いろいろなピクトグラ
ムを作成することができるようになりました．また，HTML と組み合わせることで，ピクトグラムを含んだコンテンツを作成することもできます．図 10-1 のような作品を作ることも可能です．

図 10-1. ピクタグラミングの作品例（左：段差に注意するように伝えるコンテンツ，右：ピクトグラムの図鑑風コンテンツ）
ピクトグラムを使うと上手く情報を伝えることができそうなものはありますか？ピクタグラミングでピクトグラムを含んだオリジナルのコンテンツを作成してみましょう．

24