「CSSを覚えたいけど何から始めたらいいかわからない」という方へ向けて、CSSの基礎知識を紹介していきます。
初心者の方はいきなりCSSを打ち始める前に、CSSの基礎知識をしっかり身につけることが大切です。
この記事で基礎を身につけた最後に、いつでも練習できるようCSSファイルを作って終わりたいと思います。
CSSとは。
CSSとは「Cascating Style Sheets（カスケーティング・スタイル・シート）」という名前の頭文字をとったもので、一般的にCSS（シー・エス・エス）と呼ばれています。
CSSの語源となるカスケーティングには”連続して流れる滝”という意味があり、上の方で指定したスタイルが下の方へ引き継がれることからこの名前がつけられました。
CSSの役割
HTMLは文章に意味を持たせる（マークアップ）のに対して、CSSはHTMLに装飾(見栄え)をつける役割があります。
HTML4.01以前には、HTMLだけで装飾（見栄え）をつける要素がありました。
しかし使い方が混在してしまうため、HTML4.01以降はHTMLは文章に意味を持たせるもの、CSSはHTMLに装飾するものと使い方が差別化されるようになりました。
普段見ているほとんどサイトには、必ずHTMLとCSSが使われています。
CSSにはバージョンがある
CSSには、CSS2.1とCSS3のバージョンがあります。
2011年にCSS2.1が正式な仕様として勧告され使われていますが、CSS3は「ワーキングドラフト」という位置付けで、まだ正式な仕様としては定められていません。
しかし2015年から2016年にかけて、CSS3は多くのWebサイトで使われはじめ、実際にCSS3はIE9やChrome・Safari・Firefoxといった主要ブラウザでも使うことができるようになっています。
まだ未完成な内容を持つ技術文書をワーキングドラフトといいます。
新しい規格・テクニカルレポートといった途中の技術文書は、まとめて議論されていきます。
CSSを使ってできる装飾
CSSを使うとHTMLに様々な装飾をすることができます。
一例として、CSSを使うことでできる装飾を５つご紹介します。
-
文字色を大きくする。
-
文字色を変える。
- 文字を太くする。
-
マウスをかざしたときに色を変える
-
マウスをかざしたときに回転させる。
CSS3が使えるようになったことで、回転や３D・アニメーションなど装飾できる幅は大きく広がりました。
他に指定できるプロパティはこちらで紹介されています。
実際にCSSを見てみよう。
いきなりCSSの書き方を覚える前に、まずはCSSがどのように書かれているのかを見てみましょう。
今、閲覧されているサイトで使われているCSSを見る方法をご紹介します。これは他のサイトでも同じ方法でCSSを見ることができます。
まず、サイトのどこかで右クリックして、メニューの中のソースコードの表示をクリックします。
するとHTMLが表示されます。
このHTMLの100行目あたりにあるこのコードをクリックしてください。
メインで使われるCSSには「style.css」と名前がつけられていることが多いです。
<link rel='stylesheet' id='style-css' href='https://akiramiyagawa.com/wp-content/themes/albatros/style.css' type='text/css' media='all' />
クリックするとCSSが表示されます。
もし見つけられなかった場合はこのサイトで使われているCSSを見るを押してください。
するとCSSが表示されます。
これがこのサイトで使われているCSSの内容です。
他のサイトで使われているCSSを見ることは、CSSを勉強するのにとてもいい方法です。
CSSファイルの作り方。
ここでは最後に、CSSファイルの作り方を紹介します。
WindowsとMacではCSSファイルの作り方が異なるので、自分の環境にあった方法で作ってみてください。
特別なソフトは必要ないので、どちらも既にインストールされているアプリから簡単に作ることができます。
CSSファイルには「.( ドット)css」と拡張子がつけられています。
拡張子とはファイルの種類を示すために使われている言葉です。
ファイルの最後に付いている「．（ ピリオド） + 英数字3文字」で表される記号です。拡張子を見ることによって、どんなファイルが見分けがつくようになります。
MacでCSSファイルを作る方法
MacでCSSファイルを作るには「テキストエディター」を使います。
Macにデフォルトでインストールしてあるこのアイコンを探してください。
テキストエディターのアイコンです。
新規作成したらフォーマットの中の「標準テキストにする」を選択します。
そしたら、CSSとわかるように下のコードをコピー＆ペーストしてください。
*{
margin:0;
padding:0;
}
ペーストしたら「コマンド + S」を押すか、ファイルから「保存」を選択してファイルを保存します。
ファイルの名前を「style.css」と付けます。
テキストエディターは標準で拡張子に「.txt」とつくようになっています。「style.css.text」とならないように、下のチェックボックスを外すようにしてください。
これでcssファイルの作成完了です。
WindowsでCSSファイルを作る方法
WindowsでCSSファイルを作るには「メモ帳」を使います。
メモ帳のアイコンです。
メモ帳を起動したらMacでの作業と同じように、CSSとわかるように下のコードをコピー＆ペーストしてください。
*{
margin:0;
padding:0;
}
そしたら「Ctrl + Sキー」を押すか、ファイルから「名前をつけて保存」を選択してファイルを保存します。
保存するときにファイル名を「style.css」とつけます。
これでCSSファイルの完成です。
これからこのファイルを使ってCSSが練習できる記事を更新していきます。
