The Web Developer Bootcamp 2023 セクション8/61
CSS講座に深く入り込むと、ボックスモデル、CSSユニット、displayプロパティなどの重要な概念をじっくりと紹介してくれます。ボックスモデルは、Webページ上の要素の構造を定義するもので、CSSの基本的な概念です。ボックスモデルは、border、padding、margin、widthとheightの4つのプロパティから構成されています。さらに、border radius プロパティによって、角の曲率を変更することができます。これらのプロパティを理解し、使いこなすことは、効果的で視覚的に魅力的なWebサイトを作成する上で非常に重要です。
もうひとつの重要なトピックは、使用できるさまざまなCSSの単位です。ピクセル、パーセンテージ、EM、REMSなどです。それぞれの単位は特定の目的を持ち、さまざまな場面で使用することができます。例えば、ピクセルはフォントサイズやボーダー幅によく使われ、パーセントやEMは幅や高さのプロパティによく使われます。一方、REMSは、ルートとなるHTML要素のフォントサイズを基準とした相対的な単位であり、要素の積み重ねや入れ子による問題を回避するのに有効である。
また、要素のデフォルトの動作をブロックからインライン、またはその逆に変更することができるdisplayプロパティについても説明します。これは、ウェブページ上の要素のレイアウトや外観を制御するのに有効です。また、インラインとブロックの両方の動作を可能にする値であるinline-blockについても触れています。
全体として、このセクションでは多くの重要な情報を扱っており、学生にとっては圧倒されるかもしれません。しかし、これらの概念と特性を理解し、使いこなすことが、効果的で視覚的に魅力的なWebサイトを作るために重要であることを、講演者は強調しています。