ウェブデザインA 第09回

ウェブデザインA 第09回

2024年11月29日 /最終更新:2024年12月02日

フレックスボックスに関して詳しく解説を行います。

ウェブデザインA 第09回

まずはスマホ出席で出席登録を行ってください。
今回の4桁の認証コードは「 」です。
また「Visual Studio Code」 を起動しておきましょう。

前回は、「idとclass」「ブロックと入れ子」、そして「marginとpadding」について解説しました。

今回はどうしても覚えてほしい「フレックスボックス」について解説します。
フレックスボックス」を使いこなせば、Webサイトのレイアウトのほとんどを実現できると言っても過言ではありません。

どうしても覚えてほしい!フレックスボックス

今回はcssで「display: flex;」と指定したボックス「通称:フレックスボックス」に関して深掘り考察・解説したいと思います。
以下の記事をCtrl + クリックください。

[コーディングの応用] どうしても覚えてほしいレイアウトを簡単に組む方法!フレックスボックス(flexbox)

今日のコーディングの前に

みなさんにお願い!
編集中の「index.html」の5行目「<link rel=”stylesheet” href=”css/main.css”>」を6行目にし、
6行目「<link rel=”stylesheet” href=”css/reset.css”>」を5行目に
して、順番を入れ替えておいてください!

Webサイトコーディング[EASY]footerタグのhtml・cssコーディング

それでは今日のコーディングを始めていきましょう。
今回は以下の記事の学習を行います。
以下の記事をCtrl + クリックください。

[コーディングの実践:EASY] 04 footer編

次回はmain・articleタグのコーディング

今回はここまで。
次回はmainおよびarticleタグのコーディングです。