webページのつくり方 | 学びの道

webページのつくり方、web制作、web作成、学びの道を歩み中!フェリカテクニカルアカデミー「東京・池袋」にてWeb作成を勉強中です。学んだ事をメモしていきます。

CSS3 演習問題

CSS3 演習問題

問題。

【問1】CSS3で影をつける場合の、プロパティ名を書きなさい

 

【問2】CSS3で影をつける場合、プロパティに設定する4つのパラメータ

   のうち、1つ目のパラメータは何を設定するか書きなさい

 

【問3】CSS3で角を丸くする場合の、プロパティ名を書きなさい

 

【問4】CSS3で角を丸くする場合の、値は何を設定しているかを書きなさい

 

【問5】Chromeとサファリのベンダープレフィックスを書きなさい

 

【問6】CSS3で直線的なグラデーションをつける場合の、プロパティを

   書きなさい(ベンダープレフィックスは、記述しない)

 

【問7】半透明の表現をするには、対象の要素に対してどの関数を設定すれば

   よいか書きなさい

 

【問8】CSS3で要素を回転したり、拡大縮小したり、歪曲させること設定する

   プロパティは何か書きなさい

 

【問9】Webの通常フォント以外のフォントを使用したい場合、どの

   ディレクティブで使用するフォントを定義する必要があるか書きなさい

 

【問10 】次のスタイルは、どのような設定か説明しなさい

     td:nth-child(n+2) { text-align: right; }

 

【問11 】次のスタイルは、どのような設定か説明しなさい

      tr:nth-of-type(even) { background-color: #F3F3F3; }

 

【問12 】CSS3で要素を回転して表示する設定を書きなさい

   (ベンダープレフィックスは、記述しない)

 

【問13 】:first-childセレクタは、どのようにスタイルを設定しているか

   書きなさい

                                                                                                                                   

答え

【問1】box-shadow,text-shadow

※二つ書けて〇です!(^^)

 

【問2】X軸方向(横方向)のずれの距離

  text-shadow:x軸 Y軸 シャドウの幅 シャドウの色;

 

【問3】border-radius

 ※考え方としては、図形の外側の線をまげて丸くするです。

  なので、borderがの記載が入ります。

 

【問4】角を丸くする円の半径

 記載例 → border-radius: 10px  15px  20px  25px;

               左上   右上  左下  右下

 

【問5】-webkit-

   因みに・・・-moz-:firefox向け

         -o-:opera向け

        -ms-:internetexplorer向け

 

【問6】background-image: linear-gradient( )

 ※linearは、特急電車〇〇ライナー のライナーです。

 ※gradientはグラデーションの事です。

 

【問7】rgba()

rgbは色味 aは濃度

 記載例:background-color: rgba(0,204,204,1) 

     background-color: rgba(0,204,204,)でも同じ結果となります。 

     →濃度が1=100%なので完全に不透明

 ちなみに、background-color: rgba(0,204,204,0) は、完全に透明となります。

 

【問8】transform

 記載例:transform:rotate(45deg);

    degは角度の意味です。-の角度も設定可能です。

    ちなみにまわると動作は、時計回りが世界標準です。

    が・・・イラストレーターは逆です。

 

【問9】@font-face

 

【問10 】最初の td をのぞく2番目以降の td のセル内容を右寄せに設定

 

【問11 】偶数番目のtrの行の背景色をカラーコード#F3F3F3に設定

  解説)

  tr:nth-of-type(even) { background-color: #F3F3F3; } 

   →のevenは偶数番目の意味です。

 

【問12 】transform: rotate( )

 

【問13 】:first-childは最初の子要素のスタイルを指定します