Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

CSSパズル 第二問!

 

 どうも!LSSです!!

 

に続き、第二問目を作ってみました!

いくつかの選択肢から選ぶだけなので、CSSが分からなくてもサンプルの変化を見ながら、正解に辿り着くという遊び方ができます^^

 

なお、全ての選択肢が正解になった時、「正解です!!」と赤い文字が出てきます。

 

 

CSSパズル 第二問!

第二問です
左が見本です。
下記コードの選択項目を選んで、右が見本と同じになるようにしてください。

コード

<div style="
display: inline-block;box-sizing:border-box;width: 140px;height: 80px;
: 10px;
border:;
border-color:;
background:
linear-gradient(,#000000,#804000,#ffff00,#ffffff,#ffff00,#804000,#000000);
text-align:;
">第二問です</div>

 

 

現在のコード

現在の選択肢から作ったコードは↓になります。(選択肢を変更すると、こちらもリアルタイムに変化します。)

 

 

謝辞

今さらなんですが…この「CSS指定をパズルにしよう」というアイデアは、

little-strange.hatenablog.com

の記事にいただいた、

くろいぬ(id:suburikuroinu)

うーんこれはパズルに応用出来そうですね。

↑くろいぬさんのコメントがきっかけでした^^

ありがとうございます!

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^