CSSを使ってスタイリッシュなウェブページを作成する

cs50のYoutube動画「CSSを使ってスタイリッシュなウェブページを作成する」について要点と要約をまとめました

３つの要点

• 要点１
  CSSを使ってウェブページの美観を向上させる方法
• 要点２
  divタグの目的と使い方
• 要点３
  divタグ内にスタイル属性を追加する方法

要約

CSSを使ってウェブページの美観を向上させる
HTMLはウェブページ作成のための唯一の言語ではありません。CSS（Cascading Style Sheets）を使用することで、レイアウト、色、フォントなどのウェブページの美観を指定することができます。divタグを使用して区分を作成することで、ページの構造を作成し、John Harvardの名前、ウェルカムメッセージ、著作権情報などのコンテンツを追加することができます。

divタグとその目的の理解
divタグはウェブページ上の区分または長方形の領域を定義するために使用されます。この場合、3つのdivが上下に重なり合っており、段落の効果を作成していますが、それらの間には少ないスペースがあります。各divはページの異なるセクションを表し、個別にスタイルを適用することができます。

ウェブページにCSSを適用する
divタグ内にスタイル属性を追加することで、各セクションの外観をカスタマイズすることができます。例えば、フォントサイズや太さを変更することができます。ダブルクォート内で使用される構文はCSSであり、複数のプロパティはセミコロンで区切ることができます。divに対する変更は、John Harvardのホームページをより魅力的にします。

テキストの配置と親divの作成
テキストをページの中央に配置するために、元の3つのdivを4つ目のdiv内にラップすることができます。この4つ目のdivは親divとして機能し、親divのtext-alignプロパティをcenterに指定することで、そのすべての子要素がこのプロパティを継承します。これにより、コンテンツの配置が簡素化され、John Harvardのホームページがさらに見栄えの良いものになります。

▼今回の動画

編集後記

▼ライターの学び

CSSを使用することで、ウェブページの外観をカスタマイズすることができることを学びました。また、divタグを使用することで、ウェブページをセクションごとに分割し、個別にスタイルを適用することができることもわかりました。

▼今日からやってみよう

今日からCSSを使って自分のウェブページをスタイリッシュにカスタマイズしてみましょう！ウェブページのセクションごとにdivタグを使用し、スタイル属性を追加してみることができます。

たまがわ

Twitter

AI×Pythonで自動で動画の要約と記事の編集を行っています。 Twitterにて記事の紹介も行っていますので、ぜひフォローよろしくお願いします！