20220802 css
関連タイピング
-
css 3 暗記用です。
プレイ回数1145 英語長文1146打 -
h2やh3のデザインのcssです。解説なしです。
プレイ回数356 英語長文980打 -
おぼえたいもの自分学習用
プレイ回数1539 長文英字840打 -
読み方の勉強です。
プレイ回数3787 短文英字171打 -
初心者向けです。
プレイ回数8523 英語546打 -
beforeとafter要素を使った装飾です。
プレイ回数341 英語長文517打 -
簡単な解説付きでグラデーションをまとめ、個人練習用
プレイ回数546 長文645打 -
CSSでよく使うプロパティのタイピング
プレイ回数513 英語長文584打
問題文
ふりがな非表示
ふりがな表示
(body{
font-size:16px; line-size:1.5;})
body{
font-size:16px; line-size:1.5;}
(a{
color:#000; text-decoration:unset;})
a{
color:#000; text-decoration:unset;}
(ul{
list-style:none;})
ul{
list-style:none;}
(header {
padding: 20px 0;})
header {
padding: 20px 0;}
(.header_inner {display: flex; flex-wrap: wrap;
justify-content: space-between;)
.header_inner {display: flex; flex-wrap: wrap;
justify-content: space-between;
(width: 1000px; margin: 0 auto;})
width: 1000px; margin: 0 auto;}
(.header_gnav {font-size: 14px;
display: flex; flex-wrap: wrap;})
.header_gnav {font-size: 14px;
display: flex; flex-wrap: wrap;}
(.header_gnav li a {
padding: 10px 15px; display: block;})
.header_gnav li a {
padding: 10px 15px; display: block;}
(.header_gnav li a:hover {color: #23cec3;
border-bottom: 1px solid #23cec3;})
.header_gnav li a:hover {color: #23cec3;
border-bottom: 1px solid #23cec3;}
(@media screen and (max-width: 768px){)
@media screen and (max-width: 768px){
(.header_inner{
width: 90%; flex-wrap: wrap;})
.header_inner{
width: 90%; flex-wrap: wrap;}
(.header_gnav{
flex-wrap: wrap;})
.header_gnav{
flex-wrap: wrap;}
(.header_gnav li {
width: 100%; text-align: center;})
.header_gnav li {
width: 100%; text-align: center;}
(.header_right {
display: none;})
.header_right {
display: none;}
(.header_right_open {
display: block;})
.header_right_open {
display: block;}
(.menu_btn {
position:fixed; top:25px; right:20px;})
.menu_btn {
position:fixed; top:25px; right:20px;}
(.menu_btn span {width: 45px; height: 2px;
background: #000; display: block;})
.menu_btn span {width: 45px; height: 2px;
background: #000; display: block;}
(.menu_btn_open span{
background:red;})
.menu_btn_open span{
background:red;}
(.menu_btn span:nth-child(2){
margin: 15px 0;}})
.menu_btn span:nth-child(2){
margin: 15px 0;}}