第3話

伝わるためのデザインをする!うぇぶひこ最初の戦い、響きわたるCSS!

こんにちはCSSさん

HTMLでサンプルサイトを制作

村長の試練を無事に通過し、いよいよWEBデザイナーとしての資格を得たうぇぶひこ。
思い出あふれる故郷に別れを告げ、はじめて村の外へ足を踏み出そうとしていた。

それじゃあ母さん、行ってくるよ。

気をつけていくのよ。
困ったことがあればいつでも帰ってきなさい。

うぇぶひこは村から北東の方向にある「港町えくすぷろーら」を目指していた。

たくさんの商人や物流が行き交うため、リターンを得るための環境が整っており
歴代のWEBデザイナーたちが最初に拠点を築いてきた場所でもあった。

ん?なんだ?

ふぅ…どうしたものか…

ノートパソコンを見つめながら道に座り込んでいる男性。
左手にはモバイルルーターを持っており、何やら困っている様子だ。

なにかあったのですか?(なんかどこかで見たことがあるような顔だな)

あ、すみません。
実は、今日中にホームページのトップページが必要なのですが、
どうしても制作してくれるWEBデザイナーが見つからなく、困っているのです。

ちょっとその仕様書を見せてもらっても良いですか?
…なるほど、このくらいであればすぐに制作できますよ。
もしよければ僕が承りましょうか。

本当ですか!?
ぜひお願いいたします。

(…いよいよデビュー戦だな。)
おまかせください!

そう答えたうぇぶひこはおもむろにその場に座り込み、
母の編んでくれたMacBookとテキストエディタを取り出した。

うぇぶひこは激しくタイピングをし、HTMLを書き上げていく…!

同時にHTMLを日本語に置き換えてみた…!

サンプルサイトのキャプチャー1

情報をデザインするCSS

おお、ありがとうございます!
これだけでも十分なのですが、たとえば冒頭の商店名がある部分の背景を変更したり、
余白をとったりすることはできますか?

(驚いたな…まさか初戦からこれを使うことになるなんてね)
わかりました、ではこれでいかがでしょうか?

うぇぶひこは激しくタイピングをし、HTMLのheadへ一行追記した…!

同時に追記したHTMLを日本語に置き換えてみた…!

うぇぶひこは繊細なタッチで、CSSを書き上げていく…!

同時にCSSを日本語に置き換えてみた…!

サンプルサイトのキャプチャー2
WEB DESIGN BATTLE
HTMLで制作したホームページを装飾するには?

HTMLにも見た目を装飾するためのタグは用意されていますが、
テキストに意味を持たせるという本来の役割とは異なります。

そのため、HTMLで制作した中身に対して見た目を装飾するための専用の言語が登場しました。
それが、「CSS(Cascading Style Sheets / カスケーディングスタイルシート)」です。

CSSの基本的な書き方は以下のとおりです。

HTMLのタグがたくさんあるのと同様に、CSSにもさまざまなプロパティー名が用意されています。
今後、物語の中でそれぞれ徐々に解き明かされていきますので、少しずつ理解を深めていきましょう。

すごい、完璧です!!
いやぁ、本当に助かりました、ありがとうございます!
これは少ないですが、リターンです!

うぇぶひこ経由でふぁいんだー村に700リターンが振り込まれた。

こちらこそありがとうございました、
おかげさまで幸先の良いWEBデザイナー人生になりそうです。

無事に最初のホームページ制作を終えたうぇぶひこ。
決意を新たに港町を目指すのであった。
ゆけ、うぇぶひこ。
戦え、うぇぶひこ。

今回の補足

CSSのプロパティーについて

margin
(マージン)
HTML要素の外側の余白を指定。
padding
(パディング)
HTML要素の内側の余白を指定。
color
(カラー)
HTML要素の文字色を指定。
background
(バックグラウンド)
HTML要素の背景を指定。
text-align
(テキストアライン)
HTML要素の文字寄せを指定。
width
(ウィズ)
HTML要素の横幅を指定。

今回のまとめ

  • ホームページの内容を決めるためにHTMLがある
  • ホームページの見た目を決めるためにCSSがある
  • この2つを併用し制作をしていく

前後の冒険はこちら

中の人からのお知らせ