CSSはWebサイト制作に役立つ?活用方法を解説

Xのアイコン

Web制作をする人々のイラスト

Webサイトを作成するうえで、CSSはとても役立つ言語です。以前はHTMLタグでWebサイトの見た目を装飾していましたが、今ではさらに見栄えを良くするためにCSSを使います。Webサイト制作をする際には、CSSのスキルは必須といえるでしょう。
そこで今回はCSSの概要と基本的な使い方、高頻度で使われているCSSのプロパティを紹介します。CSS初心者の方でもすぐに実践できるよう、CSSファイルの作成方法やHTMLファイルに読み込む方法をソース付きで解説しますので、ぜひ参考にしてください。

 

目次

 

ホームページ制作会社選びはプロにお任せ完全無料で全国5000社以上からご提案

即戦力のシステム開発会社を探すなら「発注ナビ」

・ベストマッチな発注先が見つかる
・たった1日のスピード紹介
・ITに詳しいコンシェルジュがサポート
・ご相談~ご紹介まで完全無料

 

CSSの役目について

CSS(カスケーディングスタイルシート)とは、Webサイトのスタイルを指定するための言語です。HTMLやXMLなどで記述されたWebサイトの体裁や見栄えを表現するために用いられます。例えば、文字の色や大きさ、背景の色、要素を表示する位置などはCSSで設定します。

一方で、Webサイトを制作に使用するHTMLやCSS、JavaScriptは1つのテキストファイルにまとめて書くことも可能なため、役割の違いがわかりづらい言語です。ここではCSSでできることや、HTML・CSS・JavaScriptの関係性、CSSでできることなどを詳しく解説していきます。

 

●CSSでできること

CSSはWebサイトの見た目を整えることができます。複数のページに1つひとつデザインを指定してしまうと設定や変更する際に手間がかかりますが、CSSファイルをうまく利用すると複数のページのデザインを一括で設定・変更可能です。

ここではCSSでできることをさらに詳しく解説します。

 

デザインを一括で変更できる

CSSは1つのCSSファイルで複数のページにデザインを設定できます。CSSファイルを編集することで、設定したすべてのページのデザインを一括で変更することも可能です。

設定方法も難しいものではありません。例えば「sample.css」という名前のCSSファイルを用意して、HTMLファイルに「sample.css」を読み込む設定をするだけで、デザインを適用できます。

デザインを一括で変更できる記述方法は「外部参照」といわれています。後述の「CSSの基本的な使い方」で詳しく解説します。

 

デザインの微調整ができる

CSSでは様々な要素の微調整ができます。例えば、文字や画像の表示位置を左寄せにしたり、中央寄せにしたりなどの調整はもちろん、ピクセル単位で表示位置を微調整することも可能です。

長い文章を表示する場合、そのまま表示すると読みにくい見た目になりますが、CSSでは文章の行間や文字の間隔を読みやすい見た目に微調整できます。

 

メディアごとに表示スタイルを変更できる

Webサイトを閲覧するユーザーが使っている端末の種類は、PCやスマートフォン、タブレットなど様々です。PC用のWebサイトをスマートフォンで閲覧した場合、画像が切れてしまったり横スクロールが出てしまったりして見づらい可能性もあるでしょう。

またPC1つでもモニターのサイズが異なりますし、スマートフォンの機種ごとに画面サイズも異なります。すべてに対応するのは難しいことだといえるでしょう。

しかしCSSにはMedia Queriesという機能があります。1つのソースで異なる画面サイズを持つデバイスにごとに、表示するデザインを変更させるレスポンシブ対応が可能です。

 

●HTML・CSS・JavaScriptの関係性

HTMLとCSS、JavaScriptはWebサイト制作に使います。HTMLとは、見出しや文章、表、ヘッダー情報など、ページの文書構造を形作るための言語です。ページを作成する際には必ず用いられます。

タグ(<タグ>~</タグ>)と呼ばれる目印でページの構成要素を記述するのが基本の書き方です。例えば、ページのタイトルであれば「<title>Webページのタイトル</title>」、別のページへリンクをつける際は「<a href=”URL”>別ページはこちら</a>」というように文章をタグで囲って書きます。

一方のCSSは、HTMLで記述したタグの見栄えを整える役割です。例えば「<a href=”URL”>別ページはこちら</a>」だけでは、テキストに下線が付いただけのリンクが表示されますが、CSSを利用することでリンクボタンにしたり、色を変更したりできます。

CSSとHTMLは役割が異なりますが、密接な関係性があるため両方の書き方を覚える必要があるでしょう。

見栄えだけであればCSSとHTMLを覚えれば十分ですが、動きをつけたい場合はJavaScriptも覚えることが大切です。例えばCSSとHTMLで作ったリンクボタンに、マウスカーソルが乗ったら色が変わるようにしたり、凹んだように見せたりなどのアニメーションを追加することができます。その他にもJavaScriptでできることは多彩です。

Webサイトを作るうえで、HTMLとCSS、JavaScriptはどれも外せない言語といえます。

 

CSSの基本的な使い方

これまでの解説でCSSとは何なのか理解できたかと思います。次は実際にCSSファイルを作ってみましょう。CSSファイルの作成や編集はテキストエディタで行えるため、事前に準備するものはありません。

 

●CSSファイルを作成する

まずテキストエディタを開きます。Windowsに標準搭載されている「メモ帳」でも構いません。テキストエディタで以下のようにCSSを記述してみましょう。

.main{
              width: 100%;              /* 幅指定                          */
              background-color: #000;   /* 背景色指定(黒色)                */
              text-align: center;       /* テキスト表示位置指定(中央寄せ)  */
}
 
.text{
              font-size:30px;           /* 文字サイズ指定                  */
              color: #fff;              /* 色指定(白色)                    */
}

 

入力が終わったらファイル名を「style.css」、保存先をデスクトップにして保存します。CSSファイルは拡張子を「.css」にすることで、コンピュータがCSSファイルと判断してくれます。これでCSSファイルの作成が完了です。

 

●CSSをHTMLファイルに読み込ませる

次に、先ほど作成したCSSファイルをHTMLファイルに読み込ませます。HTMLファイルもテキストエディタで作成可能です。テキストファイルを新規作成して次のHTMLタグを記述してみましょう。

<!DOCTYPE html>
  <html>
                <head>
                              <meta charset=”urf-8″>
                              <link rel=”stylesheet” href=”style.css”>
                              <title>スタイルシートを体験</title>
                </head>
                <body>
                              <div class=”main”>
                                            <span class=”text”>スタイルシートとHTMLを作成してみました!</span>
                              </div>
                </body>
  </html>

 

入力が終わったらファイル名「index.html」で保存します。保存場所はCSSファイルと同じくデスクトップにしてください。

完了したら、デスクトップの「index.html」をダブルクリックしてみましょう。ブラウザが開き、黒色を背景にした「スタイルシートとHTMLを作成してみました!」の白色の大きな文字が中央に表示されたら成功です。

以上がCSSの基本的な使い方です。CSSをHTMLファイルに読み込ませる記述方法は、他にもあります。次の項目で紹介します。

 

CSSはどこに記述すれば良いのか

CSSの基本的な使い方を紹介しましたが、CSSを読み込ませる方法は他にもあります。Webサイト制作では前項の「CSSの基本的な使い方」で紹介した方法をメインに使いますが、他の書き方を利用する場面がありますので、覚えておきましょう。

 

●インライン形式

インライン形式とは、HTMLのタグの中に直接CSSを書く方法です。例えば、前項の「CSSの基本的な使い方」で紹介した方法をインライン形式にすると以下のようになります。

<div style=”width: 100%;background-color: #000;text-align: center;”>
<span style=”font-size:30px;color: #fff;”>スタイルシートとHTMLを作成してみました!</span>
</div>

 

HTMLタグの中に「style=””」を記述して、スタイルを指定します。HTMLの各要素に直接CSSを記述するため、初心者でもわかりやすい方法といえます。

しかし共通のCSSを編集する場合は、すべてのページを更新しなければなりません。インライン形式の利用は、Webサイト制作の途中の確認用に使うのがおすすめです。

 

●ヘッダー埋め込み形式

ヘッダー埋め込み形式とは、HTMLタグのhead要素内にスタイルを書く方法です。先ほど作成したテキストをヘッダー埋め込み形式で記述すると以下のようになります。

<!DOCTYPE html>
<html>
              <head>
                            <meta charset=”urf-8″>
                            <title>スタイルシートを体験</title>
                            <style>
                                          .main{
                                                        width: 100%;
                                                        background-color: #000;
                                                        text-align: center;
                                          }
 
                                          .text{
                                                        font-size:30px;
                                                        color: #fff;
                                          }
                            </style>
              </head>
              <body>
                            <div class=”main”>
                            <div class=”main”>
                                          <span class=”text”>スタイルシートとHTMLを作成してみました!</span>
                            </div>
              </body>
</html>

 

<head>~</head>の中に、CSSを書くための「<style>~</style>」を追加します。CSSファイルは不要ですが、そのページだけしか装飾が適用されないというデメリットがあります。

インライン形式と同じく、全ページ共通のスタイルを変更する場合は、すべてのページを更新しなければなりません。ヘッダー埋め込み形式の利用は、1つのページだけ適用したいデザインがある場合のみ使うと良いでしょう。

 

●外部参照

外部参照とは、HTMLファイルにlink要素でCSSファイルを参照する方法です。link要素の書き方は以下の通りですが、詳しい書き方は前項の「CSSの基本的な使い方」を参考にしてください。

              <head>
                            <link rel=”stylesheet” href=”style.css”>
              </head>

 

デザインの変更をする際は、CSSファイルを更新するだけですべてのWebページに反映されます。更新効率が高いため、Webサイトの制作は外部参照を使うことがほとんどです。外部参照を積極的に使うことをおすすめします。

 

役に立つCSS基本プロパティを紹介

CSSのプロパティとは、装飾やデザインの内容のことです。例えば、色を指定するCSSの「h1{color: #fff;}」であれば、「color」がプロパティになります。ここではよく利用されるCSSのプロパティを紹介します。

 

●color

文字の色を指定するためのプロパティです。カラーコード、RGB値などで色を指定します。

h1{
color: red; /* 赤色 */
color: #ff0000; /* 赤色 */
color: rgb(255,0,0); /* 赤色 */
}

 

●font-size

文字サイズを指定するプロパティです。px、em、rem、%などで文字のサイズを指定します。

h1 {
font-size: 20px;
              font-size: 1.3em;
              font-size: 1.2rem;
              font-size: 140%;
}

 

●text-align

文字の行揃えや均等割付を指定するプロパティです。left(左揃え)、center(中央揃え)、right(右揃え)、justify(均等割付)で指定します。

h1 {
             text-align: left;
             text-align: center;
             text-align: right;
             text-align: justify;
}

 

●background-color

背景色を指定するプロパティです。文字の色(color)と同じく、カラーコードやRGB値などで色を指定します。

h1 {
             background-color: red;
             background-color: #ff0000;
             background-color: rgb(255,0,0);
}

 

●text-decoration

文字の装飾方法を指定するプロパティです。none(装飾なし)、line-through(取り消し線)、overline(上線)、underline(下線)、blink(点滅)の値を指定できます。半角スペースで値を区切ることで複数指定も可能です。

h1 {
             text-decoration: none;
            
             text-decoration: line-through;
             text-decoration: overline underline blink;
}

 

「CSSデザインテンプレート」サイトも活用しよう

「CSSデザインテンプレート」サイトとは、CSSのみでデザインが構成されているテンプレートを配布しているサイトのことです。個人向けはもちろん、企業やビジネス、飲食店向けなどジャンルも豊富に用意されています。

1からHTMLやCSSを使用してWebサイトを制作しなくても良いため、作業時間を短縮することが可能です。またテンプレートのHTMLファイルやCSSファイルを見ることで、どのようにWebサイトが作られているか学ぶこともできます。

CSS初心者のうちは「CSSデザインテンプレート」サイトを積極的に活用しましょう。

 

まとめ

CSSはWebサイトの装飾のために使われる言語です。Webサイトの制作を行う方は、HTMLと一緒に覚えるべきでしょう。CSSを記述する場所は3種類ありますが、基本的にWebサイトで利用するのは外部参照です。まずは外部参照でスタイルを指定する方法を身につけるようにしましょう。

またCSSの勉強をはじめたばかりのときは「CSSデザインテンプレート」のサイトを活用するのもおすすめです。作業時間を短縮するメリットはもちろん、教材として参考になるためCSSのスキルを早く身につけることができるでしょう。

 

ホームページ制作会社選びはプロにお任せ完全無料で全国5000社以上からご提案

即戦力のシステム開発会社を探すなら「発注ナビ」

・ベストマッチな発注先が見つかる
・たった1日のスピード紹介
・ITに詳しいコンシェルジュがサポート
・ご相談~ご紹介まで完全無料

 

■ホームページ制作に関連した記事

東京でおすすめのホームページ制作会社

東京でおすすめのホームページ制作会社20社【最新版】

大阪でおすすめのホームページ制作会社

大阪でおすすめのホームページ制作会社10社【最新版】

即戦力のシステム開発会社を探すなら「発注ナビ」

希望ぴったりの外注先がラクして見つかる
soudan_banner

人気記事

関連記事

関連特集

offer_banner
即戦力のシステム開発会社を探すなら発注ナビロゴ
発注ナビは、システム開発に特化した
発注先選定支援サービスです。
紹介実績
19000
対応社数
5000
対応
テクノロジー
319
紹介達成数
92%
システム開発の発注先探しで
こんなお悩みありませんか?
checkbox
なかなかいい外注業者
見つからない。
checkbox
ITの知識がなくて
発注内容をまとめられない。
checkbox
忙しくて外注業者を探す
時間がない
悩んでいる人物
発注ナビの主な特徴
IT案件に特化
IT案件に特化
日本最大級5000社以上のシステム開発・WEB制作会社が登録。IT専門だから細かい要望が伝わり、理想的なパートナーが見つかる。
ITへの不安を徹底サポート
ITへの不安を徹底サポート
専門コンシェルジュがしっかりヒアリングするので、IT知識に不安があっても、まだ要件が固まっていなくても大丈夫。
完全無料・最短翌日紹介
完全無料・最短翌日紹介
コンシェルジュに発注内容を話すだけで最短翌日に開発会社をご紹介。しかも完全無料・成約手数料も無し。
さらに
東証プライム上場
「アイティメディア株式会社」
グループが運営
ご相談内容は一般公開しないため、クローズド案件でも安心。
ご紹介企業は第三者調査機関にて信用情報・事業継続性を確認済です。

発注先探しの
ご相談フォーム

発注ナビは貴社の発注先探しを
徹底的にサポートします。
お気軽にご相談下さい。
必須
必須
必須
■必要な機能・課題■ご予算■スケジュールなど
■企画書やRFPの添付が可能です(10MBまで)

会員登録には、
発注ナビ 利用規約  及び 個人情報の取扱い 
「当社からのメール受信」への同意が必要です。