2カラムフレックスボックス、サンプルサイト

背景
投稿者投稿者ueshin0620いいね0お気に入り登録
プレイ回数609難易度(4.5) 630打 英語
2カラムフレックスボックスのサンプルサイト
2カラムフレックスボックスのサンプルサイトです。個人練習用で作りました。

関連タイピング

問題文

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

(<!DOCTYPE html><html lang="ja"><head>)

<!DOCTYPE html><html lang="ja"><head>

(<meta charset="UTF-8">)

<meta charset="UTF-8">

(<meta name="viewport" content="width=device-width, initial-scale=1">)

<meta name="viewport" content="width=device-width, initial-scale=1">

(<link rel="stylesheet" href="css/flex.css">)

<link rel="stylesheet" href="css/flex.css">

(<title>flexbox2</title>)

<title>flexbox2</title>

(</head><body>)

</head><body>

(<div class="flexbox"><section class="main">)

<div class="flexbox"><section class="main">

(<h1>The Little Prince</h1><p>and me yes!</p></section>)

<h1>The Little Prince</h1><p>and me yes!</p></section>

(<section class="side"><h1>About</h1><p>tugi</p>)

<section class="side"><h1>About</h1><p>tugi</p>

(</section></div></body></html>)

</section></div></body></html>

(start css)

start css

(.main { background: #fcc; margin-bottom: 10px;})

.main { background: #fcc; margin-bottom: 10px;}

(.side { background: #fea; })

.side { background: #fea; }

(.main, .side {padding: 2%;border-radius: 10px})

.main, .side {padding: 2%;border-radius: 10px}

(/* Responsive */ @media ( min-width : 600px ))

/* Responsive */ @media ( min-width : 600px )

({.flexbox {display: -webkit-flex;display: flex;})

{.flexbox {display: -webkit-flex;display: flex;}

(.main {margin: 0 10px 0 0;}})

.main {margin: 0 10px 0 0;}}

ueshin0620のタイピング

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

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

人気ランキング

注目キーワード