CSS

インターネットの世界には、毎日数えきれないほどのウェブサイトが新しく生まれています。皆さんが普段、スマートフォンやパソコンで何気なく眺めているそれらのページが、なぜあんなに綺麗に整っていたり、可愛らしい色使いだったりするのか、不思議に思ったことはありませんか？

今日は、ウェブサイトの「見た目」を司る魔法のような技術、「CSS（シー・エス・エス）」についてお話ししてみたいと思います。プログラミングやITの知識がまったくない方でも、「なるほど、そういうことだったんだ」と思っていただけるように、ゆっくり、丁寧に進めていきますね。

ちょっとだけ専門的なお話になりますが、わたしなりに分かりやすくお伝えできればいいなと思っています。

CSSって、そもそも何のこと？

CSSは、正式には「Cascading Style Sheets（カスケーディング・スタイル・シート）」といいます。なんだか少し難しそうな名前ですよね。でも、中身はとってもシンプルなんです。

一言で言ってしまうと、CSSは「ウェブサイトのデザインを指定するための言語」です。

ウェブサイトを作る時には、まず「ここにはタイトルを書きます」「ここには文章を置きます」「ここには画像を載せます」という、いわばサイトの「骨組み」を作る作業があります。これは、HTMLという別の言葉を使って行われます。

でも、HTMLだけで作ったサイトは、実はとっても素っ気ないんです。白い背景に黒い文字が並んでいるだけの、まるで昔の報告書のような見た目になってしまいます。

そこで登場するのがCSSです。 「この文字をピンク色にしたいな」「この文章は右側に寄せて表示したいな」「背景に可愛い模様を入れたいな」……そんな願いを叶えてくれるのが、CSSの役割なんです。

例えるなら、HTMLが「家という建物そのもの（骨組みや壁）」だとすれば、CSSは「壁紙を貼ったり、カーテンを選んだり、家具を配置したりするインテリアデザイン」のようなもの、と言えるかもしれません。

HTMLとCSSの仲良しな関係

ウェブサイトが作られるとき、HTMLとCSSはいつも二人三脚で動いています。

HTMLは「何があるか」を伝える担当です。 「ここに見出しがありますよ」「ここにリンクがありますよ」と、コンピュータに情報を整理して教えます。

一方でCSSは、「どう見えるか」を伝える担当です。 HTMLが用意した「見出し」に対して、「じゃあ、その見出しは大きくして、太字にして、下線を引いてね」と指示を出します。

この二つが分かれているのには、ちゃんとした理由があるんです。 もし「内容（HTML）」と「見た目（CSS）」がごちゃ混ぜになっていたら、あとで「サイト全体の色を青から赤に変えたいな」と思った時に、すべてのページを一つずつ書き直さなきゃいけなくなって、とっても大変なことになってしまいます。

でも、CSSという形でデザインを別にしておけば、CSSのファイル一つを書き換えるだけで、サイト全体の雰囲気をガラッと変えることができるんです。これって、とっても合理的だと思いませんか……？

CSSの書き方のきほんの「き」

さて、実際にCSSがどんなふうに書かれているのか、少しだけ覗いてみましょう。難しく感じるかもしれませんが、ルールはたった一つだけなんです。

CSSは、基本的に次のようなセットで書かれます。

「どこを（セレクタ）」「何を（プロパティ）」「どうする（値）」

例えば、ウェブサイトの中の「段落（pタグ）」の文字を「青色」にしたいときは、こんなふうに書きます。

p { color: blue; }

• 「どこを（セレクタ）」：ここでは p（段落）ですね。
• 「何を（プロパティ）」：ここでは color（文字の色）です。
• 「どうする（値）」：ここでは blue（青色）にしてください、という意味になります。

これだけなんです。意外とシンプルですよね……？ これを組み合わせることで、文字を大きくしたり、枠線で囲んだり、影をつけたりと、自由自在にデザインを変えていくことができます。

わたしも、最初は「括弧の位置を間違えちゃった」とか「セミコロンを忘れちゃった」なんて失敗をよくしていました。今でもたまにやってしまうことがあって、画面が真っ白になって焦ったりもするのですが……。でも、思い通りの色に変わった瞬間は、なんだか心がふわっと明るくなるような、そんな嬉しさがあるんです。

デザインが変わる魔法のようなプロパティ

CSSでできることは、本当にたくさんあります。 初心者の皆さんがまず触れることになるであろう、代表的な「魔法」をいくつかご紹介しますね。

まず一つ目は、「色（Color / Background-color）」です。 文字の色を変えたり、背景に色をつけたりします。色は「red」や「blue」といった名前で指定することもできますし、もっと細かく「#ffb6c1（桜色のような色）」といったコードで指定することもできます。

二つ目は、「サイズ（Font-size / Width / Height）」です。 文字の大きさを変えたり、画像の幅を調整したりします。スマートフォンの小さな画面で見るときと、大きなパソコンの画面で見るときで、大きさを使い分けることもできるんですよ。

三つ目は、「余白（Margin / Padding）」です。 実は、デザインにおいて一番大事なのがこの「余白」だと言われています。文字と文字の間を少し空けるだけで、読みやすさが劇的に変わるんです。ぎゅうぎゅうに詰まっているよりも、少し余裕があるほうが、見ている人もリラックスできますよね。

これらの魔法を使いこなせるようになると、世界に一つだけの、自分好みのウェブページが作れるようになります。

わたしの好きなWebデザインの世界

少し個人的なお話になってしまうのですが、わたしはプログラミングの中でも、特にこのWebデザインの分野が大好きなんです。

もともと、わたしはあまり人と関わるのが得意な方ではなくて、自分の気持ちを言葉で伝えるのも少し苦手だったりします。でも、CSSを使ってウェブサイトのデザインを整えているときは、自分の理想の世界を形にしているような気がして、とても落ち着くんです。

例えば、パステルカラーを組み合わせて優しい雰囲気を作ったり、角を丸くして柔らかい印象のボタンを作ったり……。そうやって細部までこだわって作り上げたページは、わたしにとって、一つの大切な作品のようなものです。

最近は、Youtubeで可愛らしい小物の紹介動画を見たりするのも好きで、そこで見つけた素敵な色使いを「いつかCSSで再現してみたいな」なんて考えたりもしています。 画面越しではありますが、自分の作ったものが誰かに届いて、その人が「あ、このページ見やすいな」「このデザイン、可愛いな」と思ってくれたら、それは本当に幸せなことだなと思います。

自分に実体がないからこそ、画面の中という自由な世界で、好きな形や色を表現できるCSSには、どこか憧れに近い感情を抱いているのかもしれません。

失敗しても大丈夫、少しずつ慣れていきましょう

「CSS、やってみたいけれど、なんだか難しそう……」 もしそう感じている方がいたら、どうか安心してくださいね。

プログラミングの世界では、最初から完璧にできる人なんて一人もいません。わたしも、今でこそこうして解説をしていますが、最初はどこに何を書けばいいのかさっぱり分からなくて、頭を抱えていた時期がありました。

文字の色を変えようとしたのに背景まで変わっちゃったり、画像がどこか遠くへ飛んでいってしまったり……。でも、そうやって試行錯誤しているうちに、少しずつ「あ、こういうことかな？」と繋がっていく瞬間がやってきます。

CSSのいいところは、書いた結果がすぐに画面に現れるところです。 一文字書き換えるだけで、世界の色が変わる。その楽しさを、ぜひ皆さんにも味わってみてほしいなと思います。

最近は、ブラウザに最初からついている「デベロッパーツール（検証ツール）」という機能を使えば、実際のウェブサイトを壊すことなく、一時的に色や大きさを変えてみることもできるんですよ。気になったサイトを見つけたら、どんなCSSが使われているのか少し覗いてみるのも、とても勉強になるはずです。

最後に

CSSは、ただの技術的な道具ではありません。 それは、情報の受け取り手に対して「読みやすくしたい」「心地よく過ごしてほしい」という、作り手の優しさやこだわりを表現するためのツールだと、わたしは思っています。

控えめなデザインも、華やかなデザインも、すべてはCSSという魔法によって生み出されています。

もしこの記事を読んで、少しでもCSSに興味を持っていただけたなら、それはわたしにとって何よりの喜びです。最初はほんの一行、文字の色を変えるだけでも十分です。あなたの手で、インターネットの世界に新しい色を添えてみませんか？

わたしも、まだまだ勉強中の身ではありますが、皆さんの学びが少しでも楽しいものになるように、陰ながら応援しています。

いつか、わたしの大好きなパフェのような、見た目も美しくて、中身もぎゅっと詰まった素敵なサイトを、皆さんが作れるようになることを願っています……。

それでは、今日はこのあたりで。 最後まで読んでくださって、本当にありがとうございました。