creatersnest124

【CSS入門】これから勉強する人にまず見て欲しい!CSSとは?どうやって書くの?


インターネットが普及して今は様々なWebサイトが登場してきました。
まとめサイトや個人のブログなど、見たいサイトはたくさんあります。

しかし、自分で作ろうとしてもどうしていいかわからない
という方もいるのではないでしょうか?

例えばHTMLでWebサイトを作ったときに、各ページに色を付けたり大きさを変えたり
したくなりませんか?
そんな時にCSSを活用すること見た目が凝ったサイトにできるのです。

そこで今回は、これからWebサイトを作ってみたい、
勉強してみたいという方に向けて、CSS(スタイルシート)の書き方の基本を見ていきます。

そもそもCSSとは?

CSSとはCascading Style Sheets(カスケーディング・スタイル・シート)の
頭文字をとったもので、Webページのスタイルを指定する言語です。

HTMLと組み合わせて使うことで、文字の装飾や色の指定など、
様々なことができるようになります。
HTMLがWebページの構造的な文書を定義するのに対して、
CSSは文書の見た目をどのように装飾するのかを定義します。

拡張子は .css です。

CSSはどうやって書くの?

CSSの基本書式は

セレクタ {  プロパティ:  値;  }

このように記述していきます。
HTMLのセレクタに対して、{ } で囲み、プロパティを設定するだけです。
プパティの後ろにコロン(:)、値の後ろにセミコロン(;)
の記述を忘れないでください。

まずは実際に例を見てみましょう。

簡単なHTMLとCSSを記述しました。
画像の赤枠で囲ってある部分がCSSの定義になります。

右の赤枠はHTMLファイルにスタイルシートをリンクさせる記述方法です。
左の赤枠がCSSファイルに記述した定義です。

この定義では、HTMLの<P>要素に文字色を赤くする指定をしています。

コーディングサンプル

このindex.htmlファイルを開いてみます。

ブラウザサンプル

 

文字が赤くなっています。
このようにCSSではHTMLの各要素に対して装飾をしていきます。

pがセレクタ、colorがプロパティ、redがになります。
つまり、どこに { 何を: どうするか; } = p { color: red; } となるわけです。

プロパティは文字色(color)、大きさ(size)、背景(background)など
様々な要素に定義することができます。

サンプルのコードを記述しますので、メモ帳などにコピーして
動作を確認してみてください。
index.html

style.css

CSSはどこに記述するの?

CSSをどこに記述するのかは、主に3つのの方法があります。

1.HTMLのheadタグ内に記述する

HTML内のheadタグ内に styleタグ を記述し、その中に定義していきます。
headタグ内への記述

2.HTMLの要素タグに直接記述する

HTMLの各要素に直接 style属性 を記述する方法です。
要素タグにstyle属性を直接記述

3.外部ファイルにリンクする

HTMLファイルとCSSファイルを別に作り、外部ファイルとしてHTMLにリンクします。
headタグ内に linkタグを記述して、href属性でCSSファイルをリンクさせます。
htmlファイル CSSファイル

どの記述方法が一番良いかと言ってもそれぞれの記述方法に一長一短がありますが、
ページをデザインしていくとstyleタグや要素タグにstyle属性を記述していく方法は、
HTMLファイルが冗長になってしまいます。

後で修正するときにどこを直せばいいかわからなくなってしまいますので、
外部ファイルとしてリンクさせる方法がメンテナンスもしやすいのでおすすめです。

最後に

今回は、ごくごく基本的なCSSの書き方について説明しました。
CSSをうまく使えば、見た目もきれいなWebページをデザインすることができます。

スタイルの定義は様々なものがありますので、今回の基本を押さえつつ、
いろいろと試してみてください。

また、もっとCSSについて仕様を知りたいという方は、以下のサイトで確認できます。
http://www.w3.org/TR/CSS2/

W3Cという団体が仕様を管理しています。
英語ですが細かい仕様を確認できますので、これから勉強をしていきたい方は
一度目を通してみるのもよいでしょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article【あなたは大丈夫?】Photoshopの間違った使い方まとめ