個人練習用:フレックスボックス、サイトパーツ

背景
投稿者投稿者ueshin0620いいね0お気に入り登録
プレイ回数131難易度(4.4) 667打 英語
フレックスボックスを使ったよくあるサイトパーツ
個人練習用のフレックスボックスを使ったよくあるサイトパーツです。

関連タイピング

問題文

ふりがな非表示 ふりがな表示

(<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%;} }

ueshin0620のタイピング

オススメの新着タイピング

タイピング練習講座 ローマ字入力表 アプリケーションの使い方 よくある質問

人気ランキング

注目キーワード