学生新規登録

CSS基本①認定

認定問題概要
タイトル
CSS基本①認定
制限時間
60分
問題数
全10問
合格ライン（正解率）
70％
出題範囲
  1. CSSのセレクタ指定（子要素）
  2. 上下左右に要素を揃える(position)
  3. CSSのセレクタ指定（複数のセレクタ）
  4. CSSのセレクタ指定（子孫要素）
  5. 奇数個目のセレクタ指定
  6. 高度なセレクタ指定
  7. クラスセレクタの指定
  8. idセレクタの指定
  9. 詳細度の加算
  10. 偶数個目のセレクタ指定
  11. CSSのフォント指定
  12. CSSとSEO対策
  13. グリッドデザイン
  14. CSSのコメントアウト
  15. 色の指定方法
  16. レスポンシブ
  17. CSSの詳細度
  18. floatを使って要素を横並びにする
  19. ボックスモデル
  20. 上下左右に要素を揃える(table-cell)
  • 問1/10

    クラスセレクタの正しい使用方法はどれか

  • 問2/10

    次のように記述したときに,色が赤に変わるテキストはどれか

    <!DOCTYPE html>
    <html lang="ja">

    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div p {
    color: red;
    }
    </style>
    </head>

    <body>
    <section class="colorBox">
    <div class="header">
    <p >テキスト1</p>
    </div>
    <div class="body">
    <p>テキスト2</p>
    <p>テキスト3</p>
    </div>
    </section>

    <p>テキスト4</p>
    </body>
    </html>

  • 問3/10

    次のようなHTMLがあったときに,テスト2, 4, 6, ...と奇数個目要素だけ赤色に変更したい。
    正しい,CSSはどれか。

    <!DOCTYPE html>
    <html lang="ja">

    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>

    <body>
    <ul>
    <li>テスト1</li>
    <li>テスト2</li>
    <li>テスト3</li>
    <li>テスト4</li>
    <li>テスト5</li>
    <li>テスト6</li>
    <li>テスト7</li>
    <li>テスト8</li>
    <li>テスト9</li>
    <li>テスト10</li>
    </ul>
    </body>
    </html>

  • 問4/10

    次のHTMLで,hello word文字列を上下中央揃えしたい。正しい,設定の組み合わせはどれか。

    <!DOCTYPE html>
    <html lang="ja">

    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box {
    position: relative;
    height: 160px;
    }

    #box .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    ①
    ②
    }
    </style>
    </head>

    <body>
    <div id="box">
    <div class="icon">
    <p>hellw world</p>
    </div>
    </div>
    </body>

    </html>

  • 問5/10

    次のHTMLを実行したときに,結果はどうなるか。

    <!DOCTYPE html>
    <html lang="ja">

    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    a {
    color: #fff;
    padding: 15px;
    }

    a#btn {
    background-color: blue;
    }

    a.active {
    background-color: red;
    }

    a#btn.active {
    background-color: gray;
    }
    </style>
    </head>

    <body>
    <a href="#" id="btn" class="active">ボタンをクリック</a>
    </body>

    </html>

  • 問6/10

    次のHTMLを使って,要素を左右に配置したい。①②に当てはまる適切な組み合わせはどれか。

    <!DOCTYPE html>
    <html lang="ja">

    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #container {
    background-color: gray;
    width: 700px;
    }

    .box {
    width: 330px;
    height: 250px;
    border: 1px solid black;
    }

    #left-contents {
    ①
    }

    #right-contents {
    ②
    }
    </style>
    </head>

    <body>
    <div id="container">
    <div id="left-contents" class="box">
    左側のコンテンツ
    </div>
    <div id="right-contents" class="box">
    右側のコンテンツ
    </div>
    </div>
    </body>

    </html>

  • 問7/10

    idセレクタの正しい指定方法はどれか

  • 問8/10

    次のようなHTMLを使って,hello worldという文字列を枠の中に上下左右の余白が均等になるように配置したい。
    ①・②に組み合わさるもので正しいものはどれか。

    <!DOCTYPE html>
    <html lang="ja">

    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #box {
    display: table;
    width: 330px;
    border: 1px solid black;
    }

    #box .text {
    display: table-cell;
    height: 160px;
    ①
    ②
    }
    </style>
    </head>

    <body>
    <div id="box">
    <p class="text">hello wordl</p>
    </div>
    </body>

    </html>

  • 問9/10

    CSSのレスポンシブ対応について,間違っているものをどれか

  • 問10/10

    ボックスモデルの用語について,正しい説明しているものはどれか