個人練習用:サイトパーツ、ボックスのCSS基本編

背景
投稿者投稿者ueshin0620いいね0お気に入り登録
プレイ回数179難易度(4.5) 760打 英語
ボックスのCSSを解説なしで
解説なしです。サイトパーツのボックスのCSSを色々練習する個人練習用につくりました。丸みを帯びたボックス、上下に太線があるボックス、二重線のボックス、破線のボックス、影つきのボックス×2の順番でCSSが出てきます。

関連タイピング

問題文

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

(.marui { padding: 0.5em 1em; margin: 2em 0;)

.marui { padding: 0.5em 1em; margin: 2em 0;

(font-weight: bold; color: #6091d3; background: #FFF;)

font-weight: bold; color: #6091d3; background: #FFF;

(border: solid 3px #6091d3; border-radius: 10px; })

border: solid 3px #6091d3; border-radius: 10px; }

(.uesitasen{ padding: 8px 19px; margin: 2em 0;)

.uesitasen{ padding: 8px 19px; margin: 2em 0;

(color: #2c2c2f; background: #cde4ff;)

color: #2c2c2f; background: #cde4ff;

(border-top: solid 5px #5989cf;)

border-top: solid 5px #5989cf;

(border-bottom: solid 5px #5989cf; })

border-bottom: solid 5px #5989cf; }

(.nijusen { padding: 0.5em 1em; margin: 2em 0;)

.nijusen { padding: 0.5em 1em; margin: 2em 0;

(border: double 5px #4ec4d3; })

border: double 5px #4ec4d3; }

(.hasen { padding: 0.5em 1em; margin: 2em 0;)

.hasen { padding: 0.5em 1em; margin: 2em 0;

(background: #f0f7ff; border: dashed 2px #5b8bd0; })

background: #f0f7ff; border: dashed 2px #5b8bd0; }

(.kage1 { padding: 0.5em 1em; margin: 2em 0;)

.kage1 { padding: 0.5em 1em; margin: 2em 0;

(color: #00BCD4; background: #e4fcff;)

color: #00BCD4; background: #e4fcff;

(border-top: solid 6px #1dc1d6;)

border-top: solid 6px #1dc1d6;

(box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32); })

box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32); }

(.kage2{ padding: 0.5em 1em; margin: 2em 0;)

.kage2{ padding: 0.5em 1em; margin: 2em 0;

(color: #5d627b; background: white;)

color: #5d627b; background: white;

(border-top: solid 3px #5d627b;)

border-top: solid 3px #5d627b;

(box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22); })

box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22); }

ueshin0620のタイピング

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

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

人気ランキング

注目キーワード