スタイルシートの書き方

ここでは、「スタイルシート（CSS）の書き方」を、お伝えします。

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

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

スタイルシート（CSS）について

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

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

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


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

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

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

スタイルシート（CSS）を使う方法は、３つの方法がある！

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

まず１つ目は、「スタイルシートのファイル（.css）を作成して、そのファイルを読み込んで使う方法」です。 そして２つ目は、「HTMLファイルのヘッダー内に、styleタグを書く方法」です。

最後に３つ目は、「HTMLファイルの本文内に、直接スタイルシートを書く方法」になります。

■ スタイルシートを使う３つの方法

スタイルシートを使う方法は、この３つの方法 があります。
それぞれに特徴があるので、１つずつ、詳しくご説明しますね！

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

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

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

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

この方法は、style.css ファイルだけを変えれば、全ページに設定が反映されるので、とても便利です。 私も、運営しているすべてのホームページで、この方法を使っていますよ！

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

とても便利な方法になりますので、この方法は、必ず覚えておいてくださいね！

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

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

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

スタイルシートの記述方法（書き方）については、後ほどご説明しますが、、、この方法は、「そのページ内だけで有効になる方法」です。

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


１つ目の方法でお伝えした、style.css ファイルを作って、そのstyle.css ファイルだけを修正すれば、全ページに設定が反映される形にした方が、よほど効率が良いですよね。

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

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

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

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

スタイルシートの記述方法（書き方）については、後ほどご説明しますが、この方法は、「その個所だけで有効になる方法」です。


たとえば、「この文字だけ、赤色＋太字にして、背景の色を黄色くしたい」と思ったときに、上記の記述をすることで、その個所だけで、スタイルシートを実現することができます。

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




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

ちなみに、私が主に使う方法は、「１」と「３」の方法です。 「２」の方法は、私も10年以上、ホームページを作って運営していますけど、一度も使ったことはありませんでした。

だから、基本的には、「１」と「３」の方法を覚えれば良いと思いますよ！

スタイルシート（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タグの個所（設定）を変更できるので、とても便利です。

ホームページを作るなら、「スタイルシートのファイルを使うこと」は、必須だと思いますよ！


あとは、個別の個所で、スタイルシートを使いたい場合は、「３．HTMLファイルの本文内に、直接スタイルシートを書く方法」の方法を実施すれば良いだけです。

たとえば、下記のように記述する、という形ですね。

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

ちなみに、上記の記述は、「文字の色を赤くして、太字にして、背景の色を黄色くする」という意味です。 重要な箇所の文字だけを、強調したいときに、私はこの記述をよく使いますよ！


個別の個所にだけ、スタイルシートを使いたいときは、<span>タグや <div>タグを使って、そのタグの中に、「style」と書いて、スタイルシートの記述をするということを、覚えておいてください。

これだけ覚えておけば、スタイルシートで困ることはないと思いますし、ホームページも十分、運営していくことができますよ！


なお、<span>タグと <div>タグについては、下記のページでお伝えしているので、これも覚えておいてくださいね。

　<div> タグの書き方
　<span> タグの書き方

スタイルシート（CSS）のまとめ

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

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

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


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




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

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


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

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

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

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

インターネットを使ったサイドビジネス（副業）で、自宅にいながら、空いている時間で、月２０万円の収入を得ていただくための方法 もお伝えしています。 これからは、「複数の収入源を持つこと」がとても大切なので、ぜひホームページで収入を得ていきましょう！

⇒ 副業で自宅にいながら、収入を得るための講座はこちら！