HTML&CSS|タイピング|mr100

投稿者muranaka32プレイ回数105143順位1268位  お気に入り3
難易度(2.5) 1047打 英字タグhtml css 学習 web タイピング練習
HTMLとCSSを練習するのだ!全100問。
HTML4.01とCSSをタイピングしながら覚えようという魂胆です。
● 仕様上、全100問です。
● htmlとセレクタ[擬似クラス/クラス/(XHTMLの)ID」は、CSSと関連が深いヤツ限定。
● 「値」とあるのは、
セレクタ{
プロパティ:値;
}の、値です(最後に[;]セミコロンついてます)
● その他「リスト」などは、プロパティの区分わけです(最後に[:]コロンついてます)
もしミスタイプやうそがあったら、わざとじゃなくて、制作者の能力の限界なんです、すいません。一度ご自分で正しいものを調べるかGoogle先生に聞いて、わかったら教えてくださればとても嬉しい。。。。。
● 自分が覚えたい内容に、時折り変えちゃうかもしれません。あるいは末代までこのままかもしれません。
● 説明や補足は,文字数制限などもあって簡略化。詳しくは(どこかの)WEBで。

・・・・以上勝手ながら、各位あしからずご了承くださいませ。かしこ。
順位 名前 スコア 称号 打鍵/秒 正誤率 時間(秒) 打鍵数 ミス 問題 日付
1 ti 4083 C 4.3 95.0% 243.2 1047 54 100 2021/10/17
2 ichiro09 3951 D++ 4.1 96.1% 254.1 1046 42 100 2021/08/07
3 TM 3732 D+ 4.0 91.9% 255.6 1046 92 100 2021/09/27
4 pinky 3377 D 3.8 89.7% 274.5 1046 119 100 2021/08/26
5 名も無きタイパー 3324 D 3.4 95.4% 299.6 1046 50 100 2021/09/13

関連タイピング

問題文

ふりがな非表示 ふりがな表示

(a:link)

擬似クラス 未アクセスのハイパーリンクにつけるセレクタ

(a:visited)

擬似クラス アクセス済みのハイパーリンクにつけるセレクタ

(a:hover)

擬似クラス マウスポイントしているハイパーリンクにつけるセレクタ

(a:active)

擬似クラス マウスでクリックしたハイパーリンクにつける

(/**/)

CSS内でのコメント

(href=)

外部CSSをHTML側に関連付け "URLやパス名"

(<style></style>)

HTML文書内でスタイル要素を指定 type="text/css"

(<div></div>)

HTML内で要素をブロックにグループ化 <div class="">など

(class=)

HTML内のブロック化要素にクラス名を設定<div class="">

(id=)

HTML内のブロック化要素にID名を設定<div id="">

(<span></span>)

HTML内で要素をインラインにグループ化<span class="">

({})

タグにスタイルを指定→開始と終了

(:)

タグにスタイルを指定→プロパティと値の間

(;)

タグにスタイルを指定→値の後(プロパティ後続時必須)

(.)

クラスであることを示す

(#)

IDであることを示す

(color:)

テキスト|文字色を指定 #6桁の値など

(text-align:)

テキスト|水平方向を指定

(text-decoration:)

テキスト|文字装飾指定 none underline など

(text-indent:)

テキスト|字下などのインデント設定

など

(px)

数値と単位|画素数(ピクセル)

(em)

数値と単位|文字の大きさ相対指定(エム)

(pt)

数値と単位|文字などのサイズ絶対指定(ポイント)

(%)

数値と単位|相対指定(パーセント)

(vertical-align:)

テキスト|インライン(行内)で垂直位置を指定

(vertical-align:)

テキスト|セル内で垂直位置を指定

(text-transform:)

テキスト|大・小文字やキャピタル設定 none uppercaseなど

(letter-spacing:)

テキスト|文字間隔を設定

(white-space:)

テキスト|タブやスペースなど空白の扱い(デフォ;まとめて1個の半角)

(line-height:)

テキスト|行送り(行の高さみたいな)を設定

(font-family:)

文字|フォントを指定 →値にフォント名+一般名(serifとか)が必須

(serif;)

値|font-family値の最後の一般名(総称フォントファミリー名)

(sans-serif;)

値|font-family値の最後の一般名(総称フォントファミリー名)

(font-size:)

文字|フォントサイズ(大きさ)を指定する

(font-weight:)

文字|フォントの太さを指定する 太字はbold

(font-style:)

文字|フォントのスタイル(斜体)を指定する

(font:)

文字|フォントの属性一括指定 ※sizeとfamilyは省略不可

(background-color:)

背景|背景の色指定

(background-image:)

背景|背景画像を張り込み ※htmlだとimgなんだけど。

(background-attachment:)

背景|背景の固定orスクロールを指定

(background-repeat:)

背景|背景画像の並び(繰り返しなど)調整

(background-position:)

背景|背景画像の位置を調整 ※水平 垂直の順(デフォ0,0が基準)

(background:)

背景|背景属性をまとめて一括指定 ※順不同

(border-style:)

ボックス|枠線のスタイルを指定(実線など) solid noneなど

(border-top-style:)

ボックス|枠線スタイル[上]を指 solid none など

(border-right-style:)

ボックス|枠線スタイル[右]を指定 solid none など

(border-bottom-style:)

ボックス|枠線スタイル[下]を指定 solid none など

(border-left-style:)

ボックス|枠線スタイル[左]を指定 solid none など

(border-width:)

ボックス|枠線の太さを指定

(border-top-width:)

ボックス|枠線の太さ[上]を指定

(border-right-width:)

ボックス|枠線の太さ[右]を指定

(border-bottom-width:)

ボックス|枠線の太さ[下]を指定

(border-left-width:)

ボックス|枠線の太さ[左]を指定

(border-color:)

ボックス|枠線の色を指定

(border:)

ボックス|枠線の属性を一括指定 ※順不同

(border-top:)

ボックス|枠線)[上]の属性を一括指定 ※順不同

(border-right:)

ボックス|枠線[右]の属性を一括指定 ※順不同

(border-bottom:)

ボックス|枠線[下]の属性を一括指定 ※順不同

(border-left:)

ボックス|枠線[下]の属性を一括指定 ※順不同

(もうちょっとがんばってみる。)

もうちょっとがんばってみる?全部で100問。

(margin:)

ボックス|余白(マージン)を設定

(margin-top:)

ボックス|余白(マージン)[上]を設定

(margin-right:)

ボックス|余白(マージン)[右]を設定

(margin-bottom:)

ボックス|余白(マージン)[下]を設定

(margin-left:)

ボックス|余白(マージン)[左]を設定

(ゆるす)

まちがいがあったら、教えてください。

(padding:)

ボックス|内容と枠線の間隔(パディング)を指定

(padding-top:)

ボックス|内容と枠線の間隔(パディング)[上]を指定

(padding-right:)

ボックス|内容と枠線の間隔(パディング)[右]を指定

(padding-bottom:)

ボックス|内容と枠線の間隔(パディング)[下]を指定

(padding-left:)

ボックス|内容と枠線の間隔(パディング)[左]を指定

(position:)

配置|要素の配置方法を指定(相対?絶対?) 指定無し→static

(top:)

配置|要素の位置[上]を指定 ※position(r/a~)とセットで

(bottom:)

配置|要素の位置[上]を指定 ※position(r/a~)とセットで

(right:)

配置|要素の位置[右]を指定 ※position(r/a~)とセットで

(left:)

配置|要素の位置[右]を指定 ※position(r/a~)とセットで

(visibility:)

配置|要素の表示or非表示を設定

(display:)

配置|要素の表示形式を変更 BOX→block 行→inline

(float:)

配置|BOX要素に対し次のテキストなどの回り込み指定

(clear:)

配置|floatの回り込みを解除

(list-style-type:)

リスト|リスト行頭のマーク[記号]を指定 ※番号・英字は値が別

(list-style-type:)

リスト|リスト行頭のマーク[番号]を指定 ※記号,英字は値が別

(list-style-type:)

リスト|リスト行頭のマーク[英字]を指定 ※記号,番号は値が別

(list-style-image:)

リスト|リスト行頭(番号/記号)をイメージ指定に変える

(list-style-position:)

リスト|リスト行頭マークの位置指定 ※ぶら下げ(インデント)→内or外

(list-style:)

リスト|リスト行頭マークを一括指定 ※順不同

(left;)

値|左

(right;)

値|右

(center;)

値|中央

(top;)

値|上

(bottom;)

値|下

(middle;)

値|(垂直方向の)中

(baseline;)

値|vertical-alignのベースライン

(super;)

値|vertical-align(行内)の上付き

(sub;)

値|vertical-align(行内)の下付き

(top;)

値|vertical-align(セル内)の上揃え

(bottom;)

値|vertical-align(セル内)の下揃え

(middle;)

値|vertical-align(セル内)の上下中央

(underline;)

値|text-decorationの下線

(line-through;)

値|text-decorationの取り消し線

問題文を全て表示 一部のみ表示 誤字・脱字等の報告

◆コメントを投稿

※誹謗中傷、公序良俗に反するコメント、歌詞の投稿、宣伝行為は禁止です。

※このゲームにコメントするにはログインが必要です。

※コメントは日本語で投稿してください。

※歌詞のコメントは著作権侵害となります。投稿しないでください!