HTML初級(Progate編)
HIML初級編での流れをタイピングでやる事により、実践的に内容を覚える事ができます。
文字数制限がある為、一部文を分けている場所があります。
関連タイピング
-
プレイ回数738歌詞かな139打 -
毎日やればタイピングが上達します
プレイ回数262万703打 -
タイピング練習に関する長文です
プレイ回数6.9万長文1159打 -
タイピング練習を始めたばかりの方にオススメ！
プレイ回数459万短文かな312打 -
「あいうえお」は覚えた！人のために
プレイ回数109万短文英字16打 -
毎日練習すると上達します
プレイ回数4.9万数字300打 -
サッカー日本代表の名前です！
プレイ回数1656かな212打 -
普通に難しいです
プレイ回数2054長文かな265打
問題文
(＜！ｄｏｃｔｙｐｅ ｈｔｍｌ＞)
<!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(初級編)をやってね。