CSS初級1(Progate編)
Progate復習用
個人用としてProgateの復習として作りました。
CSS初級編での流れをタイピングでやる事により、実践的に内容を覚える事ができます。
CSS初級2(Progate編)へと続きます。
CSS初級編での流れをタイピングでやる事により、実践的に内容を覚える事ができます。
CSS初級2(Progate編)へと続きます。
関連タイピング
-
プレイ回数42 歌詞かな30秒 -
アイリスアウト
プレイ回数2.5万 歌詞かな137打 -
このタイピングで一位になれる人いないでしょ！
プレイ回数6.9万 141打 -
ひたすらテンキーに慣れたい人のために
プレイ回数44万 数字323打 -
読書をすることのメリットについて。
プレイ回数9223 長文かな1181打 -
ビジネスにおけるストラテジについて。長文です
プレイ回数3514 長文2227打 -
60秒で言えるもんなら言ってみろ！
プレイ回数128 短文かな60秒 -
プレイ回数43 歌詞254打
問題文
ふりがな非表示
ふりがな表示
(ｂｏｄｙ ｛｝)
body {}
(ｆｏｎｔ－ｆａｍｉｌｙ： ”ａｖｅｎｉｒ ｎｅｘｔ”；)
font-family: "Avenir Next";
(ｌｉ ｛｝)
li {}
(ｌｉｓｔ－ｓｔｙｌｅ： ｎｏｎｅ；)
list-style: none;
(．ｈｅａｄｅｒ ｛｝)
.header {}
(ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ： ＃２６ｄ０ｃ９；)
background-color: #26d0c9;
(ｃｏｌｏｒ： ＃ｆｆｆ；)
color: #fff;
(ｈｅｉｇｈｔ： ９０ｐｘ；)
height: 90px;
(．ｈｅａｄｅｒ－ｌｏｇｏ ｛｝)
.header-logo {}
(ｆｌｏａｔ： ｌｅｆｔ；)
float: left;
(ｆｏｎｔ－ｓｉｚｅ： ３６ｐｘ；)
font-size: 36px;
(ｐａｄｄｉｎｇ： ２０ｐｘ ４０ｐｘ；)
padding: 20px 40px;
(．ｈｅａｄｅｒ－ｌｉｓｔ ｌｉ ｛｝)
.header-list li {}
(ｆｌｏａｔ： ｌｅｆｔ；)
float: left;
(ｐａｄｄｉｎｇ： ３３ｐｘ ２０ｐｘ；)
padding: 33px 20px;
(．ｍａｉｎ ｛｝)
.main {}
(ｐａｄｄｉｎｇ： １００ｐｘ ８０ｐｘ；)
padding: 100px 80px;
(．ｃｏｐｙ－ｃｏｎｔａｉｎｅｒ ｈ１ ｛｝)
.copy-container h1 {}
(ｆｏｎｔ－ｓｉｚｅ： １４０ｐｘ；)
font-size: 140px;
(．ｃｏｐｙ－ｃｏｎｔａｉｎｅｒ ｈ２ ｛｝)
.copy-container h2 {}
など
(ｆｏｎｔ－ｓｉｚｅ： ６０ｐｘ；)
font-size: 60px;
(．ｃｏｐｙ－ｃｏｎｔａｉｎｅｒ ｓｐａｎ ｛｝)
.copy-container span {}
(ｃｏｌｏｒ： ＃ｆｆ４ａ４ａ；)
color: #ff4a4a;
(．ｃｏｎｔｅｎｔｓ ｛｝)
.contents {}
(ｈｅｉｇｈｔ： ５００ｐｘ；)
height: 500px;
(ｍａｒｇｉｎ－ｔｏｐ： １００ｐｘ；)
margin-top: 100px;
(．ｓｅｃｔｉｏｎ－ｔｉｔｌｅ ｛｝)
.section-title {}
(ｂｏｒｄｅｒ－ｂｏｔｔｏｍ： ２ｐｘ ｓｏｌｉｄ ＃ｄｅｅ７ｅｃ；)
border-bottom: 2px solid #dee7ec;
(ｆｏｎｔ－ｓｉｚｅ： ２８ｐｘ；)
font-size: 28px;
(ｐａｄｄｉｎｇ－ｂｏｔｔｏｍ： １５ｐｘ；)
padding-bottom: 15px;
(ｍａｒｇｉｎ－ｂｏｔｔｏｍ： ５０ｐｘ；)
margin-bottom: 50px;
(つづきはｃｓｓしょきゅう２（ｐｒｏｇａｔｅへん）へつづく。)
続きはCSS初級2(Progate編)へつづく。