初心者でもわかるHTML&CSS講座 第3回CSSの基本
こんにちは、koheiです。
第1回、2回とHTMLの基本を学習してきました。
今日からいよいよCSSの説明をしていきます。
ダウンロードファイル
※以下ファイルをダウンロードしてください。
実際に手を動かしながら読み進めることができます。
動画解説
【更新情報】2018年10月27日動画解説を追加しました。
動画による解説です。記事内容と合わせて参考にしてみてください！
- CSSの基本・・・・動画：0分24秒ぐらいから
- 文字色を変えてみよう・・・・動画：1分18秒ぐらいから
- 文字の大きさを変えてみよう・・・・動画：6分11秒ぐらいから
- リストスタイルを変えてみよう・・・動画：9分00秒ぐらいから
- 背景色を変えてみよう・・・動画：11分00秒ぐらいから
- 演習問題・・・動画：13分35秒ぐらいから
- 演習解答例・・・動画：14分57秒ぐらいから
CSSの基本
第1回でも少し説明しましたが、CSSはCascading Style Sheetの略で、HTMLを修飾（デザイン）する仕組みのことです。
これまでHTMLでh1タグなど色んなタグを使用し、文章に意味を与えてきましたが、CSSは、そのHTMLのタグにスタイルを指定するファイルのことです。
CSSの基本書式は、以下のようになります。
セレクタは、デザイン適用先のタグ名を書きます。上記だと適用先にh2タグを指定しています。なお、セレクタは、コンマで区切って複数指定することもできます。
宣言ブロックの中には具体的にスタイルを指定する為のプロパティとその値を書きます。
いろんなプロパティの使い方をマスターすることで、色んなデザインを指定できるようになります。
それでは、次章から早速プロパティでデザインを設定してみましょう。
文字色を変えてみよう
文字色を変えるには、以下のような
colorのコロン（：）の後、色コードを16進数で設定します。（2桁ずつR,G,Bで設定します）
カラーコードは、以下のサイトなどを参考に設定しましょう。
カラーコード
練習
早速練習してみましょう。
ダウンロードファイルに「01_文字色」というフォルダがあります。その中のCSSフォルダ→style.cssに以下のコードを追加してみてください。（3行目〜33行目）
なお、#ff0000などのカラーコードは、短縮形で記載することもできます。以下のh4〜h6のcolorは短縮形で指定している例です。
また、コード中の
@charset "utf-8";
h1 {
color: #ff0000; /* red */
}
h2 {
color: #00ff00; /* lime */
}
h3 {
color: #0000ff; /* blue */
}
h4 {
color: #f00; /* red 短縮形 */
}
h5 {
color: #0f0; /* lime 短縮形 */
}
h6 {
color: #00f; /* blue 短縮形 */
}
p {
color: #01dfa5;
}
span {
color: #f78181;
}
ちなみに、本練習では、HTMLファイルはすでに以下のように記載しています。(index.html)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- ここにページの内容を書いていく --> <h1>見出しタイトル1</h1> <h2>見出しタイトル2</h2> <h3>見出しタイトル3</h3> <h4>見出しタイトル4</h4>ß <h5>見出しタイトル6</h5> <h6>見出しタイトル7</h6> <p>文字色設定の練習です。</p> <p>一部分だけの<span>色</span>を変えます</p> </body> </html>
index.htmlをダブルクリックしてブラウザで開いてみましょう。
上の画面のように、cssで設定した文字色が反映されていれば成功です。
文字の大きさを変えてみよう
次は、文字の大きさを変えてみましょう。
文字の大きさを変えるには、
サイズの指定は、pxやemを使います。
pxは、そのまま直接サイズを指定します。
emは、基準フォントサイズ(16px)から相対的な大きさを指定します。例えば、基準フォントサイズの2倍の32pxの大きさにする場合は、2.0emと記載します。
練習
早速練習してみましょう。
ダウンロードファイルに「02_文字の大きさ」というフォルダがあります。その中のCSSフォルダ→style.cssに以下のコードを追加してみてください。
@charset "utf-8";
h1 {
font-size: 48px;
}
h2 {
font-size: 2.0em; /* 基準サイズの2.0倍 16px * 2.0 = 32px */
}
p {
font-size: 20px;
}
ちなみに、本練習では、HTMLファイルはすでに以下のように記載しています。(index.html)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- ここにページの内容を書いていく --> <h1>見出しタイトル1</h1> <h2>見出しタイトル2</h2> <p>文字の大きさ設定の練習です。</p> </body> </html>
index.htmlをダブルクリックしてブラウザで開いてみましょう。
上の画面のようにcssで設定した文字サイズが表示されれば成功です。
リストスタイルを変えてみよう
リスト項目の左にあるマークのデザインを変えるには、
list-styleプロパティは、以下のような値が設定できます。
・none・・・何も表示しない
・disk・・・黒丸（初期値）
・circle・・・白抜きの丸
・square・・・黒い四角
など。
詳しくは、以下のサイトなどを参考にしてください。
スタイルシート(list-style)
練習
早速練習してみましょう。
ダウンロードファイルに「03_リストスタイル」というフォルダがあります。その中のCSSフォルダ→style.cxxに以下のコードを追加してみてください。
@charset "utf-8";
ul {
list-style: none;
}
ちなみに、本練習では、HTMLファイルは以下のように記載しています。（index.html)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- ここにページの内容を書いていく --> <h1>リスト</h1> <p>リストスタイルの練習</p> <h2>メニュー</h2> <ul> <li>カレーライス</li> <li>カツカレー</li> <li>日替わり定食</li> <li>かつ丼</li> <li>牛丼</li> <li>まる天うどん</li> </ul> </body> </html>
index.htmlをダブルクリックしてブラウザで開いてみましょう。
上の画面のようにリスト項目の左マークが非表示になっていれば成功です。
他のリストスタイルも指定して表示を確認してみてください。
背景色を変えてみよう
次は、背景色を変える方法です。
背景色は、
先ほどの文字色（clorプロパティ）同様に色コードを16進数で設定します。
こちらも以下のサイトを参考に好きなカラーコードを設定しましょう。
カラーコード
練習
早速練習してみましょう。
ダウンロードファイルに「04_背景色」というフォルダがあります。その中のCSSフォルダ→style.cssに以下のコードを追加してみてください。
@charset "utf-8";
h1 {
background-color: #ff0000; /* red */
}
h2 {
background-color: #00ff00; /* lime */
}
h3 {
background-color: #0000ff; /* blue */
}
h4 {
background-color: #f00; /* red 短縮形 */
}
h5 {
background-color: #0f0; /* lime 短縮形 */
}
h6 {
background-color: #00f; /* blue 短縮形 */
}
p {
background-color: #01dfa5;
}
ちなみに、本練習では、HTMLファイルは以下のように記載しています。（index.html)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- ここにページの内容を書いていく --> <h1>見出しタイトル1</h1> <h2>見出しタイトル2</h2> <h3>見出しタイトル2</h3> <h4>見出しタイトル4</h4> <h5>見出しタイトル6</h5> <h6>見出しタイトル7</h6> <p>背景色設定の練習です。</p> </body> </html>
index.htmlをダブルクリックしてブラウザで開いてみましょう。
上の画面のようにcssで設定した背景色が表示されれば成功です。
演習問題
最後に、今日学んだことを復習しましょう。
ダウンロードしたフォルダの中に「05_演習問題」とうフォルダがあります。以下のようなホームページが表示されるように、style.cssファイルにコードを追加してみてください。
※解答例は、「06_演習問題解答例」に入れています。参考にしてみてくださいね。
[補足]
・「サンプル食堂」の背景色は、色コード：#008000（緑）を使用しています。
・「サンプル食堂」の文字サイズは、50pxです。
・「サンプル食堂」の文字色は、色コード:#ffffff（白）です。
・「手頃な値段」の文字サイズは、標準サイズの２倍です。
・「手頃な値段」の文字色は、色コード：#ff0000（赤）です。
・「メニュー」のリストスタイルは、マークなし（none）です。
最後に
以上、第３回HTML&CSS講座でした。
今回は、CSSの基本的なプロパティを紹介しました。
次回は、CSSでレイアウトを変える方法などを説明したいと思います。
それでは！！
