CSSの基礎知識
プログラミングを学習するにあたって、ほとんどの人がHTMLの次に学習するCSSについてまとめました。
CSSとは
CSS（Cascading Style Sheets）とは、HTMLのタグで囲んだ範囲の文字の色・大きさ・背景の色や配置などを指定するための言語です。
機能
HTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されます。
つまり、CSSはHTMLに色や大きさや背景などを加えて見栄えを良くするものです。
文書構造とスタイル指定を分離
現在はHTMLだけでウェブページの見栄えを制御することもできます。
しかし、様々な不都合性が生じるため、ウェブページのスタイリングにHTMLを用いることは少なくなっています。そのため、HTMLでは文字・構造のみを作成し、 CSSではスタイルを指定することが推奨されています。
CSSでできること
具体的には、CSSを使ってウェブサイト上に以下のようなことができます。
- 指定した場所の文字サイズの大きさを変えることができる。
- 文字の色や背景色を変えることができる。
- 余白を作ることができる。
CSSの書き方の基本
CSSというプログラミング言語はHTMLのタグの「何を」「どうするのか」を記述しています。
具体的には
「○○{
△△: ▢▢;
}」
が基本形です。
それぞれに以下のような内容を記載していくことになります。
- ○○（「セレクタ」という） 調整をするHTMLのタグを指定する
- △△（「プロパティ」という） デザインの内容を指定する
- ▢▢（「値」という） プロパティの変化させる程度を指定する。
CSSの書き方具体例
上記の基本形に以下のプログラムを代入すると具体的に動きます。内容を見て理解できるか確認をしてみてください。
○○ △△ ▢▢
【背景を黒くする】
Body background-color black
【文字色を白にする】
h1 color white
【フォントサイズを25pxにする】;
h1 font-size 25px
【フォントの太さをboldにする】
h1 font-weight bold
【外の余白を上下50pxに、左右は均等にする】
h1 margin 50px auto
【中の余白を上下左右余白を15pxにする】
h1 padding 15px;
【幅を300pxにする】
h1 width 300px
【半径20pxの正円の円弧をベースにした角丸を実装】
box1 border-radius 20px;
【外の余白を上0に左右均等に下30pxにする】
box1 margin 0 auto 30px;
【高さを150pxにする】
box1 height 150px;
CSSの書き方の注意点
以下の点は忘れると、プログラムがうまく作動しないので、気をつけてください。
- プロパティと値は「{ }」で必ず囲んでください。
- 「：」が抜けてないように注意してください。
