スタイルシートの学習

概要｜HTMLの学習｜CSSの学習｜ JavaScriptの学習｜JavaScript(canvas)の学習｜ JavaScript(レベルアップ編)の学習｜サイトマップ｜ホーム




モード：パソコン／スマホ

CSS（Cascading Style Sheets、スタイルシート）は、文書構造にデザインを施し、 見栄え（色、配置、線、字体、サイズなど）を指定するための言語です。

ここでは、色の指定、フォントの指定、テキスト表示の指定、ボーダー（線）の指定、マージンの指定、パディングの指定、幅と高さの指定などを学びます。 参考でスタイル一覧を掲載しておりますので、ご覧ください。

Step1 基本形

HTMLドキュメントの基本形です。

  • <!DOCTYPE html>このドキュメントの始まりです。
  • HTMLの定義（<html>～</html>）をします。
  • その中にヘッダー部（<head>～</head>）と
    ボディ部（<body>～</body>を書きます。
  • 表示する内容はボディ部の中に記述します。

上記のソースコードはそのままの記述します。（おまじないです。）下記に、そのソースを示します。
実行ボタンを押すと、その内容が表示されます。

HTML　ソース　

Step2 スタイルの指定

HTML要素ごとに表示するスタイル（見栄え）を指定します。

  • 記述様式は、<要素 style="スタイル1;～スタイルn;">～</要素>で書きます。
    複数スタイルを指定する場合は;（セミコロン）で区切ります。
  • それぞれの要素に指定します。
    ・段落：<p style="スタイル1;">～段落～</p>
    ・範囲指定：<div style="スタイル1;">～範囲（ブロック）～</div>、
    <span style="スタイル1;">～範囲～</span>
HTML　ソース　

Step3 色の指定

  • color：文字色（前景色）を指定します。
  • background-color：背景色を指定します。
  • 値は、「色名」で、「#」１６進数指定、「rgb(R値,G値,B値」で値は１０進数で指定します。
    詳細の指定は、こちらを参照してください。
HTML　ソース　

練習問題１

  1. 前景色を青色に変更しましょう。
  2. 背景色を水色に変更しましょう。
  3. 背景色を青色に、前景色を黄色に変更しましょう。

Step4 フォントの指定

  • font-styleの設定は、normal:通常のフォント、italic:イタリック体フォントです。
  • font-weightの設定は、normal:通常の太さ、bold:太字。
  • font-sizeは、フォントサイズを 12pt, 24px などの単位付き数値で指定します。
    また、現状に対するフォントサイズを80%、120% などのパーセントで指定します。
  • font-familyは、フォント名を指定します。'ＭＳ ゴシック'、'ＭＳ 明朝'など。
    また、フォントの種類を表すキーワードで指定します。
    （sans-serif：ゴシック系、serif：明朝系、 cursive：筆記体・草書体系、fantasy：装飾系、monospace：等幅系）
  • 詳細はFontの設定で確認してください。
HTML　ソース　

練習問題２

  1. フォントのスタイルを、通常フォントに変更しましょう。
  2. フォントサイズを30pxに変更しましょう。
  3. フォントファミリを、ゴシック系(sans-serif)や明朝系(serif)に変更しましょう。

Step5 テキスト表示の指定

  • text-alignの指定は、left:表示領域の左端に寄せます。
    right:表示領域の右端に寄せます。center:表示領域の中央に寄せます。
  • line-heightの指定は、auto:高さを自動計算します。
    高さを 1.2 など、フォントサイズの倍数で指定します。
    高さを 1.2em や 20px などの長さの単位で指定します。
    また、高さを 100% などのパーセントで指定します。
HTML　ソース　

練習問題３

  1. 左表示に変更しましょう。
  2. フォントサイズと同じ高さに変更しましょう。

Step6 ボーダー（線）の設定

  • border-colorは線の色を指定します。指定はstep3のcolor設定と同じです。
  • border-styleは、none:線を表示せずに線幅は0になります。 dotted:点線で表示します。
    dashed:破線で表示します。 solid:実線で表示します。 double:二重線で表示します。
  • border-width:線の太さを指定します。
  • border-top/bottom/left/right-color/style/width、
    線の上　右　下　左のcolor/style/width値を指定します。
  • 値を 4つ指定した場合、それぞれは、上、右、下、左に適用されます。
    左を省略すると右と同じ値になります。下を省略すると上の同じ値になります。
    右を省略すると上と同じ値になります。
    例）border-color:上下左右:上下　左右:上　左右　下:上　右　下　左
HTML　ソース　

練習問題４

  1. 線の幅を5pxに変更しましょうましょう。
  2. 線の色を青に変更しましょう。
  3. 線のスタイルを点線にしましょう。
  4. 線を右側に引きましょう。

Step7 マージンの設定

周りのコンテンツとの間の隙間を指定します。

  • marginは、マージンを 10px, 1.5em などの長さの単位で指定します。
    マージンを 10% など、要素の大きさに対するパーセントで指定します。
  • margin-top/bottom/left/rightは、マージンの上/下/左/右を指定します。
  • 値を 4つ指定した場合、それぞれは、上、右、下、左に適用されます。
    左を省略すると右と同じ値になります。下を省略すると上の同じ値になります。
    右を省略すると上と同じ値になります。
    例）margin:上下左右:上下　左右:上　左右　下:上　右　下　左
HTML　ソース　

練習問題５

  1. 上下左右のマージンを30pxに変更しましょう。
  2. 左右のマージンを50pxに変更しましょう。

Step8 パディングの設定

内部のコンテンツとの間の隙間を指定します。

  • paddingは、パディングを 10px, 1.5em などの長さの単位で指定します。
    パディングを 10% など、要素の大きさに対するパーセントで指定します。
  • padding-top/bottom/left/rightは、パディングの上/下/左/右を指定します。
  • 値を 4つ指定した場合、それぞれは、上、右、下、左に適用されます。
    左を省略すると右と同じ値になります。下を省略すると上の同じ値になります。
    右を省略すると上と同じ値になります。
    例）padding:上下左右:上下　左右:上　左右　下:上　右　下　左
HTML　ソース　

練習問題６

  1. 上下左右のパディングを30pxに変更しましょう。
  2. 上下のパディングを50pxに変更しましょう。

Step9 幅と高さの設定

内部のコンテンツとの間の隙間を指定します。

  • width:要素の幅を、height:要素の高さを指定します。
    パディングを 10% など、要素の大きさに対するパーセントで指定します。
  • 指定する値は100px や 10em のような長さの単位や、0% のようなパーセントで指定します。
HTML　ソース　

練習問題７

  1. 幅100px、高さ100pxに変更してみよう。
  2. 高さ100pxに変更してみよう。

Step10 スタイルをまとめて指定する。

こてまでは、各要素毎にスタイルを指定しましたが、まとめてスタイルシートとして定義します。

スタイルシートの定義は、
<style>～スタイルシート～</style>で定義して、
スタイルシートは、セレクタ{　スタイル　}の組み合わせで書きます。
セレクタの使い方は下記の通りです。

  • 要素１ { スタイル }は、要素１に対して指定指定します。
  • 要素１, 要素２ { スタイル }は、要素１と要素２に対して指定します。（カンマで区切る）
  • 要素１ 要素２ { スタイル }は、<要素１>～</要素１>の中にある要素２に対して
    指定します。（スペースで区切る）
  • .名前 { スタイル }は、class="名前"を持つ要素に対して指定します。（ピリオドで開始）
  • #名前 { スタイル }は、id="名前"を持つ要素に対して指定します。（シャープで開始）
  • 要素１.名前 { スタイル }は、class="名前"を持つ要素１に対して
    指定します。（ピリオドでつなぐ）
HTML　ソース　

演習問題８

  1. #name2のスタイルをすべての要素に適用しましょう。
  2. すべて要素の文字サイズを14pt、前景色を赤、背景色を黄色に統一しましょう。

Step1１ まとめ（総合練習）

今までの学習内容を参考にして、下記の内容を作成しましょう。作成したソースは、下記のテキストボックスに張り付けて実行しましょう。

HEADER
CENTER

あなたは、HTML、CSSの基礎知識を習得しました。引き続き JavaScriptのプログラミング技術を習得してください。

FOOTER
HTML　ソース　

総合演習問題の解答はここのテキストにあります。 上のテキストボックスに貼り付けて実行してください。

概要｜HTMLの学習｜CSSの学習｜ JavaScriptの学習｜JavaScript(canvas)の学習｜ JavaScript(レベルアップ編)の学習｜サイトマップ｜ホーム