HTML 入門トップページ

« 戻る 次へ »

目次

  1. ホームページ作成はじめの一歩
  2. HTMLの基礎
  3. 基礎的なタグをマスターしよう
  4. HTML 文書を検証してみよう
  5. スタイルシート
    1. CSS ファイルを準備する
    2. CSS ファイルを読み込む
    3. 表示を確認しておこう
    4. CSS にデザインを記述する
    5. 複数のセレクタに適用する
    6. classを使う
    7. 表のデザイン
    8. 図のデザイン
    9. HTML内にスタイルを記述する
  6. フォームを使ってみよう
  7. 参考サイト

スタイルシート

図のデザイン

ここで説明したように，img タグで図や写真を配置することが可能です． 

index.html（抜粋）
<img src="tissot.jpeg" width="284" height="160" alt="tissot">

ブラウザでの表示結果

style-img-01

図の周囲に境界線を入れるためには，スタイルシートに次のように記述すると良いでしょう．例えば，周囲（上下左右）に1ピクセル (1px) の太さで黒色 (#000000) の実線 (solid) を入れます． 

style.css（抜粋）
img {
  border: 1px solid #000000;
}

ブラウザでの表示結果

style-img-02

上下左右で個別に太さ（線種，色）を指定するには次のようにします． 

style.css（抜粋）
img {
  border-top:     3px solid skyblue;
  border-bottom: 10px solid green;
  border-left:   15px solid purple;
  border-right:  25px solid gold;
}

ブラウザでの表示結果

style-img-03

次に，影を入れて立体感を表現することを考えます．次の例では右方向に20px，下方向に50pxずらした，「ぼかし距離」0px の四角形の影 (box-shadow) を半透明の黒 (rgba(0, 0, 0, 0.4)) で配置します． 

style.css（抜粋）
img {
  box-shadow: 20px 50px 0 rgba(0, 0, 0, 0.4);
}

ブラウザでの表示結果

style-img-04

上のスタイルで「ずらし距離」と「ぼかし距離」を調整すると，画像の右下方向に影を表現でき，立体感が得られます． 

style.css（抜粋）
img {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
}

ブラウザでの表示結果

style-img-05

枠線と影の両方を指定すると次のような結果になります． 

style.css（抜粋）
img {
  border: 1px solid #000000;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
}

ブラウザでの表示結果

style-img-06

このようにスタイルシートを利用すれば，Web サイト全体のデザインを統一することができ，デザインの変更をするときにも CSS を書き換えるだけで一気にできることを理解しよう．

« 戻る 次へ »