Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
CSS
入門編
- トップページ
- CSS入門編 - CSSとは
CSSとは
みなさまどうもこんにちは。
初めましての方は初めまして、他の記事を読んで頂いた方はまたお会いできて大変嬉しゅうございます。
CSS入門編のコーナーへようこそいらっしゃいました。こちらでは初心者の方向けにCSSを色々解説していきたいと思います。
さて、解説の前に注意事項でございますが、CSS入門編ではHTMLの基本的な知識が必須になっています。
もしHTMLについてさっぱり分からない、という方がいらっしゃいましたらこちらの記事あたりからHTMLの基本的なところを一度勉強していただくか、HTML入門書かなんかを購入してざっと読んでみることをオススメします。
準備はよろしいでしょうか。
ではCSSの概要について学んでいきましょう。
CSSってなに？
CSS(しーえすえす)とはHTMLの装飾をするための仕様です。CSSの正式名称は『Cascading Style Sheets』(カスケーディングスタイルシート)といいます。
CSSを使用すると要素の大きさを変えたり、背景画像を指定できたりとHTMLに装飾を加えることができます。最近ではちょっとしたアニメーションなども実装することができるようになりました。
最初にCSSが登場したのは1996年頃です。この頃に基本的な文法などが確立されました。私の体感では実際に多くのウェブサイトにCSSが導入されたのが2000年頃かと思います。ADSLの普及と相まってウェブサイトのデータ容量の制限が緩くなり急にウェブサイトがおしゃれになった時期ですね。
その前のウェブサイトは基本的にHTMLのみで構成されているものが多く、CSSが組み込まれているウェブサイトはほんの一部という感じでした。
というのもこの時代はweb専門のエンジニアやプログラマーなどがまだほとんど存在していない時代で情報の広がりが非常に遅く、CSSの存在すら知らない方が多かったと思います。
時代が流れて、今はCSS3と呼ばれるCSSが最新のブラウザに実装されています。
CSSで何ができるの？
では実際にCSSを使用した要素を色々用意しましたので見たり触ったりしてみましょう。
まずは境界線をつけてみました。
ATフィールド展開中
続いて文字を大きくして色を変更してみましょう。
おっきいでしょ
文字に取り消し線を入れてみます。
取り消されちゃった
CSSではこんな装飾を加えることができます。
では続いて何かイベントが起こった場合の装飾を行ってみましょう。イベントとは閲覧者が起こしたアクションなどのことでCSSでは特定のアクションが起こった際にデザイン等を変更することが可能です。以下の要素にマウスのカーソルを当ててみてください。
マウスホバーで色変更
色が変更されましたでしょうか。このように特定のアクションに合わせてデザインを変更することができます。
続いて最新のCSS3で追加されたサンプルを触ってみましょう。
※インターネットエクスプローラー以外の最新のブラウザでご確認ください。
まず時間差で色を変更させてみます。以下にマウスのカーソルを当ててみてください。ふわっと色が変わるかと思います。
時間差で色が変わるぞい
では続いて回転させてみましょう。こちらもマウスカーソルを当ててみてください。
回るよー(´・ω・｀)
要素がくるくるしちゃってますね。こういうアニメーションも最新のCSSで実装できるようになりました。
（´-`）.｡oO（ちなみにスマホではマウスカーソルが存在しないので上記のマウスカーソル系のサンプルは動かねえっす……）
というわけでいかがだったでしょうか。以上がCSSの概要になります。面白そうだな、と思って頂ければ幸いです。では次の記事からは実際にCSSの文法を学んでいきたいと思います。
またお会いしましょう。
この記事は桜舞が執筆致しました。
著者が愛する小型哺乳類 |
桜舞 春人 Sakurama HarutoISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。 |
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
