CSS

スタイルシートって何?

「HTMLのことは何となく分かるけど、スタイルシートって一体何?」という方に向けて、スタイルシートの基本的なお話をしていきます。

スタイルシートは、「CSS」と呼ばれることもありますが、スタイルシートと同じ意味だと思っていただいて構いません。スタイルシートというのは、簡単に言うとページの「デザイン」をするためのプログラムです。HTMLがページの構成を表現するために作られたプログラムであるのに対して、スタイルシートはデザインを表現する役割があります。

スタイルシートは決して難しいものではありませんが、それ以前にHTMLの知識がないとチンプンカンプンになってしまうと思います。そのため、最初はHTMLから学んでいき、少しずつスタイルシートに触れていく良いと思います。

また、覚えやすさという意味だけでなく、本来あるべきHTMLの構造を守るという意味でもHTMLから覚えることが大切になります。というのもスタイルシートを覚えたての方がコーディングをすると、デザインのためにHTMLの構造を変えてしまうことがよくあるからです。あくまでもベースとなるのは、HTMLが正しい論理構造をもってコンテンツを表現していることです。HTMLが必ずベースにあって、スタイルシートはその「色付け」という関係は忘れないでくださいね。

スタイルシートは、基本的に「css」という拡張子のついたファイル内に書かれています。HTMLとは全く違う雰囲気のプログラムなので、人目で分かると思いますが、場合によってはHTMLファイルの中にスタイルシートが書かれているときもありますし、HTMLのタグの中に書かれているときもあります。

スタイルシートは1996年に「CSS1.0」からスタートし、年々、改良されていきました。現在では、「CSS3」にまでバーアップされ、動きのあるデザインやグラデーションなど、かなりの表現ができるようになっています。最新のスタイルシートを理解して自分でできるようになったら、きっと楽しくて仕方なくなってしまうと思います・笑。ぜひ、コトダマウェブで最後までマスターしてくださいね。

WordPressテーマ「MAG(TCD036)」

最近の記事

  1. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  2. CSS

    CSS|中央寄せが効かないときは・・・
  3. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  4. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  5. CSS

    要素の配置が簡単に決まるFlexboxの使い方
PAGE TOP