Webエンジニア学習日記 CSS編 #11 「CSSドリル（初級編）」

cssについて、大まかに理解出来てきたとことで、リファレンスを読み込むよりも実際に手を動かして学習できるように、ドリル形式での問題集を用意してみました。 これまでのレッスンでは教えていない内容もあるので、是非自信でネットで調べてみたりして、ドリルを解いてみてください。

問題1. 文章の色を変えよう！

「晴天」の箇所を強調するために、赤色の文字にするには、次のコードにどんなコードを追加すればいいでしょうか？ <span class='q1'>本日は晴天なり！</span> <style> .q1{ color:black; } </style> ※実際にコードを書き換えてみよう！ → 解答サンプルの表示

問題2. メニューを枠線で囲おう！

・リスト表示されているメニューのそれぞれを、黒い枠線で囲みましょう。 ・liタグの項目を無くしてみよう <ul id='test_2'> <li>トップ</li> <li>お知らせ</li> <li>一覧表示</li> <li>お問い合わせ</li> </ul> <style> #test_2{ display : flex; padding : 0; } #test_2 > *{ padding : 10px; margin : 10px; } </style> ※実際にコードを書き換えてみよう！ → 解答サンプルの表示

問題3. 順番が3の倍数の時だけ、アホになる

下に書かれているリストの順番が３の倍数のものを、「賢い」から「アホ」に変更してみて下さい。 【注意】 HTMLは書き換えずに、cssだけで文字を書き換えてみて下さい。 <ul id='test_3'> <li>賢い</li> <li>賢い</li> <li>賢い</li> <li>賢い</li> <li>賢い</li> <li>賢い</li> <li>賢い</li> <li>賢い</li> <li>賢い</li> <li>賢い</li> </ul> <style> #test_3 > *{ list-style:numeric; font-size:16px; } </style> ※実際にコードを書き換えてみよう！ → 解答サンプルの表示

問題4. 四角い形を丸い形にする

下に表示されている赤い四角形を、cssで1行足して、丸い形にしてください。 <div id='test_4'></div> <style> #test_4{ width:100px; height:100px; background-color:red; } </style> ※実際にコードを書き換えてみよう！ → 解答サンプルの表示

問題5. マウスオーバーを演出

プレビューに表示されている、リンクをそれぞれ、マウスカーソルが重なったら、背景色を赤にして、文字色を白にしてみましょう。 <div id='test_5'> <a href='#'>１番目のリンク</a> <a href='#'>2番目のリンク</a> <a href='#'>3番目のリンク</a> <a href='#'>4番目のリンク</a> </div> <style> #test_5{ white-space:normal; } #test_5 a{ display:block; padding:5px 10px; background-color:white; color:black; } </style> ※実際にコードを書き換えてみよう！ → 解答サンプルの表示

問題6. tableを装飾してみよう

次の画像と同じ見え方になるように、styleを書いてみよう。 <table id='test_6'> <tr><td>1</td><td>りんご</td></tr> <tr><td>2</td><td>バナナ</td></tr> <tr><td>3</td><td>みかん</td></tr> <tr><td>4</td><td>ぶどう</td></tr> </table> <style> table#test_6 td{ border:1px solid black; padding:5px; width:150px; text-align:center; } </style> ※実際にコードを書き換えてみよう！ → 解答サンプルの表示

問題7. 縦並びの項目を横並びにしてみよう！

block要素のタグを横並びにできると、デザインの幅が広がります。 いろいろなやり方があるとは思いますが、自分で考えられる方法で、横並び表示をしてみよう。 <div id='test_7'> <div>リンゴ</div> <div>バナナ</div> <div>みかん</div> </div> <style> #test_7{ white-space : normal; } #test_7 > *{ width:100px; padding:10px; border:1px solid black; margin:10px; background-color:white; color:black; font-size:14px; } </style> ※実際にコードを書き換えてみよう！ → 解答サンプルの表示

問題8. 見えにくい文字を見やすくしてみよう

次のサンプルような背景色と文字色が近い色の時、見えにくい表示として、デザインポイントが低くなってしまいます。 <div>サンプル</div> <div class='preview-8'>この文字が見えますか？</div> <style> .preview-8{ width:200px; padding:10px; background-color:#555; } </style> ※実際にコードを書き換えてみよう！ → 解答サンプルの表示

問題9. 文字のはみ出しを解消してみよう

文章が長くて要素をはみ出してしまう場合、どの様に対応すればいいか考えてみよう <div id='test_9'>Mr Tanaka, this is Sato, who is a friend of mine from college.</div> <style> #test_9{ width:200px; border:1px solid black; padding:10px; } </style> ※実際にコードを書き換えてみよう！ → 解答サンプルの表示

あとがき

今回のCSSSドリル９問いかがだったでしょうか？ 難しいと感じた人、簡単と感じた人、どちらにしても、楽しんでもらえると幸いです。 今回紹介した解答以外にも、いろいろな方法で同じ結果が出せますので、自分で別の方法を探ってみるというのもスキルアップに繋がりますよ。

• CSSの書き方の基本
• CSSの歴史と事前に覚えておく必要のある事
• セレクター
• 値の単位
• 色の書き方
• display
• box-sizing
• 疑似要素と疑似クラス
• position
• nth-of-type
• CSSドリル（初級編）