CSSって何?CSSの基礎知識とファイルの作り方【初級編】

CSSの基本的な書き方を練習ファイル付きで紹介しています。



「CSSを覚えたいけど何から始めたらいいかわからない」という方へ向けて、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が使われています。

WebサイトはHTMLとCSSが必須です。

CSSにはバージョンがある

CSSには、CSS2.1とCSS3のバージョンがあります。

2011年にCSS2.1が正式な仕様として勧告され使われていますが、CSS3は「ワーキングドラフト」という位置付けで、まだ正式な仕様としては定められていません。

しかし2015年から2016年にかけて、CSS3は多くのWebサイトで使われはじめ、実際にCSS3はIE9やChrome・Safari・Firefoxといった主要ブラウザでも使うことができるようになっています。

ワーキングドラフトとは
まだ未完成な内容を持つ技術文書をワーキングドラフトといいます。
新しい規格・テクニカルレポートといった途中の技術文書は、まとめて議論されていきます。

CSSを使ってできる装飾

CSSを使うとHTMLに様々な装飾をすることができます。

一例として、CSSを使うことでできる装飾を5つご紹介します。

  • 文字色を大きくする。
  • 文字色を変える。
  • 文字を太くする。
  • マウスをかざしたときに色を変える
  • マウスをかざしたときに回転させる。

CSS3が使えるようになったことで、回転や3D・アニメーションなど装飾できる幅は大きく広がりました。

他に指定できるプロパティはこちらで紹介されています。

CSSのプロパティ一覧

実際にCSSを見てみよう。

いきなりCSSの書き方を覚える前に、まずはCSSがどのように書かれているのかを見てみましょう。

今、閲覧されているサイトで使われているCSSを見る方法をご紹介します。これは他のサイトでも同じ方法でCSSを見ることができます。

 

まず、サイトのどこかで右クリックして、メニューの中のソースコードの表示をクリックします。

cssの使い方について紹介していきます。

 

するとHTMLが表示されます。

このHTMLの100行目あたりにあるこのコードをクリックしてください。

cssの使い方について紹介していきます。

 

メインで使われる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ファイルの作り方。

ここでは最後に、CSSファイルの作り方を紹介します。

WindowsとMacではCSSファイルの作り方が異なるので、自分の環境にあった方法で作ってみてください。

特別なソフトは必要ないので、どちらも既にインストールされているアプリから簡単に作ることができます。

 

CSSファイルには「.( ドット)css」と拡張子がつけられています。

拡張子とは
拡張子とはファイルの種類を示すために使われている言葉です。
ファイルの最後に付いている「.( ピリオド) + 英数字3文字」で表される記号です。拡張子を見ることによって、どんなファイルが見分けがつくようになります。

MacでCSSファイルを作る方法

MacでCSSファイルを作るには「テキストエディター」を使います。

Macにデフォルトでインストールしてあるこのアイコンを探してください。

テキストエディターのアイコンです。

テキストエディターのアイコンです。

新規作成したらフォーマットの中の「標準テキストにする」を選択します。

MacでCSSファイルを作る方法を紹介しています。

 

そしたら、CSSとわかるように下のコードをコピー&ペーストしてください。

*{
  margin:0;
  padding:0;
}

 

ペーストしたら「コマンド + S」を押すか、ファイルから「保存」を選択してファイルを保存します。

MacでCSSファイルを作る方法を紹介しています。

 

ファイルの名前を「style.css」と付けます。

テキストエディターは標準で拡張子に「.txt」とつくようになっています。「style.css.text」とならないように、下のチェックボックスを外すようにしてください。

MacでCSSファイルを作る方法を紹介しています。

 

これでcssファイルの作成完了です。

WindowsでCSSファイルを作る方法

WindowsでCSSファイルを作るには「メモ帳」を使います。

Windowsのメモ帳のアイコンです。

メモ帳のアイコンです。

 

メモ帳を起動したらMacでの作業と同じように、CSSとわかるように下のコードをコピー&ペーストしてください。

*{
  margin:0;
  padding:0;
}
Windowsでcssファイルを作る方法を紹介しています。

 

そしたら「Ctrl + Sキー」を押すか、ファイルから「名前をつけて保存」を選択してファイルを保存します。

Windowsでcssファイルを作る方法を紹介しています。

保存するときにファイル名を「style.css」とつけます。

Windowsでcssファイルを作る方法を紹介しています。

これでCSSファイルの完成です。

 

これからこのファイルを使ってCSSが練習できる記事を更新していきます。