html,cssカーソルを合わせると動く画像
| 順位 | 名前 | スコア | 称号 | 打鍵/秒 | 正誤率 | 時間(秒) | 打鍵数 | ミス | 問題 | 日付 |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | mikaroko | 1702 | G++ | 1.7 | 95.0% | 253.7 | 456 | 24 | 12 | 2025/08/19 |
関連タイピング
-
htmlのタグを入力
プレイ回数93300秒 -
基礎的なHTML
プレイ回数3488英語54打 -
htmlのタグが問題に出されます
プレイ回数1093短文120秒 -
2022.12.14：プロパティを削除･追加。
プレイ回数3059英語90秒 -
日本語訳なし、個人練習用に作った英語長文です
プレイ回数4184英語長文673打 -
chatGPTに作らせた部分一致検索サイトです。
プレイ回数1023長文590打 -
解説なし、個人練習用につくりました。
プレイ回数691英語長文1054打 -
CSSでよく使うプロパティのタイピング
プレイ回数394英語長文584打
問題文
(＜ｄｉｖ ｃｌａｓｓ＝”ｚｏｏｍｉｍｇ”＞＜ｉｍｇ ｓｒｃ＝”．ｊｐｇ” ／＞ ＜／ｄｉｖ＞)
カーソルを合わせたら画像をズームするhtmlとcss
(．ｚｏｏｍｉｍｇ ｛ ｗｉｄｔｈ： ２４０ｐｘ； ｈｅｉｇｈｔ： １５０ｐｘ；)
css横幅と縦のサイズ
(ｏｖｅｒｆｌｏｗ： ｈｉｄｄｅｎ； ｝)
ズームした画像が縦横のサイズから、はみ出ないようにする
(．ｚｏｏｍｉｍｇ ｉｍｇ ｛ ｔｒａｎｓｉｔｉｏｎ： ０．５ｓ；)
transitionでズームにかかる時間を設定（今回は0.5秒）
(ｗｉｄｔｈ： ２４０ｐｘ； ｄｉｓｐｌａｙ： ｂｌｏｃｋ； ｝)
横幅とかも決める
(．ｚｏｏｍｉｍｇ ｉｍｇ：ｈｏｖｅｒ ｛ ｔｒａｎｓｆｏｒｍ： ｓｃａｌｅ（１．１， １．１）； ｝)
ズームの倍率を設定（縦1.1倍、横1.1倍）
(＜ｄｉｖ ｃｌａｓｓ＝”ｚｉｍｇ”＞＜ｉｍｇ ｓｒｃ＝”ｓ．ｐｎｇ” ／＞＜／ｄｉｖ＞)
カーソルを合わせたらZ方向に回転する画像のhtmlとcss
(．ｚｉｍｇ ｛ ｗｉｄｔｈ： １００％； ｈｅｉｇｈｔ： １５０ｐｘ；)
横と縦のサイズを決める
(ｌｉｎｅ－ｈｅｉｇｈｔ： １００ｐｘ； ｔｅｘｔ－ａｌｉｇｎ： ｃｅｎｔｅｒ； ｝)
行間、文字が中央寄り
(．ｚｉｍｇ ｉｍｇ｛ ｗｉｄｔｈ： ２４０ｐｘ； ｔｒａｎｓｉｔｉｏｎ： １．０ｓ；)
横幅の設定とtransitionで回転にかかる時間を設定
(ｔｒａｎｓｆｏｒｍ： ｒｏｔａｔｅｚ（ ０ｄｅｇ ）； ｝)
Z方向の角度の初期状態を設定（ZをXやYに変えると回転方向が変わります）
(．ｚｉｍｇ：ｈｏｖｅｒ ｉｍｇ ｛ ｔｒａｎｓｆｏｒｍ： ｒｏｔａｔｅｚ（ ３６０ｄｅｇ ）； ｝)
カーソルを合わせた後の角度を設定（ZをXやYに変えると回転方向が変わる）