CSSの書き方(基礎)

2017.06.30

21 PV

CSSとは

 CSSはホームページにおいて見栄えや飾り付け、レイアウトの要素を補う言語です。他ではCascading Style Sheets(カスケーディングスタイルシート)やスタイルシート(stylesheet)と呼ばれてもいます。CSSを使うことで、見やすく、HTMLでは表現できない装飾なども簡単につけることができます。 それ以外にCSSを使うことで、ソースコードが短くなり、ページの読み込み速度も早くなります。現在のほとんどのホームページではCSSが使用されています。

 

CSSの構造

 CSSでは主に3つの要素でページの見栄えやレイアウトの指定をしています。

・セレクタ(selector)
 どこの部分に見栄えやレイアウトを指定するか

・プロパティ(property)
(セレクタ)の部分をどうするか

・値
(プロパティ)をどの程度施すのか

簡単にいうと、「どこに(セレクタ)」「何を(プロパティ)」「どうするか(値)」です。例えば、「h2タイトル(セレクタ)」の「位置(プロパティ)」を「中心にする(値)」というふうに書いていきます。上記の部分をCSSで書くとこうなります

h2{text-align: center; }

“h2”がセレクタで、”text-align”がプロパティ、”center”が値になります。複数プロパティを指定する場合はそのまま“;”のあとにプロパティから書き足していきます。

(例)フォントのサイズの指定もする場合
h2{text-align: center; font-size:40px;}

複数のプロパティを指定する場合、CSSは空白を無視するので下記のように改行いていくと見やすいです。

 h2{

text-align: center;
font-size:40px;
}

CSSは編集したい部分に細かく(位置・色・大きさなど)プロパティと値を設定していくことで見た目やレイアウトを整えていくというように考えていくとわかりやすいです。

 

セレクタ

 セレクタにはいくつか種類があります。セレクタの種類を使い分け次第では、コーディングの際、修正のしやすさなどが変わっていきます。

 ・全称セレクタ全ての要素に適応されます。

 (例)全ての要素の色を黒にする
* {color:black;}

・要素型セレクタ(タイプセレクタ・要素タイプ)特定の要素名(HTMLのタグなど)にスタイルを指定するセレクタで、HTMLで書かれたの要素にスタイルが指定されていきます。例えばh2タイトルに下記のようなCSSがかけられると、全てのh2タイトルにスタイルがあてられます。 

CSS

h2{text-align: center; }

 

HTML

<h2>タイトル文字</h2>
<h2>タイトル文字</h2>
<h2>タイトル文字</h2>

 

・classセレクタ
特定のclass名(クラス名)が付けられた要素に対して、スタイルを適用していきます。class名を記述する場合は頭に.(コンマ)を必ず入れます。下記のような記述の場合、一番上のh2タイトルのみ適用されます。同じ要素で、デザインが違う場合はこのようにclass名を付けて使い分けて記述していきます。

 

CSS

.ttl{text-align: center; }

 

HTML
<h2 class=“ttl”>タイトル文字</h2>
<h2>タイトル文字</h2>
<h2>タイトル文字</h2>

 

 

・idセレクタ
特定のid名がつけられた要素に対してスタイルを指定するセレクタです。文書の内で、同じid名を重複して使用することはできません。idセレクタを記述することで、特定の文書の部分に対していっきにスタイルを適用することができます。他にもセレクタの種類はいろいろありますが、まずは、要素セレクタとclassセレクタ、idセレクタの違いをきちんと理解することが大切です。

 

プロパティ

プロパティは色・形だけでなく目的に合わせてたくさんの種類があります。よく使われるプロパティは覚えておくと、作業効率がよくなります。よく使うため、覚えておくといいプロパティを紹介していきます。

 color:(カラーコードやカラー名);  文字の色を指定する

background-color:(カラーコードやカラー名); 背景の色を指定する

font-family:(フォント名やゴシック・明朝などの指定); フォントの種類または

特定のフォントを指定する

font-weight:(boldなどフォントの太さ); フォントの太さを指定する

line-height:(ピクセル数など); 行の高さ(行間)を指定する

width:(ピクセル数など); 横幅を指定する

height:(ピクセル数など); 高さを指定する

margin:(ピクセル数など); マージンの指定をする

padding:(ピクセル数など); パディングの指定をする

float:(leftもしくはrightなど); 左か右に寄せて配置する

上記のプロパティは、いろんな要素に対してよく使用されます。また、マージンやパディングについては値の書き方で指定される方向が変わるので間違えないようにしましょう

 1つの場合→「上下左右」
2つの場合→「上下」「左右」
3つの場合→「上」「左右」「下」
4つの場合→「上」「右」「下」「左」

複数の値を記述する場合は、半角スペースで区切っていきます。

 

スタイルの優先

 CSS文書で同階層内に同じセレクタ名もしくはクラス名が重複している場合、後から読み込まれたスタイルに上書きされるため、後から書いたプロパティの値が優先されます。値を修正しても変わらなかったり、問題が起こることもあるので、注意しましょう。

 

スタイルの設定

 HTMLファイルの文書とCSSファイルの文書は別のにファイルになっているため、HTMLでスタイルを設定する必要があります。スタイルの設定方法はいろいろありますが、ここではよく使われている1つ紹介します。

<link>要素として外部CSSファイルを読み込んで指定する

 HTMLファイル内からCSSファイルを呼び出します。 HTML文書内の<head>要素の中に<link>要素を記述して、外部CSSファイルの指定をします。 適用されるlinkのスタイルがCSSであることを教えるために、<link>要素にtype属性を付けて値にtext/cssと記述し指定します。 XHTMLとの互換のしやすさや修正のしやすさなどからこの方法を使う場合が多いです。

 HTML(CSSファイルをindex.cssとして記述してる場合)

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”index.css”>
</head>
<body>

</body>
</html>

 

最後に

 CSSの勉強し始めは、何を記述しているのかさっぱりと思うかもしれません。一見複雑なことが書かれている文書に見えますが、細かくバラして見てみると一つひとつは単純なスタイルの指定で、それを重ねていくことで現在のようなホームページができています。Webページのデザインを考えるときも、CSSで記述することを考えて作っていくと、コーディングのしやすさなどの作業効率も変わっていきます。

 

 

このエントリーをはてなブックマークに追加

筆者

E.Mizuno

2016年12月入社。制作部所属。 主にWebデザインと印刷物、ときおりイラストを担当しています。 印刷業界からWeb業界に転身したばかりなので現在コーディング勉強中。 猫好きで猫を飼ってるけど猫アレルギーなのが日頃の悩みです。 好きなデザイン系統は寒色系シンプル。好きなソフトはAdobe Bridge。好きなショートカットキーはCont+A。愛用文具は製図用シャーペン。 まだまだ未熟者なのでもっと勉強してハイスペック人間になりたいです。

筆者が最近執筆した記事