-
HTML/CSS
- css
- 初心者
【Web制作初心者】CSSを基礎から効率よく学ぶための方法
CSSはWebサイトの見た目を整えるために必須の言語です。HTMLで作成したマークアップに、文字色や背景色、要素の配置など外観やレイアウトを整えるために使用されます。
本記事ではCSSを効率よく学ぶ方法についてまとめてみました。
これからWeb制作を始めたい人の参考になれば幸いです。
それでは始めていきます。
CSSを基礎から効率よく学ぶには
まずは基礎を知り、使いながら学ぶのが効率的と考えます。
CSSはHTMLとセットで学ぶ事が多いです。
学び方の流れを紹介していきます。
基礎を知る方法
基礎を知るにはWebサービス、書籍、スクールが一般的です。
先述した通り、HTMLとセットで学ぶ事が多いので、以下の記事と同様の流れで基礎学習する事をおすすめします。
Webサービスは現在様々なものがありますが、基礎学習にはProgateやドットインストールがおすすめです。
書籍は１冊買って、一通りやってみる事。（Webサービスだけでは不安な方は買ってみるべきです）
スクールについては値段は掛かりますが、基礎〜実践まで体系的に学べる事が多く、挫折しにくい環境が得られる点が大きなメリットです。
基礎学習は突き詰めたらキリがないので、完全に理解出来なくても大丈夫です。
効率よく学ぶ方法
効率よく学ぶには、実際にWebサイトを作ってみるのが一番です。
おすすめのWebサイト制作習得までの流れは、「写経」→「模写」→「デザインカンプからコーディング」です。ここまで出来れば仕事を受けられるレベルです。
「写経」については、答えのコードがある状態なので挫折しにくいですが、
実際のWebサイトを真似して制作する「模写」をやっていくと悩む事が増え、挫折しやすくなります。
この際に作りたい！と思ったサイトを選ぶ事、最初から完璧を目指さない事が挫折しないポイントです。
効率よく学ぶ方法とはいえ、色々なWebサイト制作に挑戦し、繰り返しコードを書く事が遠回りのようで近道だったりします。
セレクタ、プロパティについて深掘りする
セレクタにはどんなものがあって、プロパティで何ができるかを考えて使用しましょう。
基本構造
セレクタ {
プロパティ: 値;
}CSSの基本構造は上記の通りです。
セレクタにはHTMLのタグ、id名、class名、全セレクタ、擬似要素などが入ります。
以下のサイトでどんなセレクタが存在するか確認できます。
プロパティには指定したセレクタをどう変化させたいかを記述します。
プロパティによって値の内容は変わってきます。
セレクタの使用例
/*HTMLのpタグの文字を赤くする*/
p {
color: red;
}
/*HTML内のclass=header_navを横並びにする*/
.header_nav {
display: flex;
}
/*HTML内のid=exampleの色を変える*/
#example {
color: #ffcc00;
}上記のように指定したタグやid名、class名といったセレクタ名後の{}内に、
プロパティ:値を入れる事でHTMLを装飾します。
よく使われるプロパティについて
| プロパティ | 操作 | 値（代表例） |
|---|---|---|
| color | 文字色を | red, blue, #FFFFFF |
| display | 表示形式 | block,none,flex |
| font-size | 文字の大きさ | 〇px, 〇em,〇vw |
| text-align | 文字の配置 | left, center, right |
| padding | 余白(borderの中) | 〇px,〇 % |
| margin | 余白(borderの外） | 〇px,〇 % |
| border | 枠線 | 色(blue, red) 太さ(〇px）形式(bold) |
| position | 配置 | relative, absolute |
よく使われるプロパティを上記に挙げてみました。
実際にはもっとたくさん使用する事になります。その都度調べていきましょう。
CSSのルールを理解する
CSSを指定するために、ルールやレスポンシブなど理解する必要があります。
CSSの優先度を知る
プロパティを指定しているのに、変化しないというケースが多々あります。
以下の例では、同じ要素に対して「idでは黒色、classでは白色」になるように指定しています。
今回、同一タグに同一プロパティを指定すると、idが優先されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
#kuro {
color: #000000;
}
.shiro {
color: #ffffff;
}
</style>
</head>
<body>
<p id="kuro" class="shiro">色はどちらかな？！</p>
</body>
</html>以下のように、黒字で出力されます。
通常、classが２つなら後の方が優先されますが、idの方が優先度が高いため、このような結果となります。
idとclassのプロパティ値を逆にすると、文字が白くなります。
このように優先順位には要注意です。
以下の記事に詳しく記載されています。
レスポンシブデザインを理解する
現代ではWebサイトの60％以上はスマホから見られています。
Web制作をする上では、パソコンでの表示メインではなく、スマホでの表示を優先的に考える必要があります。パソコン画面のまま縮小してしまうと、スマホでは小さすぎて見にくくなったり、画面が見切れてしまうサイトも現状存在します。
これからサイト制作をするに当たっては、スマホ画面をベースに考える事が多いです。PC画面では横並び、スマホ画面では縦並びといったようにレスポンシブデザインの切り替えを理解しましょう。
レスポンシブ対応にはCSSでメデイアクエリと呼ばれる指示を出します。
以下の例では、スマホ画面（横幅480px以下）では画像の幅を100％とするというCSSです。
@media screen and (max-width: 480px) {
img {
width: 100%;
}
}逆に@media screen and (min-width: 480px) { }と書くと横幅480px以上での指示となり、スマホ以上の画面表示となります。
レスポンシブ対応に慣れ、閲覧者に見やすいサイト制作を目指していきましょう。
まとめ
今回はCSSを基礎から効率よく学ぶ方法でした。
CSSは簡単に扱えますが、奥が深く、一筋縄では行かないケースもあります。
まずはどんな事ができるのかを理解し、調べながら実装していけば上達していけます。
大切なのは学習で完璧を目指さない事。
サイト制作を通じて覚えていきましょう。
