CSSとは？CSSの基本
CSSとは？
CSSとは、Cascade Style Sheetの略称で、Webページの装飾に使用される言語です。
HTMLによって記述された文書を装飾することを基本とし、文字サイズの調整や背景色、グラデーション、影など様々な方法でWebページを装飾することができます。
CSSの書き方
cssのスタイルは基本的にセレクタとプロパティからなり、以下のような書き方になります。
// [セレクタ] {
// [プロパティ]: [設定値];
// }
p {
font-size: 14px;
}
.container {
padding: 30px;
border: 1px solid lightgray;
}
#header {
width: 100%;
}セレクタでスタイルを適用するhtmlのタグやclass属性,id属性を指定し、プロパティでどういったスタイルを当てるのかというのを決めていきます。
セレクタの指定の仕方は
.[クラス属性]
#[id属性]
となり頭に何もつけない場合は、htmlタグ自体を表します。それぞれ繋げてセレクタを指定して書くこともでき,以下のような場合は、h1タグの"site-title"属性の要素をfont-size = 20 px とするという意味になります。
h1.site-tile {
font-size: 20px;
}
CSSを書く場所について
一番簡単なcssの書き方は次のようにHTMLのstyle属性にcssを書いていく方法ですが、これはあまり好ましくありません。
<p style="font-size:30px;"></p>そのほかにも、htmlのbodyタグの直前にstyleタグを差し込む方法もあります。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>お客様情報入力画面</title>
</head>
<body>
<div class="container">
~ 略 ~
</div>
<style>
.container {
display: flex;
justify-content: center;
align-content: center;
margin-top: 30px;
}
~ 略 ~
.btn{
padding: 5px 20px;
background-color: navy;
color: white;
font-weight: bold;
}
</style>
</body>
</html>
こちらの方が最初の方法よりはましですが、ほとんどのweb開発では別ファイルに分けて開発を行います。別ファイルに分ける場合は、htmlに外部のcssファイルを読み込む旨の一行を足すだけですみます。
<link rel="stylesheet" type="text/css" href="example.css">ここまで紹介して、最初と二番目の方法が好ましくない理由を書くと通常Webページというのは一枚でおさまることは稀で複数ページが必要になります。このときにあるページの一つのタグにスタイルを書き込んでいくと当然そこにあてたスタイルはそこでしかつかえなくなります。
例えば、自身が一生懸命デザインしたボタンを色々なページで使いたいとなった時に、使いたいページ全てにCSSを書き込む必要がありますが、最後の外部からファイルを読み込む形だとボタン専用に作ったクラスだけをボタンタグのクラス属性に当てるだけですみます。
また、Webページは一度作って終わりということも少なくデザインに何らかの変更が加わった場合に全てのページのhtmlをチェックして、cssを変更していくことは大変骨の折れる作業になります。
cssではタグを直接指定してスタイルを適用することができますが、なるべく専用のクラスを定義してそのクラスをhtmlにあてていくという考え方が変更に強いcssを書く上で重要になります。
まとめ
ここでは、cssの込み入った話までは踏み込みませんでしたが、一通りcssの基本的なか書き方と変更に強いcssの書き方、書く場所というのを紹介しました。CSS自体は、割と簡単な構造の言語ですが色々試してみるとアニメーションが再現できたり立体的な表現やレスポンシブ対応など様々なことができるようになります。機会あればそういった部分も今後紹介していくのでたのしみにして頂ければと思います。