HTML5+CSS3
HTML5とCSS3を学ぼう
HTML5+CSS3
最近のブラウザではベンダープレフィックスなしでもいけるものもあるとは思いますが、ご了承下さいませ。古いブラウザにも対応できると思っていただければと思います。
HTMLやCSS記述で入力補完機能のあるソフトウェアが多く存在します。実務ではそれを使っていただければ構いませんが、ある程度は覚えておかないとということでこのゲームを作りました。
数字も微妙にちらしてあります。
最近のブラウザではベンダープレフィックスなしでもいけるものもあるとは思いますが、ご了承下さいませ。古いブラウザにも対応できると思っていただければと思います。
HTMLやCSS記述で入力補完機能のあるソフトウェアが多く存在します。実務ではそれを使っていただければ構いませんが、ある程度は覚えておかないとということでこのゲームを作りました。
数字も微妙にちらしてあります。
関連タイピング
-
html5暗記用 <>を省いています
プレイ回数724 英語長文694打 -
htmlの雛形覚え用
プレイ回数923 英語長文258打 -
自作のハンバーガーメニューを作成しましょう！
プレイ回数3861 英語長文721打 -
初心者向けです。
プレイ回数7847 英語546打 -
中段の練習
プレイ回数22万 短文60秒 -
HTMLの構成です。これであなたもプログラマーです。
プレイ回数436 133打 -
日本語の文章を打つために必要なタイピング
プレイ回数2.1万 90秒 -
HTMLタグの入力練習
プレイ回数489 英語230打
問題文
ふりがな非表示
ふりがな表示
(ｂｏｄｙ｛｝)
全体のプロパティは？
(ｈｅａｄｅｒ｛｝)
ヘッダーのプロパティは？
(ｍａｒｇｉｎ： ０ｐｘ ａｕｔｏ；)
中央にくるように。
(ｗｉｄｔｈ： ９８０ｐｘ；)
横の長さは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の配置に使う