HTML5+CSS3
最近のブラウザではベンダープレフィックスなしでもいけるものもあるとは思いますが、ご了承下さいませ。古いブラウザにも対応できると思っていただければと思います。
HTMLやCSS記述で入力補完機能のあるソフトウェアが多く存在します。実務ではそれを使っていただければ構いませんが、ある程度は覚えておかないとということでこのゲームを作りました。
数字も微妙にちらしてあります。
| 順位 | 名前 | スコア | 称号 | 打鍵/秒 | 正誤率 | 時間(秒) | 打鍵数 | ミス | 問題 | 日付 |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | の | 1671 | 初級webデザイナー | 1.8 | 92.7% | 260.2 | 472 | 37 | 20 | 2024/11/11 |
| 2 | s | 1401 | 初級webデザイナー | 1.6 | 85.1% | 229.7 | 390 | 68 | 20 | 2024/09/30 |
| 3 | s | 1112 | 初級webデザイナー | 1.4 | 81.0% | 285.9 | 415 | 97 | 20 | 2024/11/07 |
関連タイピング
-
日本語の文章を打つために必要なタイピング
プレイ回数1.7万90秒 -
中段の練習
プレイ回数19万短文60秒 -
htmlやcssのタイピングです。
プレイ回数5923英語長文120秒 -
TLJ専用のHTML（上級編）タイピングです。
プレイ回数1950長文60秒 -
自作のハンバーガーメニューを作成しましょう！
プレイ回数2743英語長文721打 -
初心者向けです。
プレイ回数6251英語546打 -
記号の練習
プレイ回数488英語60秒 -
2022.12.14：プロパティを削除･追加。
プレイ回数2660英語90秒
問題文
(ｂｏｄｙ｛｝)
全体のプロパティは？
(ｈｅａｄｅｒ｛｝)
ヘッダーのプロパティは？
(ｍａｒｇｉｎ： ０ｐｘ ａｕｔｏ；)
中央にくるように。
(ｗｉｄｔｈ： ９８０ｐｘ；)
横の長さは980px
(ｂａｃｋｇｒｏｕｎｄ： ＃ｆｆ００００； ｂａｃｋｇｒｏｕｎｄ： ＃ｆ００；)
背景は赤（2通り記述）
(ｂｏｒｄｅｒ－ｒａｄｉｕｓ： １０ｐｘ；)
角丸にして、半径10px
(ｂｏｒｄｅｒ－ｔｏｐ－ｌｅｆｔ－ｒａｄｉｕｓ： ６ｐｘ；)
左上の角丸の半径は6px
(ｂｏｒｄｅｒ－ｔｏｐ－ｒｉｇｈｔ－ｒａｄｉｕｓ： ６ｐｘ；)
右上の角丸の半径は6px
(ｔｅｘｔ－ｓｈａｄｏｗ： １ｐｘ ２ｐｘ ３ｐｘ ＃０００；)
文字もグラデーション。横ずれ1px下ずれ2pxぼかし具合3px 影の色
(－ｗｅｂｋｉｔ－ｂｏｘ－ｓｈａｄｏｗ： １０ｐｘ ５ｐｘ；)
Google Chrome,Safariで見せるためには-webkit-
(ｗｒｉｔｉｎｇ－ｍｏｄｅ： ｖｅｒｔｉｃａｌ－ｒｌ；)
縦書きもできる CSS3新
(－ｗｅｂｋｉｔ－ －ｍｏｚ－ －ｍｓ－ －ｏ－)
ベンダープレフィックスまとめ
(＜ｆｏｏｔｅｒ＞＜／ｆｏｏｔｅｒ＞)
最後はフッター
(ｍｉｎ－ｈｅｉｇｈｔ： ７００ｐｘ；)
最低の高さは700px;
(＜ａｒｔｉｃｌｅ＞＜／ａｒｔｉｃｌｅ＞)
独立した記事として成り立つならarticle
(＜ｓｅｃｔｉｏｎ＞＜／ｓｅｃｔｉｏｎ＞)
目次を作る感覚ならsection <h1>～<h6>
(＜ｎａｖ＞＜／ｎａｖ＞)
サイト内ページのリンクの集合はnav
(＜ａｓｉｄｅ＞＜／ａｓｉｄｅ＞)
メインコンテンツ外のセクションはaside
(ｂｏｒｄｅｒ： ２ｐｘ ｓｏｌｉｄ ＃００ｆ；)
ボックスの枠線は2px実線青色
(＜ｄｉｖ ｉｄ＝”ｂｏｘ”＞＜／ｄｉｖ＞)
一つしかないボックスをhtmlで指定する
(ｆｌｏａｔ： ｌｅｆｔ； ｃｌｅａｒ： ｂｏｔｈ；)
回り込み中はfloat: left 解除はclear: both;
(ｐａｄｄｉｎｇ： １４ｐｘ；)
内側の余白は14px;
(ｏｐａｃｉｔｙ： ０．８；)
透明度を指定 0.0～1.0 CSS3新
(ｄｉｓｐｌａｙ： ｂｌｏｃｋ； ｄｉｓｐｌａｙ： ｉｎｌｉｎｅ；)
ボックスの表示形式
(ｗｏｒｄ－ｂｒｅａｋ： ｂｒｅａｋ－ａｌｌ； ｗｏｒｄ－ｗｒａｐ： ｂｒｅａｋ－ｗｏｒｄ；)
ボックス内の文章の折り返し(2通り)ちょっとだけ表示違う
(ｔｅｘｔ－ａｌｉｇｎ： ｃｅｎｔｅｒ；)
文字や画像を中央揃え（水平方向）
(ｖｅｒｔｉｃａｌ－ａｌｉｇｎ： ｍｉｄｄｌｅ；)
文字や画像を中心に指定（垂直方向）
(ｏｂｊｅｃｔ－ｆｉｔ： ｃｏｎｔａｉｎ；)
画像を全部見えるようにフィットさせる CSS3新
(ｃｏｌｏｒ： ＃００ｆｆ００； ｃｏｌｏｒ： ＃０ｆ０；)
文字の色は緑（2通り記述）
(ｂａｃｋｇｒｏｕｎｄ： －ｍｏｚ－ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏｐ， ＃ｆｆｆ， ＃９９９）；)
グラデーショﾝ 上白→下灰色
(＜！－－ －－＞)
HTMLのコメントアウトは？
(／＊ ＊／)
CSSのコメントアウトは？
(ｂａｃｋｇｒｏｕｎｄ： ｒｇｂａ（２５５， ２５５， ２５５， ０．６）；)
白い背景色を透過させる
(＜ａ ｈｒｅｆ＝”．．／ｉｎｄｅｘ．ｈｔｍｌ”＞＜／ａ＞)
階層一つ上のindex.htmlをリンク
(＠ｃｈａｒｓｅｔ ”ｕｔｆ－８”；)
CSSの文字コードはUTF-8
(＜ｐ＞＜／ｐ＞)
文字を記入する
(＜ｈ１ ｃｌａｓｓ＝”ｓｔｙｌｅ１”＞＜／ｈ１＞)
見出し1のクラスはstyle1
(ｔｒａｎｓｆｏｒｍ： ｒｏｔａｔｅ（－１０ｄｅｇ）；)
10度半時計回りに回転させる
(ｐｏｓｉｔｉｏｎ： ｒｅｌａｔｉｖｅ； ｐｏｓｉｔｉｏｎ： ａｂｓｏｌｕｔｅ；)
疑似要素やboxの配置に使う