Skip to main content

CSSを理解しよう

目標

CSSとはどういうものか理解できる

CSSって何？#

CSSは、Webページのデザインやレイアウトなどの見た目を変えていくためのコンピュータ言語です CSSがないWebページはこのようになります。

CSSを使うとこのようになります。 CSSを使うとWebページの見た目を自分の好きなように変えることができます。

CSSはどこに書くのか#

CSSは多くの場合HTMLとは違うファイルに記述します。 今回はstyle.cssというファイルが用意されているのでこのファイルを使います

CSSの使い方#

変えたい場所のHTMLを確認#

例: 「XX高校第23回文化祭」の文字の色とサイズを変えたい場合

<h1></h1>が使われています

style.cssにh1の色とサイズを変えるCSSコードを追加#

style.cssの一番下にCSSを追加します。

h1 {    color: blue;    font-size: 80px;}

表示が変わりました！

CSSの書き方#

h1 {    color: blue;    font-size: 80px;}
  1. HTMLタグの名前を書く
  2. { }を書く
  3. デザインの種類を書く　例「color」
  4. 「color: blue;」の「:」と「;」を忘れずに書く

カラーコード#

文字の色を変える時は色の名前かカラーコードを使います。 カラーコードは色ごとに決まっている記号です。#+6ケタの英数字で書きます。 カラーコードは膨大なので、WEB色見本 原色大辞典 からコピーして使いましょう

色の名前を使った書き方#

h1 {     color: blue;     background-color: green;     }

カラーコードを使った書き方#

h1 {     color: #0000ff;     background-color: #008000;     }

復習

HTMLは『タグ』を使ってWebページの文章を書く

CSSでデザインを足します

他のCSSもみてみよう#

h2#

h3#

body#

実際にやってみよう

『世界の女性リーダーたち』の文字色と文字の大きさを変えてみましょう