HTML5+CSS3

スポンサーリンク
投稿者info_teacher プレイ回数14058 順位767位 お気に入り1
難易度(4.1) 869打 長文 タグCSS CSS3 HTML HTML5
HTML5とCSS3を学ぼう
HTML5+CSS3
最近のブラウザではベンダープレフィックスなしでもいけるものもあるとは思いますが、ご了承下さいませ。古いブラウザにも対応できると思っていただければと思います。
HTMLやCSS記述で入力補完機能のあるソフトウェアが多く存在します。実務ではそれを使っていただければ構いませんが、ある程度は覚えておかないとということでこのゲームを作りました。
数字も微妙にちらしてあります。
順位名前スコア称号打鍵/秒正誤率時間(秒)打鍵数ミス問題日付
1 田所浩治容疑者 2821 上級webデザイナー 3.1 91.6% 155.6 483 44 20 2019/01/06
2 YM 1259 初級webデザイナー 1.5 83.5% 290.6 456 90 20 2019/01/30
3 あきあき 1057 初級webデザイナー 1.3 82.1% 358.3 484 105 20 2019/01/02
4 mirumo 863 素人webデザイナー 1.2 76.6% 362.4 450 137 20 2019/01/29

関連タイピング

中段マスター

中段マスター

中段の練習

プレイ回数30694
短文60秒
HTML5基本構造編

HTML5基本構造編

HTML5の働きの理解

プレイ回数832
長文1268打
HTML1

HTML1

HTML1

プレイ回数1069
長文1638打
html5+ CSS3

html5+ CSS3

初級

プレイ回数1553
長文526打
【html5】 単語基礎

【html5】 単語基礎

html5の単語での基礎練習

プレイ回数2258
短文英字339打
webクリエイター試験CSS編 Ss

webクリエイター試験CSS編 Ss

webクリエイター試験上級までカバー

プレイ回数2009
長文英字1629打

問題文

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

(body{})

全体のプロパティは?

(header{})

ヘッダーのプロパティは?

(margin: 0px auto;)

中央にくるように。

(width: 980px;)

横の長さは980px

(background: #ff0000; background: #f00;)

背景は赤(2通り記述)

(border-radius: 10px;)

角丸にして、半径10px

(border-top-left-radius: 6px;)

左上の角丸の半径は6px

(border-top-right-radius: 6px;)

右上の角丸の半径は6px

(text-shadow: 1px 2px 3px #000;)

文字もグラデーション。横ずれ1px下ずれ2pxぼかし具合3px 影の色

(-webkit-box-shadow: 10px 5px;)

Google Chrome,Safariで見せるためには-webkit-

(writing-mode: vertical-rl;)

縦書きもできる CSS3新

(-webkit- -moz- -ms- -o-)

ベンダープレフィックスまとめ

(<footer></footer>)

最後はフッター

(min-height: 700px;)

最低の高さは700px;

(<article></article>)

独立した記事として成り立つならarticle

(<section></section>)

目次を作る感覚ならsection <h1>~<h6>

(<nav></nav>)

サイト内ページのリンクの集合はnav

(<aside></aside>)

メインコンテンツ外のセクションはaside

(border: 2px solid #00f;)

ボックスの枠線は2px実線青色

(<div id=”box”></div>)

一つしかないボックスをhtmlで指定する

など

(float: left; clear: both;)

回り込み中はfloat: left 解除はclear: both;

(padding: 14px;)

内側の余白は14px;

(opacity: 0.8;)

透明度を指定 0.0~1.0 CSS3新

(display: block; display: inline;)

ボックスの表示形式

(word-break: break-all; word-wrap: break-word;)

ボックス内の文章の折り返し(2通り)ちょっとだけ表示違う

(text-align: center;)

文字や画像を中央揃え(水平方向)

(vertical-align: middle;)

文字や画像を中心に指定(垂直方向)

(object-fit: contain;)

画像を全部見えるようにフィットさせる CSS3新

(color: #00ff00; color: #0f0;)

文字の色は緑(2通り記述)

(background: -moz-linear-gradient(top, #fff, #999);)

グラデーション 上白→下灰色

(<!-- -->)

HTMLのコメントアウトは?

(/* */)

CSSのコメントアウトは?

(background: rgba(255, 255, 255, 0.6);)

白い背景色を透過させる

(<a href=”../index.html”></a>)

階層一つ上のindex.htmlをリンク

(@charset ”utf-8”;)

CSSの文字コードはUTF-8

(<p></p>)

文字を記入する

(<h1 class=”style1”></h1>)

見出し1のクラスはstyle1

(transform: rotate(-10deg);)

10度半時計回りに回転させる

(position: relative; position: absolute;)

疑似要素やboxの配置に使う

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

◆コメントを投稿

※公序良俗に反するコメントや、他者を中傷するようなコメントはしないでください。
※このゲームにコメントするにはログインが必要です。

info_teacherのタイピング

オススメの新着タイピング

タイピング練習講座 ローマ字入力表

人気ランキング

注目キーワード