個人練習用flex3カラム
flex３カラムサイト、サンプル
コードの説明なし、head内省略しています。
関連タイピング
-
日本語訳なし、個人練習用に作った英語長文です
プレイ回数4370 英語長文673打 -
解説なし、個人練習用につくりました。
プレイ回数715 英語長文1054打 -
解説付きでbox-shadowの基本をまとめています。
プレイ回数306 長文315打 -
個人練習用で作りました。解説なしです。
プレイ回数1327 英語長文1140打 -
日本語訳なしの英語長文です。個人練習用につくりました。
プレイ回数575 英語長文717打 -
個人練習用のコードです
プレイ回数838 英語長文1787打 -
個人練習用：サイトパーツ、ボトムアイコン
プレイ回数133 英語長文1295打 -
動きのあるメニューバーのサンプルHTML、CSS
プレイ回数142 英語長文2586打
問題文
ふりがな非表示
ふりがな表示
(<div class="flexbox"><section class="list">)
<div class="flexbox"><section class="list">
(<h1>Contents</h1><ul><li>Story</li><li>About</li>)
<h1>Contents</h1><ul><li>Story</li><li>About</li>
(<li>Contact</li></ul></section><article class="main">)
<li>Contact</li></ul></section><article class="main">
(<h1>The Little Prince</h1>)
<h1>The Little Prince</h1>
(<p>And he went back to meet the fox.</p>)
<p>And he went back to meet the fox.</p>
(</article><section class="side"><h1>About</h1>)
</article><section class="side"><h1>About</h1>
(<p>The Little Prince (French: Le Petit Prince))
<p>The Little Prince (French: Le Petit Prince)
(</p></section></div>Resources</body></html>)
</p></section></div>Resources</body></html>
(css)
css
(.main {background: #fcc;)
.main {background: #fcc;
(margin: 10px 0;})
margin: 10px 0;}
(.side {background: #fea;})
.side {background: #fea;}
(.list {background: #afd;})
.list {background: #afd;}
(.main,.side,.list {padding: 2%;)
.main,.side,.list {padding: 2%;
(border-radius: 10px})
border-radius: 10px}
(@media ( min-width : 600px ){)
@media ( min-width : 600px ){
(.flexbox {display: -webkit-flex;)
.flexbox {display: -webkit-flex;
(display: flex; })
display: flex; }
(.main {margin: 0 10px;)
.main {margin: 0 10px;
(-webkit-flex: 2; flex: 2;})
-webkit-flex: 2; flex: 2;}
など
(.side {-webkit-flex: 1; flex: 1;}})
.side {-webkit-flex: 1; flex: 1;}}