第52話 技術基礎完成
卓也さんの宿題「水野屋のウェブサイトを、Googleサイトを使わずに一から制作」。
小林先生に教わったHTMLでやってみた。ヘッダー、メニュー、コンテンツ、フッター……一通りの要素は揃ったのだが、どうしても無骨なデザインになってしまう。フォントを変えても、背景の色を変えても、Googleサイトのような洗練された見た目にならない。
「なぜだ……」
HTMLで挑戦したものの、デザインが全然違ってしまった。
僕は必死にいろいろ試してみた。フォントサイズを大きくしたり、小さくしたり。背景色を変えたり、文字色を変えたり。でもどんなに変更しても、Googleサイトのような綺麗で洗練されたデザインにはならない。
「くそー……一体何が悪いんだ」
もう一人では限界だ。嘆息をついて、僕は決心した。
「小林先生に聞いてみよう」
翌日の放課後、僕は情報教室を訪れた。
「先生、HTMLで一通り作ったんですが、どうしてもデザインがうまくいかないんです」
僕は事情を丁寧に説明した。今度は卓也さんのことも含めて。
「実は、和菓子屋さんのウェブサイトをGoogleサイトで作ったんですが、先輩に見せたら『各社サービスに乗っかってるだけじゃん。お前が作ったのはテキストと画像だけ』って言われてしまって……クソーって思ったんです」
小林先生はくすっと笑った。
「あはは、そりゃあ厳しいこと言われたね。でもまあ、正論でもあるからね。GoogleサイトやWordPressなんかは確かに便利だけど、細かいデザインの調整や独自性を出すには限界がある。プロのウェブデザイナーはみんな一からコードを書いてるよ」
小林先生は僕のノートPCを見ながら続けた。
「それで、今度は他のサービスを使わずに一から作ろうとしてるんだね？」
「はい。それでやってみたんですが……」
僕はノートPCの画面を小林先生に見せた。作りかけの水野屋ウェブサイトが表示されている。
小林先生は画面を見て「ははぁ」と頷いた。
「文字の大きさや色は変えられるんですが、レイアウトや間隔、全体の見た目がどうしても素人っぽくて無骨なデザインになってしまって……」
小林先生は僕の画面を見ながら頷いた。
「あー、なるほどね。HTMLだけじゃデザインは作れないからね。CSSの知識が必要だ」
小林先生は優しく説明してくれる。
「よし、CSSをやろう」
小林先生はキーボードを打ち始めた。
「CSSはCascading Style Sheetsの略で、HTMLの見た目を装飾する言語だ。例えば……」
「まずはHTMLで構造を作って、それにCSSでスタイルを適用するんだ。例えばこんなHTMLがあったとして……」
画面にコードが表示される。
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>水野屋</h1>
<p>伝統の和菓子をお楽しみください</p>
</body>
</html>
```
「このHTMLに対して、CSSでスタイルを指定すると……」
```css
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
text-align: center;
border-bottom: 2px solid #007bff;
}
```
「こういう風にHTMLの要素に対して、色、フォント、レイアウトを指定できるんだ。HTMLが骨組みなら、CSSは服を着せるようなものかな」
「なるほど！HTMLだけではデザイン部分はできなくてデザイン部分はCSSで記述する必要があるってことなんですね」
僕は自分なりに理解したことを言葉にしてみた。小林先生の説明を聞いているうちに、CSSの面白さに引き込まれていくのを感じた。これがあれば、本当にプロのようなウェブサイトが作れるかもしれない。
「家に帰って早速取り組んでみます！」
僕は情報教室を出て、急いで家に向かった。
午後6時、家に帰ると僕はすぐにCSSの学習に取りかかった。小林先生に教わったコードを打ち込み、少しずつ変更してはブラウザで確認する。さらにCSSを紹介しているWEBサイトにそって色々試す。
色が変わった、フォントが変わった、レイアウトが整った……その度に心が躍った。
午後11時を過ぎた頃、母が心配して部屋を覗きに来た。
「健太、夜中まで何してるの？」
「CSS……あ、お母さん。ちょっとウェブサイトのデザインを……」
「もう12時よ。明日も学校でしょう？」
「わかった。そろそろ寝るよ」
でも僕は止められなかった。CSS の魅力に完全に取り憑かれていた。
「これ、すごい面白い……！」
コードを一行変えるだけで、ブラウザの表示がガラッと変わる。まるで魔法みたいだ。
気がつくと、CSSの教材サイトを次々とクリアしていた。
深夜、ついに卓也さんの宿題「水野屋のウェブサイトの作り直し」が完成した。
トップページを開いて元のGoogleサイトと見比べる。ヘッダーの色、メニューの配置、文字のフォント、画像のサイズ……一つ一つ確認していく。
「完璧だ……本当に同じに見える」
「やった……！卓也さんを見返してやる！」
HTML構造とCSS装飾で、デザインも完璧に再現できた。興奮してファイルをZIPに圧縮し、LINEでデータファイルを送信する。
「山田さん、宿題完成しました！完璧に再現できました」
30分後、卓也さんからの返信が来た。
「全然駄目だね」
「は！？」
僕は画面を見つめたまま固まった。
