この記事はこんな方におすすめです
- WEBデザインを始めたい方
- プログラミング（マークアップ）をはじめたい方
- WEBデザイナーに仕事を依頼する立場にある方
- ワードプレスをカスタマイズしたい方
こんにちはデザイナー/アートディレクターのnobuです。
当ブログは「専門学校級を無料で」をコンセプトにデザインに関する記事をまとめています。
前回より、nob流「ゼロからはじめるWEBデザイン」を連載しています。この講座を実践することで、WEBデザイン・コーディングの基礎知識が身につき「調べればわかる」という状態に持っていくことができます。
「調べればわかる」はとても大きいです！現役のコーダーでも検索しないということはありません！
今回はCSS編になります！
ロードマップの確認
前回は文字や画像を表示するHTMLについてでしたが、今回はHTMLを装飾するCSSについて解説します。
プログラミング(マークアップ)言語
プログラミング(マークアップ)言語には様々な種類がありますが、CSSもその一つです。
ちなみにプログラミングスキルは世界共通です。
CSSってなにができるの
CSSはHTMLと組み合わせて使い、文字サイズを指定したり、色を変えたり、場所を変えたりできます。
HTMLのみだとインターネット黎明期のような平成初期感が漂いますね！
Webサイトを表示する仕組み
WEBサイトはHTMLやCSSをレンタルサーバーなどにアップし、それをパソコンやスマホで表示します。とりあえずはローカル（パソコン上）でフォルダの中身を構築していきましょう！
実際にCSSを動かしてみよう
まずはHTMLにCSSを読み込ませてみましょう！
前回のhtml編で作成したindex.htmlを使って解説します。
前回ご紹介した、atomなどのエディタは導入いただけましたか？miやメモ帳でも実装は可能ですがタイミングでエディタの導入をおすすめします！
CSSを動かす流れ
- 新しいCSSファイルを作成
- htmlとCSSを同じフォルダに入れる
- htmlにCSSを読み込ませる
- ブラウザで表示する
それでは実際にやっていきますね！
①CSSファイルを作る
新しいファイルを作成し、下のコードをコピペして「style.css」という名前で新規保存します。（もちろん書いてもOKです！）
@charset "UTF-8";
/* CSS Document */
/*ここから上はとりあえず呪文でOK*/
p {
color: red; /*p要素を赤くする*/
}②フォルダにまとめる
保存した「style.css」と、前回の「index.html」を同じフォルダにまとめます。ここではフォルダ名を「practice(任意)」としておきましょう。
③CSSを読み込む
「index.html」を開いて<head></head>タグ内に下記5行目のコードを追加します。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css"> /*cssをhtmlに読み込む呪文を追加*/
<title>タイトル</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>5行目のコードが外部ファイルである「style.css」をHTML内に読み込む呪文になります。
今回はhtmlとcssが同じフォルダにあるのでこの表記でOKです！ファイル階層(パス)については画像の指定方法と同じです！こちらで詳しく解説しています！
④ブラウザで表示する
「index.html」を上書き保存して前回同様、ブラウザにドラッグ＆ドロップすると赤いHello Wroldが出力されます。（index.htmlを開いたブラウザがあれば更新（⌘ or control+R）でOKです！）
See the Pen by seison waten (@capplus1-design) on CodePen.
お疲れ様でした。今回は「pタグの色を赤くする」という指示が書いてあるcssファイルをhtmlに読み込ませました。
読み込んだCSSを編集することでHTMLをスタイルすることができます。
CSSを読み込ませる方法は複数ありますが、この方法がポピュラーです！
CSSの文法
具体的なCSSの書き方を解説します。
セレクタ
セレクタにはhtmlタグやid、classを指定します。idやclassについては次項で詳しく解説します。
プロパティ：値
セレクタに対してどういうスタイルを行うかを指定します。
プロパティには沢山の種類があり、指定するプロパティにより値も様々です。
プロパティ：値の例
- color: red (色は赤)
- width: 100% (幅は100%)
- margin: 10px（余白を10px）
1つのセレクタに複数のプロパティを適用できます。
複数のプロパティを指定しながらレイアウトや装飾を行います。
まずは主要なプロパティ9個とその値を覚えましょう！
ぶっちゃけ値などの細かいところは流しで大丈夫です。ググってるうちに覚えていきます！
※主要なCSSプロパティはprogateのHTML & CSS初級編でも学ぶことができます！
CSS編ⅰまとめ
- HTMLをCSSで装飾できる
- HTMLにCSSを読み込むことで編集やプレビューが可能
- CSSの文法は基本的に セレクタ{プロパティ:値;}
ある程度HTMLやCSSに慣れてきて、複数のページを作っていると「CSSファイルって複数作っていいの？」や「これってここに書くので正しいの？」といった疑問がでてくることがあります。
そんな時は、「ブラウザはただ上からコードを読み込んでいるだけ」と考えると腹落ちすると思います。
皆さまご存知の通りWEBデザインの歴史は浅く、まだ誕生から半世紀も経っていません。そんな短い歴史の中でコーダー達がそれぞれ開拓してきたという経緯もあります。（2000年代のtableレイアウトなどはもはや裏技？？）
WEBデザイナー特有の「ガンガン共有しよう！」という姿勢や、ブラウザの仕様変更等によってガイドライン整備は進んでいますが、「思った通りに表示されていれば中のコードはとりあえずOK！」という側面もあります。制作から管理までソロで作業するのであれば、SEO対策などは必要ですがそれで十分だと思います。
「扉は開けたら閉めましょう」のようなニュアンスの決まり事もありますが、その辺は気がついたところから直していけばいいと思います。
もちろん、チーム作業や引き継ぎがある場合などはわかりやすくした方がいいです！その辺は場所にもよると思うのでとりあえずbootstrapを覚えておけばOKだと思います！後章で詳しく解説します！
