★ Let's become a Web Designer! 【プロフィール】 【商品一覧】 【よくある質問】 【お問い合わせ】
 

スタイルシートの書き方

 
ホーム はじめに 講座の効果 作成実績 受講者の声 パーツ集 スマホサイト作成 作成ソフトの選び方 作成ソフトの比較
 
 
 
 
 
 

【初心者向け】スタイルシート(CSS)の3つの書き方を解説!

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

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

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


初心者向け スタイルシート(CSS)の書き方




スタイルシート(CSS)について

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

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

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


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

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

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




スタイルシート(CSS)を使う方法は、3つの方法がある!

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

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

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



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

 

1.スタイルシートのファイル(.css)を作成して、
  そのファイルを読み込んで使う方法
2.HTMLファイルのヘッダー内に、styleタグを書く方法
3.HTMLファイルの本文内に、直接スタイルシートを書く方法


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



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

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

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

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


<link rel="stylesheet" href="style.css" type="text/css">


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

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

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



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

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


<style type="text/css">
  h1 { color: red; font-size: 20px; }
</style>


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

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

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


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

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



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

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


<span style="color:red; font-weight:bold; background-color:yellow;">ホームページに掲載する文章</span>


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

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


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

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

スタイルシート(CSS)を使う方法は、3つの方法がある


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

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

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




スタイルシート(CSS)の書き方

スタイルシート(CSS)の書き方 についてですが、スタイルシートの基本的な書き方は、下記のような書き方です。


color: red;

つまり、「何を、どうしたい」という書き方ですね。

たとえば、「color: red;」という記述は、「文字の色を、赤くしたい」という意味です。 また、「font-size: 20px;」という記述であれば、「文字の大きさを、20pxにしたい」という意味ですね。

これが、スタイルシートの基本的な書き方になります。


これを踏まえたうえで、サンプルサイト のスタイルシートのファイル(style.css)を見てみましょう! たとえば、下記のような記述がありますよね。


td { font-size:13px; line-height:140%; }


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

実際に、style.css ファイルの上記の数字部分(たとえば、font-size:13px; を font-size:16px; にするなど)を、変更してみてください。 全ページの文字の大きさが、大きくなりますよ!


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


a { color:#0000FF; text-decoration:underline; }


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

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

ためしに、style.css ファイルの上記の記述(たとえば、color:#0000FF; を color:pink; にするなど)を、変更してみてください。 全ページのリンクの色が、ピンク色になりますよ!



このように、スタイルシートの基本的な書き方は、「何を、どうしたい」という書き方です。 これだけ知っておけば、「この記述は何を示しているんだ?」と思ったら、その記述を検索すれば良いだけですよね。

もちろん、私も全部は覚えていませんけど、「何を、どうしたい」という書き方だけ知っておけば、スタイルシートで困ることはないと思います。


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

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

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

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


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

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


<span style="color:red; font-weight:bold; background-color:yellow;">ホームページに掲載する文章</span>


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

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


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

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


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

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




スタイルシート(CSS)のまとめ

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

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

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


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

スタイルシート(CSS)は、基本的なことだけを覚えておけば良い


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

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


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

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





【おすすめ外部コンテンツ】
 
会員制サイドビジネス講座
 
私がお金を稼ぐ理由 ~ お金を持ったときのメリット ~
 
インターネットで月20万円の収入を継続して稼ぐ方法
 
初心者用ホームページテンプレート
 

インターネットビジネスのすごさを認識してください
 
無料ホームページ制作講座の受講者の声
 
動画で覚える無料FX講座
 
ホームページが作れる能力は、最高の能力
 



当サイトで使用しているサンプルサイトを無料でダウンロード!

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

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



副業で月20万円の収入を、自宅の空いている時間で稼ぐための講座

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

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



 
今スタートできるサンプル
サイトを無料ダウンロード
 
サンプルサイトの無料ダウンロード
 
サイドビジネス講座
 
会員制サイドビジネス講座
 
初心者がホームページを自分で作れる能力を身につけて、 そのホームページをビジネスに活用する方法をお伝えする、会員制のサイドビジネス講座です。

この講座は、初心者がインターネットで収入を得られるようになることを目的として、運営しています。
 
 
 
HPテンプレート
 
自分で更新できる最短ホームページテンプレート
 
初心者が、簡単にホームページを作るための「ホームページテンプレート」です。

テンプレートと、たくさんのパーツ集をコピーして貼り付けるだけで、ホームページが完成する仕組みになっています。

さらに、テンプレートの使い方はすべて動画で解説しています。
 
基礎講座と用語集
 無料ホームページ作り方 ホームページ基礎講座
 無料ホームページ作り方 HPでよく使う用語集
 無料ホームページ作り方 HTMLタグの書き方
 無料ホームページ作り方 スタイルシートの書き方
 
ホームページ作成ソフト
 
レンタルサーバ
 
ワードプレス
 
インターネット副業
 
サイドビジネス・副業の始め方
 
初心者が、インターネットを使ったサイドビジネスで、自宅にいながら収入を得る方法を、すべて動画でお伝えするサイトです。

また、仕事ができるようになるノウハウや、「最高の成長法」などもお伝えしています。
 
 
メールマガジン
 無料ホームページ作り方 メールマガジンの登録
 
リンク
 無料ホームページ作り方 当サイトへのリンク
 
会社概要
 
特定商取引に基づく表記
 
個人情報保護ポリシー
 
お問い合わせ先
 
 
NPO法人の推薦状
 
NPO法人の推薦状

 
当サイトは、NPO法人「起業とキャリア支援センター」様からの推薦を受けて、運営しています。
 
トップページプロフィール特定商取引法に基づく表記取り扱い商品一覧よくある質問お問い合わせ
 
 
Copyright © 動画で覚える無料ホームページ制作講座 All rights reserved.
 
by おすすめ副業ランキングサイト
^