2023.12.28

ウェブサイトスタイリングのためのCSSの理解

marugotoyoten

cs50のYoutube動画「ウェブサイトスタイリングのためのCSSの理解」について要点と要約をまとめました

３つの要点

要点１
要点２
要点３

要約

CSSは、ウェブサイトの見た目をカスタマイズするためのスタイリング言語であり、HTMLの役割を補完します。プログラミング言語ではなく、その構文はシンプルで、HTML要素の修正方法を記述します。
CSSスタイルシートは、セレクタ、宣言、プロパティから構成されています。セレクタはスタイルを適用するHTML要素を識別し、宣言には所望のスタイルを定義するキーと値のペアが含まれます。一般的なCSSプロパティには、背景色の変更、ボーダースタイル、フォント属性の変更などがあります。

CSSはウェブサイト要素のカスタマイズに柔軟性を提供します。キーワードや16進コードを使用して色を指定することができ、フォントサイズや配置にさまざまなオプションが用意されています。CSSはまた、ウェブセーフフォントの使用や要素内のテキストの配置もサポートしています。
CSSのセレクタは、HTMLタグだけでなく、IDやクラスも対象にすることができます。IDセレクタは指定されたIDを持つ特定のHTML要素にスタイルを適用し、クラスセレクタは同じクラス属性を持つ複数のタグにスタイルを適用するために使用できます。

CSSスタイルシートは、スタイルタグを使用してHTMLファイルに直接埋め込むか、リンクタグを使用してHTMLファイルにリンクすることができます。後者の方法が好まれます。なぜなら、別々のCSSファイルを保持し、複数のHTMLファイルにリンクすることができるからです。
CSSはウェブページの見た目と構成を大幅に向上させることができます。たとえば、CSSスタイルをHTMLテーブルに適用することで、ボーダー、行の高さ、セルの背景などでテーブルの構造を改善することができます。CSSを試してみることで、視覚的に魅力的で使いやすいウェブサイト体験につながるかもしれません。

▼今回の動画