What is CSS? - Japanese Only

CSS(しーえすえす)とはHTMLの装飾をするための仕様です。CSSの正式名称は『Cascading Style Sheets』(カスケーディングスタイルシート)といいます。

CSSを使用すると要素の大きさを変えたり、背景画像を指定できたりとHTMLに装飾を加えることができます。最近ではちょっとしたアニメーションなども実装することができるようになりました。

最初にCSSが登場したのは1996年頃です。この頃に基本的な文法などが確立されました。私の体感では実際に多くのウェブサイトにCSSが導入されたのが2000年頃かと思います。ADSLの普及と相まってウェブサイトのデータ容量の制限が緩くなり急にウェブサイトがおしゃれになった時期ですね。

その前のウェブサイトは基本的にHTMLのみで構成されているものが多く、CSSが組み込まれているウェブサイトはほんの一部という感じでした。

というのもこの時代はweb専門のエンジニアやプログラマーなどがまだほとんど存在していない時代で情報の広がりが非常に遅く、CSSの存在すら知らない方が多かったと思います。

時代が流れて、今はCSS3と呼ばれるCSSが最新のブラウザに実装されています。

では実際にCSSを使用した要素を色々用意しましたので見たり触ったりしてみましょう。

まずは境界線をつけてみました。

ATフィールド展開中

続いて文字を大きくして色を変更してみましょう。

おっきいでしょ

文字に取り消し線を入れてみます。

取り消されちゃった

CSSではこんな装飾を加えることができます。

では続いて何かイベントが起こった場合の装飾を行ってみましょう。イベントとは閲覧者が起こしたアクションなどのことでCSSでは特定のアクションが起こった際にデザイン等を変更することが可能です。以下の要素にマウスのカーソルを当ててみてください。

マウスホバーで色変更

色が変更されましたでしょうか。このように特定のアクションに合わせてデザインを変更することができます。

続いて最新のCSS3で追加されたサンプルを触ってみましょう。
※インターネットエクスプローラー以外の最新のブラウザでご確認ください。

まず時間差で色を変更させてみます。以下にマウスのカーソルを当ててみてください。ふわっと色が変わるかと思います。

時間差で色が変わるぞい

では続いて回転させてみましょう。こちらもマウスカーソルを当ててみてください。

要素がくるくるしちゃってますね。こういうアニメーションも最新のCSSで実装できるようになりました。

（´-`）.｡oO（ちなみにスマホではマウスカーソルが存在しないので上記のマウスカーソル系のサンプルは動かねえっす……）