この記事はSYSKEN Advent Calendar 2016 22日目の記事です。

みなさんどうも、あじゅです。

さて、今回はぼくがCSSについて知ったことを、そこはかとなく書き綴りたいと思います。

唐突ですが

先週の日曜日、ぼく含めシステム研究部の部員6名でHack U 2016 大阪大会に出場しました。（詳しいことは後々誰かが書くと思われるのでここでは省略させて頂きます）

そこで今回、ぼくが担当させてもらったのはデザインです。主なお仕事は、システム名のロゴや当日のプレゼンテーションで使用するスライド資料の制作などです。

そして重大なお仕事がもうひとつ。「CSSを使ってWebページをええ感じにする」ことです。

「いやでもでも、さっきからCSSばっか言っとるけど、そもそもCSSって何なん？」

ですよね。というわけで…

「CSS」とは何ぞや？

ぼくも今回触るのが初めてで、イマイチ何かよく分かっていなかった(正直今も怪しい)のですが、CSS(Cascading Style Sheets)とは、「Webページを構成するHTML(HyperText Markup Language)によって定義された要素に対して、『大きさや色などをどのようにするか』を指定することができるもの」らしいのです。つまり、CSSを使えば「エモい！！」「神ってる！！」と言わせてしまうようなWebページを作ることも可能！！みたいですね。

そのことを知ったぼくは、珍しく部室のPCでコーディングしていました。珍しい。何の知識もなかったぼくは、とりあえずCodepenでCSSを使ったWebページの制作に取りかかりました。

はじめてのCSS

初めに作ったのは「動画が削除されたときに表示されるページ」です。それがこちら。

なんだかそれっぽいですね。色んなサイトを参考に作ってみたのですが、案外短時間でもどうにかなるものです。

CSSを使うと…どうなる？

次に、大会で使う予定だったWebページを例に、CSSを使うことでどのように変わるか見てみましょう。

まず、WebページをCSSなしで表示するとこのようになります。

 

次に、CSSをさっきのHTMLと組み合わせると…

 

 

こんな風になります。随分と印象が変わりましたね。このように、CSSを使えばWebページの雰囲気をガラリと変えることだってできちゃいます。

ちなみに

さきほどCSSを適用したときにWebページがどう変化するか紹介する部分で「使う予定だった」と書きました。実はこのページは大会に出したシステムには使用していません。