はじめての板芸 #8 ― コマンドで色をつける

2026.08.18 その他

「はじめての板芸 #7 ― コマンドでファイルを作る」の続きです。前回はコマンドでHTMLファイルを作り、ブラウザで文字を表示させました。今回はそのファイルをコマンドで上書きし、文字に色や大きさ、背景色をつけていきます。テキストエディタを開かずに見た目を変える体験です。

1. フォルダに移動する

コマンドプロンプト（ターミナル）を開き、前回と同じように「hangei-cli」フォルダに移動してください。

#3では、テキストエディタでstyle="color: #4a90d9;"と書き足しました。今回は同じ内容を、コマンド1行で書き込みます。前回のファイルを上書きする形になります。

次のコマンドを打って Enter を押す

echo ^<meta charset="UTF-8"^>^<h1 style="color: #4a90d9;"^>こんにちは^</h1^> > index.html

次のコマンドを打って Enter を押す

echo '<meta charset="UTF-8"><h1 style="color: #4a90d9;">こんにちは</h1>' > index.html

ブラウザで開き直してください（前回と同じ start index.html / open index.html、またはブラウザの再読み込み）。文字が青色に変わっていたら成功です。

ポイント

色に加えて、大きさも一緒に指定します。

次のコマンドを打って Enter を押す

echo ^<meta charset="UTF-8"^>^<h1 style="color: #4a90d9; font-size: 48px;"^>こんにちは^</h1^> > index.html

次のコマンドを打って Enter を押す

echo '<meta charset="UTF-8"><h1 style="color: #4a90d9; font-size: 48px;">こんにちは</h1>' > index.html

ブラウザで再読み込みすると、文字がさらに大きくなっているはずです。48pxの数字を変えると大きさが変わります。

最後に、背景色もつけた完成版を一気に書き込みます。

次のコマンドを打って Enter を押す

echo ^<meta charset="UTF-8"^>^<body style="background: #fffdf7;"^>^<h1 style="color: #4a90d9; font-size: 48px;"^>こんにちは^</h1^>^</body^> > index.html

次のコマンドを打って Enter を押す

echo '<meta charset="UTF-8"><body style="background: #fffdf7;"><h1 style="color: #4a90d9; font-size: 48px;">こんにちは</h1></body>' > index.html

ブラウザで再読み込みすると、背景が薄いクリーム色になり、文字が大きな青色で表示されます。

各部分の意味（#3の復習）

「こんにちは」の部分と色の番号を、自分の好きなものに変えてもう一度コマンドを打ってみてください。

色の番号の例

コマンドを打ち直すたびにファイルが上書きされるので、気に入る色が見つかるまで何度でも試せます。テキストエディタで開いて→書き換えて→保存して、という工程が、コマンド1行で完結します。

次の一歩

次回は、コマンドでSVGの図形を書き込んで絵を描きます。丸や四角を文字で打ち込むと、ブラウザにアイコンが現れます！
はじめての板芸 #9 ― コマンドで絵を描く →