ita6.work@gmail.com 今回の練習問題は、カレーのレシピです。
画像の表示、角丸、ボーダーを表示する練習していきましょう！
今回からはリセットCSSの読み込みを追加してみましょう。
Chrome、Firefox、Safariなどのウェブブラウザには、自動的に設定されるデフォルトのCSSが備わっています。
そのため、同じCSSを書いていても、使用しているブラウザによって少しずつ違った見え方をすることがあります。
そこで、すべてのブラウザで同じように表示できるよう、デフォルトのCSSを消す役割をするのが、リセットCSSです。
ご自身で書いているCSSを読み込む直前に、リセットCSSを追加しておきましょう。
こうすることでデフォルトのCSSに影響されることなく、スタイルを設定しやすくなります。
下記のコードをコピーして、そのまま貼り付けておきましょう。
<!-- リセットCSS -->
<link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css">※ご自身で書いているCSSは必ずリセットCSSの後に書くようにしましょう。
コードは上から下へ順番に処理されます。
もしリセットCSSを後に書いてしまうと、ご自身で書いたCSSが上書きされてしまいます。
リセットCSSのように、いつも使うコードは
すぐに使えるようにどこかにまとめておくと楽ですよ！
デザイン
※Figmaのリンクが開きます。
画像はこちらからダウンロードできます。
Figmaからご自身で書き出して使用していただいてもOKです！
画像はimgタグで表示してみましょう！
ボーダーはborder、角丸はborder-radiusです！
名前が似ているけど全く別物なので注意です。
回答コード
回答コードはこちらからダウンロードしてください。
前回もお伝えしましたが、コーディングの正解は1つではありません。
完全に同じである必要はないので、
うまく表現できなかった箇所などをこちらでご確認ください。
少し慣れてきましたか？
この調子でどんどん進めていきましょう！