CSSやスタイルシートと呼ばれる、ホームページの見た目を装飾する言語。CSSはホームページ制作はもちろん、ブログを運営する方にとっては理解しておくと何かと便利な言語です。
今回はそのCSSについて、最初の一歩を踏み出せる内容を解説していきます。
実際に講師としてWebデザインを教えていて「ここは押さえておいてほしいな」と感じた部分を中心にまとめてみました。
CSSとは？
CSSとは前述したように見た目を装飾する言語です。
実際に書くと下記のようになります。
p{
color: #000;
}CSSを分解していくと以下のように説明することができます。
オレンジはルール。緑は名前になります。セレクタ・プロパティ・値に関しては、文章での説明や口頭で説明する際に必要な知識になります。
1つのセレクタに複数行書く際は、プロパティ値を書いたら必ず改行します。改行する理由は見やすさです。CSSは見やすく書く必要があります。
p{
color: #000;
font-size: 16px;
text-align: center;
}複数を対象にCSSを適用したい場合は「,」カンマで区切るとOKです。
p,li,div{
color: #000;
font-size: 16px;
text-align: center;
}セレクタの種類
セレクタを書くことで、どこにCSSが効くのかを制御することができます。
セレクタの種類はたくさんあるので、学んでいきましょう。
要素セレクタ
HTML要素を指定するセレクタが要素セレクタと呼びます。
わかりやすいですね。
p{
// p要素
}
ul{
// ul要素
}ID セレクタ
HTML上でIDが記述されている場合に使うことができます。id名の前に「#」を書くことでidセレクタになります。
idはページ内に同じid名が１つまでと決まっているので、限定的なCSSを追加することができます。
他にもidセレクタは、要素セレクタやクラスセレクタ等よりも優先される特徴を持っています。
<p id="text">#text{
// idセレクタ
}クラスセレクタ
idセレクタと違い、クラス名の前に「.」ドットを書くことでクラスセレクタになります。
ページ内で何回も使うことができるので、共通のスタイルを使う際に便利ですね。
<p class="text">.text{
// クラスセレクタ
}属性セレクタ
HTML上で記述されている属性を指定できます。
カスタムデータ属性や、input等の属性を扱うと便利ですね。
<div data-color="red">div[data-color="red"]{
color: red;
}擬似要素セレクタ
CSSからHTMLに要素を追加できます。擬似要素と呼ばれるのはCSSから要素を追加できるからですね。
擬似要素にはbeforeとafterがあります。
初心者の方があまり理解できていない点を説明していきます。
CSSでは以下のように記載にします。contentプロパティが必ず必要です。値が空でも良いので、必ず記載しましょう。
ul:before{
content: "";
}
ul:after{
content: "";
}そして、初心者の方が一番理解しにくい点がこちら。
ul要素にbeforeとafterを記載するとCSSからHTMLに要素が追加されます。beforeとafterは下記のような形で指定した要素の最初と最後に擬似的に要素が追加されます。
<ul>
{before}
<li>リスト</li>
{after}
</li>他にもたくさんあるセレクタ
今回紹介した他にもたくさんのセレクタがあります。
知っていると何かと便利なので、今後セレクタのみを紹介する記事を書こうと思います。
p + p{
// 隣接セレクタ
}
p:first-child{
// 一番最初の子要素を指定するセレクタ
}
CSSを書く場所
CSSを書く場所は3つ。
時と場合によって使い分ける選択肢を持っておくことが大事です。
1. CSSだけのファイルを作る
もっとも一般的な方法が、CSSファイルを作成し記載する方法。
HTMLとCSSを別々で管理できることがメリットです。
2. HTML要素に直接書く
HTMLのstyle属性を記述します。
JavaScript等でCSSを変更した際は、この形で追記されます。
<p style="font-size: 16px">3. style要素で書く
style要素を使うことでHTML中にCSSを書くことができます。
<style>
p{
font-size: 16px;
}
</style>ショートハンドプロパティ
CSSには同じような記述をまとめて書くショートハンドプロパティという書き方が存在します。
paddingやmargin, backgroundといった同じようなことを何度も書くプロパティを書くときに便利。
書き方は下記のようになります。
p{
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
↓
p{
padding: 10px;
}まとめ
CSSを初めて学ぶ際に知っとくと良いことをまとめました。
参考になれば幸いです。