仕切り線 ようこそ、Ａ班ＨＰ勉強会のページへ！

練習問題

  • トップ
  • 事前準備
  • フォルダー構造作成
  • ビルダーの起動
  • ビルダーの初期設定
  • 編集画面の設定
  • Web ページ
  • バージョン選択
  • ページ作成
  • ファイル保存
  • ブラウザ確認
  • HTML の基礎
  • 文字の入力
  • 見出しタグ
  • 練習１ index.html
  • 段落タグ
  • 水平線の挿入
  • 練習２ dog.html
  • 強調表示
  • イメージの配置
  • リストの挿入
  • リストの入れ子
  • 著作情報
  • 区画
  • リンクの挿入
  • ページ内リンク
  • トップページ
  • CSS の基礎
  • スタイルの指定
  • 文字フォント指定
  • 文字色の指定
  • 文字位置指定
  • 背景画像
  • 画像を回り込む
  • ボーダー指定
  • 間隔・余白指定
  • 中央揃え
  • リンクの修飾
  • 対象限定スタイル
  • トップページ装飾
  • 外部 CSS
  • レイアウト
  • １カラム
  • ２カラム
  • 参考資料
  • 参加者作品
  • 問い合わせ

～対象限定のスタイル設定～

基本的な スタイルについての練習です。

練習するスタイル：　ID属性やCLASS属性対象のスタイル

ID 属性　　　　

CLASS 属性　

クラスセレクタ

ページ内に複数ある、共通化したい任意のクラス名にスタイルを定義します。

クラス名の先頭にはピリオド（.）を付ける必要があります。

  • 例
    • .c1 { width : 320px ; height : 120px ; 
    •   background-color : yellow ; }

IDセレクタ

ページ内の固有の要素に関連付けられたID名にスタイルを定義します。

ID 名の先頭にはシャープ記号（#）を付ける必要があります。

  • 例
    • #id1 { width : 320px ; height : 120px ;
    •   background-color : aqua ; }

HTML 文書の用意

➊ 次のような HTML 文書を新規に作成します。ファイル名を target00.html とし、html フォルダ―に保存します。

  • HTML ソース：
    • <!DOCTYPE html>
    • <html lang="ja">
    • <head>
    • <meta charset="UTF-8">
    • <title>対象限定のスタイル設定</title>
    • </head>
    • <body>
    • <div class="c1">ボックス１</div>
    • <div id="id1">ボックス２</div>
    • <div id="id2">ボックス３</div>
    • <div class="c1">ボックス４</div>
    • </body>
    • </html>
  •  
  • 対象限定のスタイル設定

➋ target00.html を開き、予め target01.html と名前を付けて html フォルダーに保存しておきます。

➌ 以下のようにスタイル設定を、ヘッダ内に入力します。

  • スタイル設定
    • <style type="text/css">
    • <!--
    • .c1 { width : 320px; height : 120px;
    •   background-color : yellow; }
    • #id1 { width : 320px ; height : 120px ;
    •   background-color : tomato ; }
    • #id2 { width : 320px ; height : 120px ;
    •   background-color : aqua ; }
    • -->
    • </style>
  •  
  • 対象限定のスタイル設定

➍ スタイルが設定されていることを確認し、上書き保存します。

⇒ 中央揃えへ進む

| |