HTML･CSS･Javascript

【Webデザイン超初心者向け】CSSの基本的な使い方とコーディング方法

HTMLとCSS

Webぺージを作る際に、重視しておきたいのはデザインです。

Webデザインをするために、必ずといっていいほど使うのがCSS。

ここではCSSの基本的な使い方とコーディング方法について説明します。



CSSの基本的な使い方

CSSは、HTMLとあわせて使うのが基本です。

▼HTMLの使い方を知らない人はコチラの記事をチェック。

チェック【Webデザイン超初心者向け】HTML文書の基本知識とWebサイトの作り方

CSSの基本的な使い方は、

  1. <style>でCSSを書き出す
  2. ｛｝の前にセレクタを書く（変更したいHTMLタグを指定）
  3. ｛｝の中にプロパティを書く
  4. </style>で囲む

となっています。

これだけだとわかりづらいので、実際にどんなものかコードを見てみましょう。

【見本】実際にコードを書いてみる

たとえば、下記のようなHTML文書があったとします。

下記では右のように表示されます。

<!DOCTYPE html> 
<html> <head>これはサンプルです。</head> 
<header>HTMLの基本</header> 
<h1>HTMLでWebサイトを作りたい！</h1> 
<body> HTMLの基本はタグです。 </body> 
</html>
HTMLサンプル
上記のコードに、CSSでコーディングし、h1タグのセレクタで赤字に変更します。
<!DOCTYPE html> 
<html> 
<head>これはサンプルです。</head>
<header>HTMLの基本</header> 
<style>
    h1{color: red;}
</style>
<h1>HTMLでWebサイトを作りたい！</h1>
<body>
    HTMLの基本はタグです。   
</body> </html>

<style> h1{color: red;} </style>　というコードを追加しました。

どのように変化したのか、比べてみましょう。

HTMLサンプル
CSSサンプル
CSSで指定したh1タグが赤字になりました。

セレクタの書き方

前述では、HTMLタグをセレクタで指定したやり方で説明しました。

しかし、セレクタにはさまざまな書き方があります。

セレクタの書き方についてご紹介します。

タグ名を指定した選択

先ほど説明したやり方で、<p>タグや<h1>タグなどのタグ名を指定する方法です。

同じページのタグ名ならCSSスタイルがすべて適用されます。

<style>
    p{color:red;｝
</style>
<p>私はCSS初心者です。</p>
<p>CSSを使ってみました。</p>
p要素で指定したCSSサンプル

部分的な要素に指定

一部だけにスタイルを適用させたい場合、class(クラス)を使います。

たとえば、classを使って、titleを指定します。

<style>
    .title{color:red;｝
</style>
<p class='title'>私はCSS初心者です。</p class>
<p>CSSを使ってみました。</p>
classで指定したCSSスタイル

このようにclassを使って指定することで、class名で指定した箇所だけの文字色が変わります。

classを指定した場合は、指定したclassの前に「.」（ドット）を記述します。

上記であれば.titleです。

また、適用させるclass名には、「’」シングルクォーテーションか「’’」ダブルクォーテーションで囲みます。

複数のセレクター指定

セレクターは複数の指定も可能です。

その際には「,」（カンマ）で、セレクターを区分けます。

<style>
    .title,p{color:red;｝
</style>
<p class='title'>私はCSS初心者です。</p class>
<p>CSSを使ってみました。</p>
p要素で指定したCSSサンプル

入れ子要素の絞り込み指定

入れ子になった要素の親子関係を利用して、適用範囲を絞り込むこともできます。

その際には半角スペースで、セレクターを区切る必要があります。

<style>
    p strong{color:red;｝
</style>
<p><strong>私はCSS初心者です。</p></strong>
<p>CSSを使ってみました。</p>
p strongを指定したCSSスタイル

<strong>は太字にするHTMLタグです。

<p>と<strong>を分けて記入しても、半角スペースで区切っただけでCSSスタイルが適用されます。

複数のプロパティと値を指定

波かっこ｛｝の中には複数のプロパティを入れることも可能です。

その際には「；」（セミコロン）で、プロパティを区切る必要があります。

赤字でフォントサイズを30ポイントに変更する場合は以下のように記述します。

<style>
    p strong{color:red;
             font-size:30pt;
             ｝
</style>
<p><strong>私はCSS初心者です。</p></strong>
<p>CSSを使ってみました。</p>
CSSのプロパティ追加でフォントサイズ30ptにした

プロパティの種類

プロパティとは文字の大きさや色、要素の見た目などに関する書式です。

CSSスタイルのプロパティの一部をご紹介します。

<style>
    p<color:red;
      font-size;12pt;
      height:200px;
      width:1000px;
      margin:0px;
</style>

color:色

font-size：文字の大きさ

height：高さ

width：幅

margin：余白

CSSの記入方法

CSSの記入方法はさまざまあります。

以下のようなときに工夫し、目的によって記入方法を変えます。

  • どこにCSSを適用させたかを明確にしたいとき
  • まとめてCSSを適用させたいとき

開始タグのstyle属性に記入する

見た目を変えたい要素の開始タグに、直接CSSを記入する方法です。

どの要素を編集しているのかわかりやすく、一部だけスタイルを変更するときに便利という長所があります。

ただし、見た目を統一したい場合には不向きです。

<p style='color:red'>私はCSS初心者です。</p>
<p>CSSを使ってみました。</p>
classで指定したCSSスタイル

<head>タグ内にstyleタグを使用して記入する

HTMLファイルのheadタグ内に、styleタグを使ってCSSのコードを記入します。

CSSの命令をまとめておけるので、最初の書き込みや後での編集が楽になります。

<head>
    <style>
        p{color:red}
    </style>
    </head>
</head>
<p>私はCSS初心者です。</p>
<p>CSSを使ってみました。</p>
p要素で指定したCSSサンプル

外部CSSファイルに記入してHTML読み込ませる

HTMLとは、別のテキストファイルにCSSのスタイルを記入します。

適用させるには、HTMLファイルの<head>タグ内に、CSSファイルへの関連付けを追加します。

複数のHTMLを同じCSSで使いまわし出来るので、全ページの見た目の統一化ができます。

また、まとめて一つのファイルに指定しているので、編集、修正、管理がしやすいです。

一般的にこの方法で使われることが多いです。

<head>
<link rel="stylesheet”href="css">
</head>
<body>
<p>私はCSS初心者です。</p>
<p>CSSを使ってみました。</p>
</body>

link rel=外部リソースを参照

href=HTML文書を参照

CSSの注意点

CSSを使用するにあたって、いくつか注意点があります。

  • 半角英数字の小文字を用いる。
    全角文字では正しく動きません。
  • 大文字小文字を正しく記入する。
  • ファイル名の末尾につける拡張子は「CSS」を使う。
  • HTMLファイルはutf-8（Unicode）で保存の場合、CSSのファイルも同じにする。
  • プロパティごとにタブと改行を入れて、入力しやすくすると可読性が高まる。

CSSは使い方さえわかればコピペでもOK

CSSは、基本的な使い方さえわかっていればコピペして使っても問題ないです。

というのは、スタイルの種類は毎日新しいバージョンが増えています。

それをひとつずつ覚えていくと、きりがないからです。

新しいスタイルはチェックしておくべきですが、コードをすべて覚えておく必要はありません。

必要なときはCSSをググってコピペして使いましょう。

CSS学習のおすすめ本

スラスラわかるHTML＆CSSのきほん
この一冊だけでHTMLとCSSの基本をマスターできます。

amazon
おすすめの記事