zuknow learn together

新しい教材を作成

CSS3基礎

カード 37枚 作成者: moe (作成日: 2016/05/27)

  • 全てのリンクに対しスタイルを指定できる擬似クラス


    各種セレクタ

解説面  クリックしてカードを裏返す

アプリをダウンロードして、このコンテンツを学習しよう! AppStore / Google Play

教材の説明:

認定試験Lv.1 勉強用 [随時更新]

公開範囲:

公開

カテゴリ:

言語:

  • カード表 : 日本語
  • カード裏 : 日本語
  • このエントリーをはてなブックマークに追加
  • 1

    全てのリンクに対しスタイルを指定できる擬似クラス

    補足(例文と訳など)

    • 各種セレクタ
    • a:link{color:red;}

    答え

    • :link

    解説

  • 2

    マウスボタンでリンクを押し続けている間のスタイル

    補足(例文と訳など)

    • 各種セレクタ
    • a:active{color:red;}

    答え

    • :active

    解説

  • 3

    マウスカーソルが要素の上に乗っている間のスタイル

    補足(例文と訳など)

    • 各種セレクタ
    • a:hover{color:red;}

    答え

    • :hover

    解説

  • 4

    フォーカスがあたった状態のスタイル

    補足(例文と訳など)

    • 各種セレクタ
    • input:focus ,textarea:focus{ background-color:#ccc; }

    答え

    • :focus

    解説

  • 5

    親要素の最初の子要素に対してのスタイル

    補足(例文と訳など)

    • 各種セレクタ
    • li:first-child{color:red;}

    答え

    • :first-child

    解説

  • 6

    親要素の最後の子要素に対するスタイル

    補足(例文と訳など)

    • 各種セレクタ
    • li:last-child{color:red;}

    答え

    • :last-child

    解説

  • 7

    ページ内の特定の箇所を示すフラグメント識別子を持っているurlリンクでターゲット対象にされた要素のスタイル

    補足(例文と訳など)

    • 各種セレクタ
    • li:target{color:red;}

    答え

    • :target

    解説

  • 8

    ある要素が有効/無効な状態のみスタイルの選択可能

    補足(例文と訳など)

    • 各種セレクタ
    • button:enabled{ opacity:1; baclground-color:red;}(有効)

    答え

    • :enabled(有効) :disabled(無効)

    解説

  • 9

    ラジオボタン、チェックボックスがチェックされた状態のみスタイルの選択可能

    補足(例文と訳など)

    • 各種セレクタ
    • input:checked{opacity:1;}

    答え

    • :checked

    解説

  • 10

    ドキュメントルートの要素であり、HTMLではhtml要素が該当する

    補足(例文と訳など)

    • 各種セレクタ
    • :root{color:red;}

    答え

    • :root

    解説

  • 11

    最初からn番目の子要素のスタイル /最後からn番目の子要素のスタイル

    補足(例文と訳など)

    • 各種セレクタ
    • li:nth-last-child(n){color:red;}

    答え

    • :nth-child(n) :nth-last-child(n)

    解説

  • 12

    指定した種類の子要素の中でn番目の要素に対してのスタイル /指定した種類の子要素の後ろからn番目に対してのスタイル

    補足(例文と訳など)

    • 各種セレクタ
    • li:nth-of-type(n){color:red;}

    答え

    • :nth-of-type(n) :nth-last-of-type(n)

    解説

  • 13

    指定した種類の子要素の中の最初の要素に対してのスタイル /指定した種類の子要素の中の最後の要素に対してのスタイル

    補足(例文と訳など)

    • 各種セレクタ
    • li:last-of-type{color:red;}

    答え

    • :first-of-type :last-of-type

    解説

  • 14

    親要素の唯一の子要素(兄弟要素をひとつも持たない、他の要素も存在しない)に対してのスタイル

    補足(例文と訳など)

    • 各種セレクタ
    • span:only-child{color:red;}

    答え

    • :only-child

    解説

  • 15

    親要素の唯一の子要素(兄弟要素をひとつも持たない)に対してのスタイル ※他の要素があっても適応する

    補足(例文と訳など)

    • 各種セレクタ
    • span:only-of-type{color:red;}

    答え

    • :only-of-type

    解説

  • 16

    子要素をまったく持たない要素に対してのスタイル

    補足(例文と訳など)

    • 各種セレクタ
    • .class:empty{color:red;}

    答え

    • :empty

    解説

  • 17

    セレクタの効果を逆転し「セレクタ(で選択された要素)以外」という意味になるスタイル

    補足(例文と訳など)

    • 各種セレクタ
    • li:not(.除外されるクラス){color:red;}

    答え

    • :not

    解説

  • 18

    指定されている要素が縦に積み重なるように配置れるdisplayの値

    補足(例文と訳など)

    • ボックスモデル

    答え

    • display:block;

    解説

  • 19

    指定されている要素をテキスト中で使用すると、要素の前後に改行や空白を伴うことなく、要素の内容が文中にそのまま表示されるdisplayの値

    補足(例文と訳など)

    • ボックスモデル

    答え

    • display:inline

    解説

  • 20

    テキスト中に表示されつつも、固定の幅や高さを持つことのできるdisplayの表示形態

    補足(例文と訳など)

    • ボックスモデル

    答え

    • display:inline-block

    解説

  • 21

    要素そのものを表示せず、領域すら存在しない形態にしたい場合のdisplayの値

    補足(例文と訳など)

    • ボックスモデル

    答え

    • display:none

    解説

  • 22

    li要素のように、デフォルトで先頭に「・」がついているものなど、リスト記号が付いた表示形態に使うdisplayの値

    補足(例文と訳など)

    • ボックスモデル

    答え

    • display:list-item

    解説

  • 23

    table要素のなどと同じような振る舞いをするように指定できるdisplayの値

    補足(例文と訳など)

    • ボックスモデル

    答え

    • display:table

    解説

  • 24

    フレキシブルボックスレイアウトをする際に使われるdisplayの値

    補足(例文と訳など)

    • ボックスモデル

    答え

    • display:flex

    解説

  • 25

    ボックス領域に入りきらなかった場合、はみ出た部分を見せるのか、隠すのか、スクロールバーを出してスクロールさせるのか表示方法を指定するプロパティ

    補足(例文と訳など)

    • レイアウト関連

    答え

    • overflow:

    解説

    visible:ボックスからはみ出して表示 scroll:スクロールをすることが出来る hidden:はみ出したところは表示されない auto:環境に依存する

  • 26

    1つのボックス内を、いくつのカラムで分けて表示するかを指定できるプロパティ

    補足(例文と訳など)

    • レイアウト関連

    答え

    • column-count:

    解説

    .class{ width:500px; column-count:3;}

  • 27

    1つのカラムの幅を指定するプロパティ

    補足(例文と訳など)

    • レイアウト関連

    答え

    • column-width:

    解説

    .class{ width:500px; column-width:200px;}

  • 28

    カラムとカラムの間隔をしていするプロパティ

    補足(例文と訳など)

    • レイアウト関連

    答え

    • column-gap:

    解説

    .class{ width:500px; column-count:3; column-gap:30px;}

  • 29

    カラムの区切り線を指定するプロパティ

    補足(例文と訳など)

    • レイアウト関連

    答え

    • column-rule:

    解説

    .class{ width:500px; column-count:3; column-rule:2px solid gray;}

  • 30

    カラムをまたがって使用するプロパティ (3つのカラムの見出しみたいに配置できる)

    補足(例文と訳など)

    • レイアウト関連

    答え

    • column-span:

    解説

    .class(カラム指定){} h1{ font-size:100%; column-span:all; background-color:#ccc;}

  • 31

    ボックスの重なり順を指定します。 (position:stratic以外)

    補足(例文と訳など)

    • レイアウト関連

    答え

    • z-index:

    解説

    .class{ z-index:1;} (”1”が一番上に来る)

  • 32

    table要素内で使われるcaption要素の位置を指定するプロパティ

    補足(例文と訳など)

    • テーブル関連

    答え

    • caption-side:

    解説

    caption-side:bottom;

  • 33

    table要素で作られた表の横幅を、最初の行に合わせて均等に表示させるプロパティ

    補足(例文と訳など)

    • テーブル関連

    答え

    • table-layout:

    解説

    table{ width:300px; table-layout:fixed;}

  • 34

    table要素にborderで線を引いた際、隣り合わせたボーダーを重ねるのか間隔をあけるのかを指定するプロパティ

    補足(例文と訳など)

    • テーブル関連

    答え

    • border-collapse:

    解説

    table{ border-collapse:collapse;}

  • 35

    border-collapse:separateの場合、隣り合うボーダーの間隔を指定するプロパティ

    補足(例文と訳など)

    • テーブル関連

    答え

    • border-spacing:

    解説

    border-spacing:10px 20px;

  • 36

    border-collapse:separateが指定されているtable内のセル(th要素やtb要素など)において、内容がからの場合にセルそのものを非表示にするなどの指定をするプロパティ

    補足(例文と訳など)

    • テーブル関連

    答え

    • empty-cells:

    解説

    table{ empty-cells:hide;}

  • 37

    要素に対して変形を行うプロパティ

    補足(例文と訳など)

    • 変形関連

    答え

    • transform:

    解説

56903

セットの学習コンテンツ

公開初月で
60,000
ダウン
ロード!

無料アプリはこちら!

英単語をウェブサイト
からzuknowに簡単登録

覚えたい単語を選択するだけ!
簡単にzuknowに登録することが
できます

Get the free Chrome Extension

トップ