今回は「CSS」について勉強していきます。
1.CSSとは
Cascading Style Sheetsの略でHTMLで記述された文章にレイアウトをしていくマークアップ言語です。
カスケードには連続する滝という意味や縦つなぎという意味があり、CSSの「Cascading」では要素や属性など引き継ぐという意味があるようです。
HTMLとは本来用途が異なる為、HTMLの記述から分離されています。
どういうかというと、HTMLとCSSを混ぜて書くと非常に見づらくなりレイアウトも間違いが起こりやすくなります。
なのでCSSは別ファイル（拡張子は.css）で作成しファイルを読み込むようにします。
実際には、HTMLの<head></head>の中に下記の<link>タグを使用して書式を記述してCSSを読み込めるようにしていきます。
<link rel=”stylesheet” href=”ファイル名.css” type=”text/css” />
2.書き方
<style>~<style>の中に記述します。
またスタイルシートの種類を指定するため<style>タグの中でtypeを「text/css」とします。
※HTML5は<style>の属性はデフォルトで「text/css」となっていますので省略可能。
ルールとしては、
・１行に１文でセミコロン;で改行を行う
・字下げを意識する
<></>の中にタグを入れ子をする際はTABを使用し字下げを行う。
TABキーでの字下げは基本４TABといって４回スペースキーを押した際と同じスペースができるとのことですが、字下げは現場によってルールが変わるのでその都度確認した方が良さそうです。
まだ現場に出ていない私には、感覚が掴みづらいですが意識をしながら勉強していきたいと思います。
書式はこんな感じで書く↓
h1 {
color : red
}
説明は図にて
こう入力を行うことでと見出しが赤くなります。
colorを16進数で指定すれば理想の色を出すことができます。
こちらをご参考ください。
サイトお借り致します。
プロパティの値は、
・サイズ
・種類
・色
・揃え
・飾り
などが設定出来ます。
それぞれの値は覚えるのが大変なのでその都度サイトなどで検索をすることがオススメ。
まとめ
今回はCSSの入門としての基礎を書きました。
今後もまた学習したことを書いていきたいと思います。
このサイトのデザインも少しづついじってみようかな！
駆け出しエンジニア けいこ♂
コメント