株式会社HUBFACTORY - 新たなつながりを作るサービス・アプリ・WEB制作会社 -
CREATE A NEW HUB
IN THE WEB SEARVICE...
PICK UP

web

WEBサイト制作講座 | CSS基礎 その1

2017.11.16

CATEGORY - web

前回でひととおりHTMLの基礎が終わったので、今回から、CSSについて説明していきたいと思います。

ちなみに、HTMLもそうなんですが、CSSも他の人が見てもわかりやすく書くことがコツなんですが、いろいろ奥が深いんですよねー^^。

まあ、慣れです。ひたすら書いて書いて書きまくるしか上達の方法ないかもしれないですね笑

とりあえず始めますw

CSS基礎

1. CSSとは

CSSの正式名は、 Cascading Style Sheets です。
こちらも、まあ、覚えなくていいですw 聞かれることもまずないですしw

CSSの役割なのですが、

” WEBページのスタイル(見栄え)を指定するもの “

です。

HTMLに対して、どのように装飾していくかを指定します。レイアウトを指定したり、色やサイズを指定したり、あとは、ちょっとしたアニメーションで動きをつけたりもできます^^

ちなみに一番新しいもので、CSS3を使っていきます。

2. CSSの書き方

CSS には、「セレクタ」「プロパティ」「値」という3つの要素があります。

・ セレクタ: 何に対して適用するか。
・ プロパティ: どんなスタイルを適用するか。
・ 値: プロパティに対して、どのように(どのような値に)するか。

って感じです。

名前がいろいろ出てきてわかりづらいですね。。。
まあ、こんな名前なんて覚えなくてもいいです笑

では、実際に例を書いてみますね。

前回作った HTML に対して、ヘッダー部分の背景の色を変えてみたいと思います。

header {
  background-color: red;
}

こんな感じで書きます。

・header: セレクタにあたります。headerタグに対してスタイルを指定するよ!ってことです。
・background-color: プロパティにあたります。読んで字のごとく、背景の色に適用するよ!ってことです。
・red: 値にあたります。プロパティ(今回は背景の色)に対して、この値(今回は赤)にするよ!ってことです。

ちなみに、セレクタに対して、プロパティと値の部分を “{” “}”で囲んであげて、このセレクタに適用するのはこの範囲だよ!って伝えてあげます。
あと、プロパティと値は、コロン “:” でつないで、値の後ろは、セミコロン “;” で完了させてあげます。

こんな感じです。書いて行くうちにすぐ慣れますw

では、これをどこに書くか。

3通りの方法があります。

2-1. HTMLの <head> の中に書く

<head>の中に、<style></style> タグで囲んであげて、ここがCSSの部分だよーって言ってあげます。

<head>
  <!-- もろもろ省略 -->
  <style>
    header {
      background-color: red;
    }
  </style>
</head>

こんな感じです。

ブラウザに映すとこんな感じになります。

CSS基礎

ヘッダーの部分の背景が赤くなりましたね!

2-2. CSS を外部ファイルにして、HTMLファイルの中で、CSSのファイルを読み込む

基本的には、一番推奨されている方法がこれだと思います。HTMLファイル自体もごちゃごちゃしないですしね^^

ファイルを新しく作って、 例えば style.css (※拡張子は.css です。)で保存してください。

中身は、先ほどの

header {
  background-color: red;
}

これだけ書きます。
.css というファイル形式で、これはCSSが書いてあるよーって言ってるので、中で <style> で囲む必要はありません。

で、この cssファイル をHTMLの <head> の中で呼び出してあげます。

<head>
  <!-- もろもろ省略 -->
  <link rel="stylesheet" href="style.css">
</head>

この <link> タグがHTML上で別のファイルを呼び出しますよーっていうタグです。
で、rel に そのファイルがどんなファイルなのかっていうのを指定してあげます。
css の場合は、rel=”stylesheet” って指定します。
href は 画像タグやアンカータグの時と同様、ファイルの場所を指定してあげます。

HTMLと同一の階層にcssファイルがある場合は、上のような指定の仕方になります。

2-3. HTMLのタグに直接スタイルを指定する

CSSとして分けずに、HTMLのタグに直接指定する方法です。

あまり使わないですし、使わないほうがいいですが、時々、JavaScript とかサーバーとかとの連携でタグに直接書かないといけない時があるので、そういう時だけ、この方法を使います。

はい、こんな感じです。↓↓

<header style="background-color: red;">
  <!-- 省略 -->
</header>

タグには付属の部品として属性がつけられるって「HTML基礎 その3」で説明しましたが、スタイルを直接指定する場合は、style という属性を指定してあげます。
で、属性の中に、適用したいスタイルを書いていきます。

以上、3種類の方法がありますが、どれをやっても、ブラウザ上に表示させた結果は一緒になります。
ファイルのメンテナンス性を考えた場合、2-2 の CSSの外部ファイル化 の方法が一番いいと思います。

※ちなみに、この講座でも、今後、2-2 の方法で進めていきます。

3. クラス名で指定する方法

CSSの単純な書き方はわかったかと思います。

2 では、HTMLのタグに対して、スタイルを指定したのですが、例えば、同じタグでも、この<p>タグにはこのスタイルを適用して、別の<p>タグには他のスタイルを適用したいということがあります。
その時の方法が、クラス名を作ってあげて、そのクラス名をタグに指定してあげることができます。

どうしようかな。ABOUTのタイトルの部分(<h2>の部分)で例を示してみることにします。

<h2> の中に、<p>タグが2つあります。

<p>ABOUT</p>
<p>アプリについて</p>

この部分です。

この<p>タグに別々のスタイルを適用してみたいと思います。

クラス名の付け方ですが、クラス名の前にドット(.)をつけてあげます。
クラス名は、他の人が見てもわかる名前(自分が見てもわかるのはもちろんですがw)のほうがいいと思います。
(※ちなみにクラス名は自由につけることができます。… 使えない文字もありますが、まあいいや。)

.main-text {
  font-size: 30px;
  color: #ff0000;
}

.sub-text {
  font-size: 14px;
  color: #0000ff;
  font-style: italic;
}

CSS側はこんな感じで。

※ ↑↑ ちなみに、複数のプロパティを指定してあげるときはこんな感じで書きます。

あ。それから、カラー(色)の指定には、光の三原色(R, G, B)を使ったカラーコードで指定してあげることもできます。
指定方法は、シャープ(#)ではじめて、R(赤み)のコード2桁、G(緑み)のコード2桁、B(青み)のコード2桁、で表します。

(´-`).。oO(緑み って言うのかなあ。

ここで指定したクラス名をHTMLのタグに適用します。

<h2>
  <p class="main-text">ABOUT</p>
  <p class="sub-text">アプリについて</p>
</h2>

こんな感じです。

クラス名の指定には、タグに class という属性を指定してあげて、中身に適用したいスタイル名を書いていきます。

では、また、ブラウザで見てみましょう。

CSS基礎

クラスで指定したプロパティが反映されているのがわかると思います。

※ちなみに、基本的には、タグ自体にCSSを適用するのはあまりよくないと思ってるので、クラス名で指定するほうがよいです!

以上で、CSSの基本的な部分はおわかりいただけたかと思います。

あとは、どんなスタイルを適用したいのかによって、いろいろなプロパティを指定していくのですが、ここらへんは経験ですかね^^;
とにかく書いてみる以外に方法ないです笑

ググって書く。ググって書く。

で、「あ、このプロパティだとこんな感じになるのかー」とか「この組み合わせじゃだめなんだー」とか試行錯誤しながら学習していくしかないですねw

まあでも、はまったら時間も忘れてのめりこめると思います^^

今回はここまでにしておきます。

今回のポイント

  1. CSSはHTMLに対してどんな装飾をするかを指定してあげるもの!
  2. 特段の意味がなければ、CSSは外部ファイル化したほうがメンテナンス性がよい!
  3. CSSはタグに指定するよりも、できる限りクラス名で指定するようにしましょう!

 

 

株式会社HUBFACTORY(ハブファクトリー) - 新たなつながりを作るサービス・アプリ・WEB制作会社 -

© 2014-2015 HUBFACTORY.INC

PAGE TOP