Hello！ファズです。
WEB制作初心者やこれから勉強を始めたいという方に向けた記事です。
ということで、今回は『CSS』についてどういったものなのかを分かりやすくお伝えしていこうと思います。
【こんな方に読んで欲しい】
- WEB制作初心者
- WEB制作について知りたい方
- CSSについて知りたい方
【初心者におすすめの記事】
◆おすすめ有料テーマが知りたい
◆「集客」や「収益」をあげたい
◆テーマを選ぶポイントが知りたい
◆初心者でも使いやすいテーマが知りたい
CSSとは
読んでくれている方はすでにHTML編を一読済みかと思います。
まだの方はこちらから読んでいただけると理解しやすいと思うので是非どうぞ。
『CSS（読み方：しーえすえす）』。
『Cascading Style Sheets（読み方：かすけーてぃんぐ・すたいる・しーと）』を省略した読み方になります。
HTMLに使われるタグは元々の名前や、新しくid、classなどを付与することができます。
CSSファイルへ記述する際は『 id（読み方：あいでぃー）# 』、『 class（読み方：クラス）が. 』がセレクタとします。
付与した名前に対してどうしたいのか指示するのがCSSです。
例えばCSSを使うことで、HTML構文で作ったコードをデザイン通りにレイアウトしたり、アニメーションを扱ったりすることが可能です。
- idは”#”
- classは”.”
セレクタとプロパティについて
HTMLにidやclassで名前のことをセレクタといいます。
セレクタに使用されるid『#』とclass
この『セレクタ』を指定し、どうしたいかを記述『プロパティ』を書くことで表示に反映させることができます。
構文例
セレクタ {
プロパティ:値;
}上記が記述の基本的な形になります。
下記サンプル例では実際にHTMLに名前をつけて、そのセレクタ・プロパティ・値の3つを当てはめてみます。
サンプル例
<div class="sample">
このテキストの文字色を指定したよ
</div>それでは、HTMLに記述したclass名セレクタを使ってCSSを書いてみます。
.sample{
color:#c30f0f;
}以上です。
見たら初見さんでもなんとなくわかるかと思います。
書いた内容はHTMLの『sample』という要素に対し、プロパティの一つであるcolorを指定。
値を#fff（赤）に指定したシンプルな記述です。
構文は一つのセレクタを指定した後に『 {}（読み方：中かっこ又はブレース）』で囲む形で記述していきます。
下記のように、指定するセレクタが変われば次々に書き足していく形になり、指定するプロパティも{}内で『 ;（読み方：セミコロン）』で区切って追加していくことができます。
※追加時は横に続けて書いても改行して縦に書き足すでもどちらでもOKです。
書き足し記述例
<div class="sample01">
sample01のテキストの文字白と背景色黒を指定したよ
</div>
<div class="sample02">
sample02のテキストの文字色白と背景色赤を指定したよ
</div>
<div class="sample03">
文字色黒・背景色グレー・フォントサイズ16px・横幅200pxを指定したよ
</div>.sample01 {
color:#fff;
background:#000;
}
.sample02 {
color:#fff;
background:#c30f0f;
}
.sample03 {
color:#000;
background: #999;
font-size: 16px;
width: 200px;
}CSSを反映させる方法
続いてCSSを反映させる方法です。
主に3つ！
head内への記述
HTMLを記述する際に必須となるhead内に直接記述し、styleタグの中に記述していく形。
<head>
<style>
.sample01 {
color:#fff;
}
</style>
</head>インライン記述
style属性を使ってタグに直接書いていく形。
<div style="color:#fff;background:#000;">サンプルテキスト</div>外部ファイル化
専用のcssファイルを作り、その中に記述していく形。
記述が多くなりがちなCSSでは一般的に利用されている方法で、linkタグを使うことでHTML側へ読み込ませることができます。
<head>
<link rel="stylesheet" href="ここにパスルート/ファイル名.css" type="text/css">
</head>読み込まない！cssが読み込み・反映されない原因と解決法を紹介
CSS書き方・読み方：まとめ
上記が理解できればあとはセレクタの書き方やプロパティを調べてHTMLを組み立てていくことができると思います。
ちなみに、昔からあることですが、プロパティの中には読み方が人によって異なるものがたびたびでてくると思います。
読み方に関して強要はしませんが、複数人でコードを触ることもあるので呼び名の統一もある程度必要と思ってください。
下記まとめ。
- idの読み方：あいでぃー
- classの読み方：くらす
- CSSはHTMLを操作、レイアウトできる
- idやclassでセレクタ名をつける
- CSSの記述場所は3箇所
初心者の方は読み込んで取り組む方が多いですが、コピペでもいいので実際にまずは手を動かして触ってみることをおすすめします。
HTMLも同様CSSは簡単であり奥深い言語で学んでいくとより設計が必要になってきます。
そのためには要領や経験を積むということが必須。
もし、これから勉強しようと考えている方の中で、独学が難しいと感じる方はオンラインスクールを活用してみるのもおすすめです。
オンラインスクールで勉強の仕方や仕事の進め方を学ぶだけでも独学にも繋げることができますし、最後まで修学すればそのまま転職してキャリアに繋げる、あるいはキャリアップすることも可能です。
コメント