HTML初級(Progate編)
Progateの復習用
個人用としてProgateの復習として作りました。
HIML初級編での流れをタイピングでやる事により、実践的に内容を覚える事ができます。
文字数制限がある為、一部文を分けている場所があります。
HIML初級編での流れをタイピングでやる事により、実践的に内容を覚える事ができます。
文字数制限がある為、一部文を分けている場所があります。
関連タイピング
-
学校やパソコン初心者におすすめです
プレイ回数4.5万 短文かな648打 -
上級者向けタイピングゲームだよ
プレイ回数4万 長文かな822打 -
このタイピングで一位になれる人いないでしょ！
プレイ回数6.1万 141打 -
タイピング練習に関する長文です
プレイ回数24万 長文1159打 -
タイピング練習について
プレイ回数6815 長文かな1347打 -
タイピングが上達するコツをタイピングしながら学ぼう
プレイ回数2747 長文1650打 -
アイリスアウト
プレイ回数2.3万 歌詞かな137打 -
ピアノ練習です。…
プレイ回数131 105打
問題文
ふりがな非表示
ふりがな表示
(＜！ｄｏｃｔｙｐｅ ｈｔｍｌ＞)
<!DOCTYPE html>
(＜ｈｔｍｌ＞＜／ｈｔｍｌ＞)
<html></html>
(＜ｈｅａｄ＞＜／ｈｅａｄ＞)
<head></head>
(＜ｍｅｔａ ｃｈａｒｓｅｔ＝”ｕｔｆ－８”＞)
<meta charset="utf-8">
(＜ｔｉｔｌｅ＞＜／ｔｉｔｌｅ＞)
<title></title>
(＜ｌｉｎｋ ｒｅｌ＝”ｓｔｙｌｅｓｈｅｅｔ”)
<link rel="stylesheet"
(ｈｒｅｆ＝”ｓｔｙｌｅｓｈｅｅｔ．ｃｓｓ”＞)
href="stylesheet.css">
(＜ｂｏｄｙ＞＜／ｂｏｄｙ＞)
<body></body>
(＜ｄｉｖ ｃｌａｓｓ＝”ｈｅａｄｅｒ”＞＜／ｄｉｖ＞)
<div class="header"></div>
(＜ｄｉｖ ｃｌａｓｓ＝”)
<div class="
(ｈｅａｄｅｒ－ｌｏｇｏ”＞ｐｒｏｇａｔｅ＜／ｄｉｖ＞)
header-logo">Progate</div>
(＜ｄｉｖ ｃｌａｓｓ＝”ｈｅａｄｅｒ－ｌｉｓｔ”＞＜／ｄｉｖ＞)
<div class="header-list"></div>
(＜ｕｌ＞＜／ｕｌ＞)
<ul></ul>
(＜ｌｉ＞ぷろぐらみんぐとは＜／ｌｉ＞)
<li>プログラミングとは</li>
(＜ｌｉ＞まなべるれっすん＜／ｌｉ＞)
<li>学べるレッスン</li>
(＜ｌｉ＞おといあわせ＜／ｌｉ＞)
<li>お問い合わせ</li>
(＜ｄｉｖ ｃｌａｓｓ＝”ｍａｉｎ”＞＜／ｄｉｖ＞)
<div class="main"></div>
(＜ｄｉｖ ｃｌａｓｓ＝”ｃｏｐｙ－ｃｏｎｔａｉｎｅｒ”＞＜／ｄｉｖ＞)
<div class="copy-container"></div>
(＜ｈ１＞ｈｅｌｌｏ ｗｏｒｌｄ＜ｓｐａｎ＞．＜／ｓｐａｎ＞＜／ｈ１＞)
<h1>HELLO WORLD<span>.</span></h1>
(＜ｈ２＞ぷろぐらみんぐのせかいへようこそ＜／ｈ２＞)
<h2>プログラミングの世界へようこそ</h2>
など
(＜ｄｉｖ ｃｌａｓｓ＝”ｃｏｎｔｅｎｔｓ”＞＜／ｄｉｖ＞)
<div class="contents"></div>
(＜ｈ３ ｃｌａｓｓ＝”ｓｅｃｔｉｏｎ－ｔｉｔｌｅ)
<h3 class="section-title
(”＞まなべるれっすん＜／ｈ３＞)
">学べるレッスン</h3>
(＜ｄｉｖ ｃｌａｓｓ＝”ｃｏｎｔｅｎｔｓ－ｉｔｅｍ”＞＜／ｄｉｖ＞)
<div class="contents-item"></div>
(＜ｉｍｇ ｓｒｃ＝””＞)
<img src="">
(＜ｐ＞ｈｔｍｌ ＆ ｃｓｓ＜／ｐ＞)
<p>HTML & CSS</p>
(＜ｐ＞ｐｈｐ＜／ｐ＞)
<p>PHP</p>
(＜ｐ＞ｒｕｂｙ＜／ｐ＞)
<p>Ruby</p>
(＜ｐ＞ｓｗｉｆｔ＜／ｐ＞)
<p>Swift</p>
(＜ｄｉｖ ｃｌａｓｓ＝”ｃｏｎｔａｃｔ－ｆｏｒｍ”＞＜／ｄｉｖ＞)
<div class="contact-form"></div>
(＜ｈ３ ｃｌａｓｓ＝”ｓｅｃｔｉｏｎ－ｔｉｔｌｅ)
<h3 class="section-title
(＜ｐ＞めーるあどれす（ひっす）＜／ｐ＞)
<p>メールアドレス（必須）</p>
(＜ｉｎｐｕｔ＞)
<input>
(＜ｐ＞おといあわせないよう（ひっす）＜／ｐ＞)
<p>お問い合わせ内容（必須）</p>
(＜ｔｅｘｔａｒｅａ＞＜／ｔｅｘｔａｒｅａ＞)
<textarea></textarea>
(＜ｐ＞ひっすこうもくはかならずごにゅうりょくください＜／ｐ＞)
<p>必須項目は必ずご入力ください</p>
(＜ｉｎｐｕｔ ｃｌａｓｓ＝”ｃｏｎｔａｃｔ－ｓｕｂｍｉｔ)
<input class="contact-submit
(” ｔｙｐｅ＝”ｓｕｂｍｉｔ” ｖａｌｕｅ＝”そうしん”＞)
" type="submit" value="送信">
(＜ｄｉｖ ｃｌａｓｓ＝”ｆｏｏｔｅｒ”＞＜／ｄｉｖ＞)
<div class="footer"></div>
(＜ｄｉｖ ｃｌａｓｓ＝”ｆｏｏｔｅｒ－ｌｏｇｏ)
<div class="footer-logo
(”＞ｐｒｏｇａｔｅ＜／ｄｉｖ＞)
">Progate</div>
(＜ｄｉｖ ｃｌａｓｓ＝”ｆｏｏｔｅｒ－ｌｉｓｔ”＞＜／ｄｉｖ＞)
<div class="footer-list"></div>
(＜ｕｌ＞＜／ｕｌ＞)
<ul></ul>
(＜ｌｉ＞かいしゃがいよう＜／ｌｉ＞)
<li>会社概要</li>
(＜ｌｉ＞さいよう＜／ｌｉ＞)
<li>採用</li>
(＜ｌｉ＞おといあわせ＜／ｌｉ＞)
<li>お問い合わせ</li>
(つぎはｃｓｓ（しょきゅうへん）をやってね。)
次はCSS(初級編)をやってね。