「スタイルシートはどうやって書けばいいの」、「スタイルシートの便利な使い方を知りたい」と悩んでいませんか？

ここでは、スタイルシート（CSS）の書き方や便利な使い方を、初心者にも分かりやすく解説します。




スタイルシートの書き方を覚えることで、さらに見栄えの良いホームページを作ることができるようになります。

「スタイルシートの書き方は、これだけ覚えておけば 十分！」という内容でお伝えしますので、ぜひマスターしていきましょうね！

スタイルシート（CSS）とは

まず、スタイルシート（CSS）とは、「ホームページの見栄えを良くするための技術のこと」です。

通常は、ホームページを表示させるためには、「HTML」という言語を使いますよね。 しかし、HTMLには、「細かいデザインを行うことができない」というデメリットがあります。

そこで、「スタイルシート（CSS）」の登場です。

スタイルシートを使うことで、細かいデザインを行うことができるため、HTMLだけでホームページを作るよりも、もっとキレイで見栄えの良いホームページを作ることができるようになります。

スタイルシートはとても便利！

しかも、スタイルシートの便利なところは、スタイルシートのファイル（ .css ファイル）を１つ修正してあげることで、すべてのページに設定を反映させることができるということです。

たとえば、全ページの文字の大きさを少し大きくしたい場合や、全ページのリンクの色を青から赤に変えたい場合に、スタイルシートのファイル（ .css ファイル）を１つ修正するだけで、全ページに設定を反映させることができます。

このように、スタイルシートはとても便利で、しかも見栄えの良いホームページを作ることができるようになるので、ぜひ活用していきましょう！

スタイルシート（CSS）の書き方

それでは、スタイルシート（CSS）の基本的な書き方 からご説明します。
まずは、ここでお伝えすることをしっかりとマスターしましょう。

【スタイルシートの基本的な書き方】何を、どうしたい

スタイルシートの基本的な書き方は、「何を、どうしたい」という書き方です。
具体的には、下記のように記述します。

上記の「color: red;」という記述は、「文字の色を、赤くしたい」という意味です。

また、上記の「font-size: 20px;」という記述は、「文字の大きさを、20pxにしたい」という意味です。

このように、「何を、どうしたい」という書き方が、スタイルシートの基本的な書き方になります。

サンプルサイトを使って表示を確認してみよう！

それでは、サンプルサイトを使って、実際に表示の確認をしてみたいと思います。

スタイルシートのファイルを実際に変更して、表示がどのように変わるかを確認すると分かりやすいと思いますので、良かったら使ってみてくださいね。


たとえば、サンプルサイト のスタイルシートのファイル（style.css）のファイルの中に、下記のような記述があります。

これは、「td タグで囲まれたところは、文字の大きさを13px にして、行の高さを140% にする」という意味です。

実際に、style.css ファイルの上記の数字部分（たとえば、font-size:13px; を font-size:16px; にするなど）を、変更してみてください。

全ページの文字の大きさが、大きくなりますよ。


また、サンプルサイト のスタイルシートのファイル（style.css）に、下記のような記述があります。

これは、「a タグを使っているところは、文字の色を青色（0000FF）にして、下線を入れる」という意味です。

つまり、「リンクの個所は、文字の色を、青色＋下線にする」という意味ですね。

ためしに、style.css ファイルの上記の記述（たとえば、color:#0000FF; を color:pink; にするなど）を、変更してみてください。

全ページのリンクの色が、ピンク色になりますよ。

ホームページを作るなら、スタイルシートは必須

このように、スタイルシートの基本的な書き方は、「何を、どうしたい」という書き方です。

これだけ知っておけば、「この記述は何を示しているんだ？」と思ったら、その記述を検索すればほとんど分かると思いますよ。

あと、スタイルシートの便利なところは、スタイルシートのファイル（style.css）を修正すれば、全ページに設定が反映されるところです。

上記でお伝えしたとおり、style.css ファイルを修正すれば、全ページの文字の色や大きさなどを、変更することができますよね。

h1のタグも、style.css ファイルに記述をしておけば、style.css ファイルを修正するだけで、全ページの h1タグの個所（設定）を変更できるので、とても便利です。

ホームページを作るなら、スタイルシートのファイルを使うことは必須になります。

スタイルシート（CSS）を使う３つの方法

スタイルシートを使うには、３つの方法があります。
その方法とは、、、

という３つの方法です。

それぞれに特徴があるので、１つずつ詳しくご説明しますね。

１．スタイルシートのファイル（.css）を読み込んで使う方法

１つ目の方法である、「スタイルシートのファイル（.css）を読み込んで使う方法」とは、たとえば、サンプルサイト であれば、「style.css」というファイルを作成しています。

そして、HTMLファイルの中で、この style.css ファイルを読み込んでいる という形ですね。

具体的には、HTMLファイルのヘッダーの箇所に、下記の一行を書くことで、スタイルシートのファイル（style.css）を読み込むことができます。

この方法のメリットは、style.css ファイルを変更することで、全ページに設定が反映されるということです。

全部のページを１つずつ変更するのではなく、style.css ファイルを１つ修正すれば、全ページに設定が反映されるため、とてもラクです。

ちなみに、スタイルシートのファイル名は、「style.css」でなくても良いのですが、私は分かりやすいように、このようなファイル名にしています。

これが、スタイルシートを使う１つ目の方法になります。

２．HTMLファイルのヘッダー内に、styleタグを書く方法

２つ目の方法である、「HTMLファイルのヘッダー内に、styleタグを書く方法」とは、HTMLファイルのヘッダー内に、たとえば、下記のように記述する方法です。

上記のように、<style> タグで囲んだ個所に、スタイルシートの記述をするという形です。

この記述をHTMLファイルのヘッダー内に入れることで、そのページのみで設定が反映されるようになります。

ただ、この方法は、全部のHTMLファイルのヘッダーに上記のような記述を書いていかないといけないので、個人的には、「あまり使う機会がないんじゃないかな？」っと思っています。

１つ目の方法でお伝えした、「スタイルシートのファイル（.css）を読み込んで使う方法」の方が、よほど効率が良いですからね。

もちろん、運営するホームページによっては使うこともあるかもしれないため、参考程度に「このような方法もある」ということを、知っておいてくださいね。

３．HTMLファイルの本文内に、直接スタイルシートを書く方法

３つ目の方法である、「HTMLファイルの本文内に、直接スタイルシートを書く方法」とは、 HTMLファイルの本文内（bodyタグの中）に、たとえば、下記のように記述する方法です。

上記のように、<span>タグや <div>タグなどを使って、そのタグの中に、「style」と書いて、スタイルシートの記述をするという形ですね。

たとえば、上記の記述であれば、「文字を赤い太字にして、背景を黄色くする」という記述です。 具体的には、このような感じですね。

この方法の良いところは、ページ全体ではなく、「その個所だけでスタイルシートを使いたい」というときに、手軽に使うことができることです。

HTMLでは実現できない、細かいデザインをスタイルシートを使うことで実現できるようになるため、この方法も覚えておいてくださいね。

【まとめ】スタイルシート（CSS）を使う３つの方法

このように、スタイルシートを使う方法は３つの方法があります。

この中でも、必ず使う方法は、１つ目の「スタイルシートのファイル（.css）を読み込んで使う方法」です。

スタイルシートのファイルを１つ修正すれば、設定が全ページに反映されるので、とても便利な方法になります。

あとは、個別のページでスタイルシートを使いたい場合に、３つ目の「HTMLファイルの本文内に、直接スタイルシートを書く方法」を使うという形ですね。

普通にホームページを作る場合は、これだけ覚えておけば十分なので、ぜひここでお伝えしたことを覚えておくようにしましょう！

スタイルシート（CSS）の応用とテクニック

最後に、スタイルシート（CSS）の応用とテクニックをご紹介します。

スタイルシート（CSS）を使うと、次のようなことがホームページで実現できるので、参考としてお伝えしますね。

例1．ボタンの色を変えることができる

下記のボタンにマウスを合わせてみてください。
ボタンの色が変わりますよ。

ボタンの色が変わる


なお、このボタンは、HTMLファイルの本文内（bodyタグの中）に下記のソースを入れることで、実現することができます。

例2．文字が大きくなる

下記の文字にマウスを合わせてみてください。
文字が大きくなりますよ。

なお、この大きくなる文字は、HTMLファイルの本文内（bodyタグの中）に下記のソースを入れることで、実現することができます。

例3．カードが裏返る

下記のカードにマウスを合わせてみてください。
カードが裏返りますよ。

なお、この回転するカードは、HTMLファイルの本文内（bodyタグの中）に下記のソースを入れることで、実現することができます。

スタイルシートを使うことで、いろいろなことが実現できる

このように、スタイルシートを使うことで、HTMLでは実現できない、いろいろなことが実現できるようになります。

たとえば、上記でお伝えした「動きをのあるホームページ（アニメーション）」も実現できます。

ただ、上記のソースを見ると、少し難しいと思いませんか？

基本的には、「何を、どうしたい」という書き方なのですが、１つ１つの記述は難しく感じられると思います。

そのため、スタイルシートについては、このページでお伝えしている基本的なことを覚えたら、それでいいと思いますよ。

あとは、実現したいことがあれば、その実現できるソースをそのままコピペで使って、実現すれば良いだと思います。

プロの方以外は、１つ１つの記述をすべて覚える必要はまったくありませんし、やりたいことが実現できればそれで良いと思いますので、、、基本的なことだけをしっかりと覚えておくようにしましょうね。

【まとめ】ゼロから学ぶスタイルシートの基礎とデザイン

【CSS入門】ゼロから学ぶスタイルシートの基礎とデザインの内容は、いかがでしたでしょうか？



スタイルシートのことを勉強すると、「セレクタ」や「プロパティ」、「ID」や「class」など、難しい言葉がたくさん出てきます。

もちろん、WEBデザイナーとして、企業に勤務する場合は、これらの知識は必要かもしれません。

ただ、「個人事業者や小企業が、自社のホームページを作りたい」や、「ネット副業で収入を得るために、ホームページを作りたい」という目的であれば、このページでお伝えしたことだけを覚えておけば、全然十分だと思いますよ。

私も、このページでお伝えしていることくらいの知識しかありませんが、まったく不自由していませんし、問題なく、ホームページを運営することができているからです。


ホームページというのは、HTMLという言語を使って作るものですが、HTMLだけだと、どうしても細かいことができないのですよね。

そこで、スタイルシートを使えば、細かいデザインができるようになりますし、何よりも、スタイルシートのファイル（style.css）を１つ修正すれば、全ページに設定が反映されるというのは、とても便利です。

ホームページを運営するなら、このページでお伝えした「スタイルシート（CSS）の書き方」は、覚えておいて絶対に損はしないので、ぜひマスターしていきましょうね！

そして、効率よく、キレイで結果が出るホームページを運営していくようにしましょう！


なお、もし分からないことや「こんなことが実現したい」などがありましたら、下記ページから遠慮なくご相談くださいね。

・ホームページのトラブルと悩みを解決！あなたの仕事をお手伝いします

当サイトで使用しているサンプルサイトのデータを、無料でダウンロードできます。
サンプルサイトがあれば、さらにホームページの作り方が分かりやすくなりますよ。

⇒　当サイトで使用しているサンプルサイトの無料ダウンロードはこちら

高品質で、ホームページでとても使いやすい画像100枚を「特典」としてお渡ししています。 人物の画像素材は少ないため、とても貴重な画像素材です。

⇒　オフィスで働いている女性が笑顔で人差し指を立てている画像について

初心者がホームページを作れるようになり、ホームぺージ作成をビジネスに活用できる「オールインワン」の講座です。

⇒　初心者から始める！ホームページ作成ビジネス講座