プレイ回数
15
今回はCSSのプロパティーについてのタイピング練習です。 CSS（Cascading Style Sheets）とは、Webサイトの文字や画像などの骨組み（HTML）を装飾するためのスタイル言語です。プログラミング言語ではありませんが、Web制作において非常に重要な役割を担っています。 本練習では、サイトのデザインやレイアウトの調整などによく使われるCSSプロパティーを中心に取り上げています。すべて英語でのタイピングとなりますが、各プロパティの意味も日本語で解説しています。 なお、前提としてHTMLとJavaScriptの基礎が身についている方を対象としています。CSSの概念を理解しやすくするためです。 難易度はそれほど高くありませんので、初心者の方でも繰り返し練習すれば、必ずマスターできます。 ぜひリラックスしながら、気軽にタイピングを楽しんでみてください！
用語一覧(47件)
font-size
font-size
文字の大きさを決めます。(例font-size:40px;)
font-weight
font-weight
文字の太さを決めます。
display
display
HTML要素の表示方法（レイアウトの基本的な仕組み）を決めます。それぞれ、grid,flex,block,inlineなどの値がある
justify-content
justify-content
Flexbox（または Grid）コンテナ内の子要素を、主軸（通常は横方向）に沿ってどのように配置するかを指定します。
text-align
text-align
テキストやインライン(またはブロック)要素(テキストなど)の水平方向の揃え方（配置）を指定します。
margin
margin
要素の外側に余白をつけるときに使います。めっちゃ使います。
padding
padding
要素の内側に余白をつけるときに使います。めっちゃ使います
bottom
bottom
要素を下方向に配置するためのプロパティです。主に、position プロパティが relative・absolute・fixed・sticky のいずれかに設定されている要素に対して使用されます。
top
top
要素を上方向に配置するためのプロパティです。 主に、position プロパティが relative・absolute・fixed・sticky のいずれかに設定されている要素に対して使われます。 このプロパティでは、親要素の上端からの距離を指定できます。
position
position
要素の配置方法（位置指定の基準）を決めるプロパティです。 これを指定することで、top、bottom、left、right といった位置指定プロパティが使えるようになります。
right
right
要素を右方向に配置するためのプロパティです。 主に、position プロパティが relative・absolute・fixed・sticky のいずれかに設定されている要素に対して使われます。 このプロパティでは、親要素の右端からの距離を指定できます。
left
left
要素を左方向に配置するためのプロパティです。 主に、position プロパティが relative・absolute・fixed・sticky のいずれかに設定されている要素に対して使われます。 このプロパティでは、親要素の左端からの距離を指定できます。
border
border
要素に枠線をつけます。よくボタンなどにありますね。
border-radius
border-radius
要素の角を丸くするためのプロパティです。角を柔らかく見せたり、円形や楕円形のデザインに使うときに非常に便利です。
background
background
背景に関する複数のプロパティをまとめて指定できる**ショートハンド（省略記法）**です。
background-color
background-color
背景の色だけを指定するプロパティです。背景画像とは別に、背景の単色カラーを設定します。
background-position
background-position
背景画像の表示位置を指定するプロパティです。 background-image で設定した画像が、要素の中でどこに表示されるかを決めます。
background-image
background-image
背景に画像を設定するときに使います。
background-repeat
background-repeat
背景画像の繰り返し方法を指定するプロパティです。 背景画像が要素内でどう繰り返されるかをコントロールします。
color
color
テキスなどトの色を装飾するときに使います。
text-decoration
text-decoration
テキストの装飾（飾り）を指定するプロパティです。 主に下線や取り消し線、点線などの装飾をテキストに付けるときに使います。
list-style
list-style
リスト（主に <ul> や <ol> のリスト項目）のマーカー（箇条書きの点や数字など）の見た目や位置をまとめて指定できるショートハンドプロパティです。
padding-left
padding-left
要素の内側の余白（パディング）を左方向に指定するプロパティです。
padding-right
padding-right
要素の内側の余白（パディング）を右方向に指定するプロパティです。
padding-top
padding-top
要素の内側の余白（パディング）を上方向に指定するプロパティです。
padding-bottom
padding-bottom
要素の内側の余白（パディング）を下方向に指定するプロパティです。
z-index
z-index
要素の重なり順序（スタッキング順）を指定するプロパティです。 値が大きい要素ほど手前に表示され、小さい値は奥に表示されます。基本はautoです。position が relative、absolute、fixed、sticky のいずれかに設定されている要素に対して効果を発揮します。
cursor
cursor
マウスポインター（カーソル）の見た目（形状）を変更するプロパティです。 ユーザーが画面上の要素にマウスを乗せたときのカーソルの形を指定できます。
opacity
opacity
要素の透明度を指定するプロパティです。 値が小さいほど透明になり、値が1に近いほど不透明になります。
animation
animation
CSSアニメーションをまとめて指定するショートハンドプロパティです。 要素の動きや変化を時間で制御できます。ただし@keyframeで指定する必要があります。
transform
transform
要素の形状や位置、サイズ、角度などを変形（変換）するプロパティです。 移動・回転・拡大縮小・傾斜などの効果を与えられます。
transition
transition
要素の変化（変形や色の変化など）にかかる時間や効果を指定するプロパティです。 変化を滑らかにアニメーションのように見せるために使います。
box-sizing
box-sizing
box-sizing は要素の幅・高さの計算方法を決めるプロパティです。
font-family
font-family
要素のフォント（文字の書体）を指定するプロパティです。 どのフォントで文字を表示するかをブラウザに指示します。Googleフォントなどから決められます。
margin-left
margin-left
要素の左側の外側の余白を指定します。
margin-right
margin-right
要素の右側の外側の余白を指定します。
margin-top
margin-top
要素の上側の外側の余白を指定します。
margin-bottom
margin-bottom
要素の下側の外側の余白を指定します。
background-size
background-size
背景画像の表示サイズを指定するプロパティです。 画像を拡大・縮小して、要素の背景にどのようにフィットさせるかを調整します。
height
height
要素の高さを指定します。
width
width
要素の横の長さを指定します。
max-width
max-width
要素の幅の最大値を指定します。 要素の幅が指定値を超えないように制限します。
max-height
max-height
要素の高さの最大値を指定します。 要素の高さが指定値を超えないように制限します。
min-width
min-width
要素の幅の最小値を指定します。 要素の幅が指定値より小さくならないように制限します。
min-height
min-height
要素の高さの最小値を指定します。 要素の高さが指定値より小さくならないように制限します。
align-items
align-items
FlexboxやGridレイアウトで、コンテナ内のアイテムを交差軸（通常は縦方向）に沿って揃えるためのプロパティです。
box-shadow
box-shadow
要素に対して影を設定します。
