HTML5+CSS3

背景
投稿者投稿者info_teacherいいね172お気に入り登録3
プレイ回数2.6万難易度(4.1) 869打 長文
HTML5とCSS3を学ぼう
HTML5+CSS3
最近のブラウザではベンダープレフィックスなしでもいけるものもあるとは思いますが、ご了承下さいませ。古いブラウザにも対応できると思っていただければと思います。
HTMLやCSS記述で入力補完機能のあるソフトウェアが多く存在します。実務ではそれを使っていただければ構いませんが、ある程度は覚えておかないとということでこのゲームを作りました。
数字も微妙にちらしてあります。
順位 名前 スコア 称号 打鍵/秒 正誤率 時間(秒) 打鍵数 ミス 問題 日付
1 中卒無職相川耀太 4173 プロwebデザイナー 4.2 97.9% 111.9 477 10 20 2024/02/06

関連タイピング

問題文

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

(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のタイピング

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

タイピング練習講座 ローマ字入力表 アプリケーションの使い方 よくある質問

人気ランキング

注目キーワード