個人練習用：フレックスボックス、サイトパーツ
関連タイピング
-
自分練習用、英語長文：夢について
プレイ回数626 英語長文542打 -
beforeとafter要素を使った装飾です。
プレイ回数341 英語長文517打 -
h2やh3のデザインのcssです。解説なしです。
プレイ回数352 英語長文980打 -
解説なし、個人練習用につくりました。
プレイ回数737 英語長文1054打 -
自分練習用、英語長文
プレイ回数2871 英語長文1127打 -
日本語訳なし、個人練習用に作った英語長文です
プレイ回数4511 英語長文673打 -
jQuery基本例文集です。解説なしです。
プレイ回数1046 英語長文1554打 -
簡単な解説付きでグラデーションをまとめ、個人練習用
プレイ回数543 長文645打
問題文
ふりがな非表示
ふりがな表示
(<div class="flexbox"><div class="item">)
<div class="flexbox"><div class="item">
(<img src=".jpg" alt="" /><p>contents1</p></div>)
<img src=".jpg" alt="" /><p>contents1</p></div>
(<div class="item"><img src=".jpg" alt="" />)
<div class="item"><img src=".jpg" alt="" />
(<p>contents2</p></div>)
<p>contents2</p></div>
(<div class="item"><img src=".jpg" alt="" />)
<div class="item"><img src=".jpg" alt="" />
(<p>contents3</p></div>)
<p>contents3</p></div>
(<div class="item"><img src=".jpg" alt="" />)
<div class="item"><img src=".jpg" alt="" />
(<p>contents4</p></div>)
<p>contents4</p></div>
(<div class="item"><img src=".jpg" alt="" />)
<div class="item"><img src=".jpg" alt="" />
(<p>contents5</p></div>)
<p>contents5</p></div>
(<div class="item"><img src=".jpg" alt="" />)
<div class="item"><img src=".jpg" alt="" />
(<p>contents6</p></div></div>)
<p>contents6</p></div></div>
(.item { border-radius: 10px;)
.item { border-radius: 10px;
(background: #edf; padding: 15px;)
background: #edf; padding: 15px;
(margin: 5px; text-align: center; })
margin: 5px; text-align: center; }
(p { text-align: left; })
p { text-align: left; }
(img { max-width: 100%; height: auto; })
img { max-width: 100%; height: auto; }
(@media ( min-width : 600px ){)
@media ( min-width : 600px ){
(.flexbox { display: flex; flex-wrap: wrap; })
.flexbox { display: flex; flex-wrap: wrap; }
(.item { width: 25%;} })
.item { width: 25%;} }