HTML講座 - Webページのレイアウトを学ぼう
自己紹介と活動内容
皆さん、こんにちは。私の名前は〇〇です。私はUXデザイン、HTMLマークアップ、マーケティングなどの分野で活動しています。これまでに「〇〇」というサイトを一人で作成したこともあります。また、教育関連の活動にも力を入れており、民間のITスクールでの授業や、企業向けのWeb技術に関する書籍の執筆なども行っています。興味のある方は、ぜひご覧ください。
今日のテーマ：Webページのレイアウトを作成する
さて、今日は何を学ぶかというと、「Webページのレイアウトを作成する方法」です。具体的には、PhotoshopやIllustratorで作成されたデザインを元に、どのようにレイアウトを構築し、実際にマークアップしていくのかを学びます。また、レイアウトの設計方法やコーディングの手順についても、一緒に見ていきましょう。
Flexboxの基礎
まずはFlexboxの基礎から始めましょう。Flexboxを使えば、様々なレイアウトを簡単に作成できるようになります。今回の講座では、「ズーロッパ」という架空の動物園のサイトを題材にして、Flexboxの使い方を学んでいきます。
Flexboxとは？
Flexboxとは、「フレックスコンテナ」と「フレックスアイテム」の2つの要素から構成されるレイアウトシステムです。フレックスコンテナは、複数のフレックスアイテムを包み込む役割を持っています。この2つの要素を組み合わせることで、どんなレイアウトでも作成できるようになります。
実際のコーディングに入る前に
まず、コーディングに入る前に、どのような構造になるのかをイメージしてみましょう。以下に基本的なHTMLの構造を示します。
HTMLの基本構造
HTMLを作成すると、最初に以下のようなコードを書きます。
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
このコードでは、外側に「container」というクラスを持つdiv要素があり、その中に「item」というクラスを持つ3つのdiv要素があります。
次に、このHTMLに対してFlexboxを適用していきます。まず、先ほど作成した「container」クラスに対して、「display: flex;」を指定します。これで、「container」はフレックスコンテナとなり、内部の「item」要素はフレックスアイテムとして扱われます。
Flexboxを使ったレイアウト作成
ここからは、実際にFlexboxを使ってレイアウトを作成していきます。デスクトップ上に新しいフォルダを作成し、テキストエディタ（Sublime TextやVS Codeなど）を開いて、新規ファイルを作成します。
HTMLとCSSのファイル作成
まず、以下の名前でファイルを保存しましょう。
flexbox1.htmlflexbox1.css
HTMLに基本構造を記述
flexbox1.htmlに以下の基本的なHTML構造を書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout</title>
<link rel="stylesheet" href="flexbox1.css">
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
</body>
</html>
CSSにスタイルを記述
次に、flexbox1.cssにスタイルを追加します。
.container {
display: flex;
}
.item1 {
background-color: orange;
flex: 1;
}
.item2 {
background-color: pink;
flex: 2;
}
.item3 {
background-color: yellow;
flex: 3;
}
これで、ブラウザでflexbox1.htmlを開くと、3つのアイテムが横に並び、1対2対3の比率で表示されるようになります。
Flexboxを使ったレイアウトの調整
Flexboxを使うと、レイアウトの割合や配置を簡単に調整できます。たとえば、flexプロパティの値を変更することで、各アイテムの幅を自由に調整できます。
試しに、以下のようにflexの値を変更してみましょう。
.item1 {
flex: 2;
}
.item2 {
flex: 1;
}
.item3 {
flex: 3;
}
このように、Flexboxを使うことで、レイアウトの設計が非常に柔軟になります。
まとめ
本日の講座では、Flexboxの基礎を学び、実際にコーディングを通してWebページのレイアウトを作成しました。皆さんもぜひ、様々なレイアウトを試してみて、Flexboxの使い方に慣れていってください。
タイムスタンプ
ビデオのタイムスタンプです。 0:01 [音楽] 0:03 me 0:06 [音楽] 0:24 ブーバーれるアーキュアーユー 0:28 ux html マークアップマーケティングなどがあります 0:32 付き合うというサイトは一人で作りました 0:35 教育関連はですねえたくさんやってます 0:40 でもあの民間の it スクールディアの開発であったりとか 0:44 正門がことを教えたりとかですねいろいろしています 0:49 企業の web 技術という本もあのだしてますので興味のある方は是非見てみて 0:53 ください 0:56 さあそれではですね本日は何をしするかと言いますと 1:01 web ページのレイアウトができるようになるっていうことを押していきたいなと 1:06 思います何をするかというと 1:09 デザイン一つのデザインががありますね photoshop とか 1:13 illustrator で作ったそのデザインからレイアウト 1:16 作っていくというようなことをやってまいりますデザインから 1:19 マークアップはどうするのかあとその+設計は 1:23 でそれを実際にコーディングしてみるというところまでを 1:26 まあ一気通貨でですねやってみたいなと思っております 1:32 まずはじゃあフレックスボックスの基礎からいきましょう 1:36 まあこれだけで覚えておけば大丈夫なんですけれどもこういうおなじみのずうロッパ 1:42 スキルハブではですねずロッパっていうものを題材に架空の動物園ですね 1:47 を題材にしいろいろ作っていくんですけれどもそちらを作りながらでその使い方をね 1:53 覚えていきます 1:55 じゃあエイド金はフレックスコンテなんてフェくさいっ 1:59 このフレックスボックス一体何なのかというとフレックスコンテナーという声ね資格 2:05 包むものがありますけれどもこれと中にあるこのちっちゃい資格ですねこの2つから 2:12 構成されるわけです 2:15 これを複数組み合わせることでどんなレイアウトでも作れることができるようになり 2:21 ます 2:23 基礎練習をしてみるというとこ 2:26 あとで一緒にコードを書いていきますけれどもまずちょっとイメージをですね 2:30 8つけていただいて 2:33 よろしいでしょうか 2:34 html を書くと普通こうなります 2:37 外まず一番最初にポンというのはディヴクラスコンテナて書くと外側のこの資格ができ 2:43 ます 2:44 イブクラスアイテムって書いていくところを内側の四角 2:48 ね 2:49 8アイテムができていくわけですねで123とあります 2:56 これを flex にするというのは支援施設の方で書いてあげるわけです 3:01 さっきクラスで名前を付けたところにコンテナーでディスプレイ flex として 3:05 あげるとこれはもうこれはフレックスコンテナーになりましたよ 3:10 なんかこれフレックスアイテムになりましたよということを認識してくれますでどう 3:15 なるかという 3:16 と咲きたてだったのが横になってくれるわけですね 3:20 横になってくれますので 3:23 その中後は一つ一つに割合をつけていく 3:27 アイテム市はフレックス1アイテムには flex にフレックスさ 3:31 て変えていくと一体に大さんみたいなのが簡単に作れるというわけです 3:39 色付でわかりやすくするとこうなります 3:43 以上ですねまぁだいたいイメージとして覚えておいていただければ大抵のレイアウトが 3:48 可能になります 3:50 では実際に会ってみましょう 3:56 8デモンストレーションねしてみましょうかえっとフレックスを変えて行ってみます 4:00 まずあのデスクトップどこでもいいのでフォルダを作っていただいてそれをサブライム 4:07 て生地とまぁを機に言うなんかエディターがあればそれを使っていただければいいかな 4:12 と思います 4:14 開いていただいてです 4:16 ねこちらに新規で 4:20 ファイルを作ります 4:22 まず保存しましょうか名前はフレックス 4:26 これから幾つか作っていきますのでフレックス1. html にします 4:32 で新設の方もね同時に作っちゃいましょう 4:37 まず新規ファイルで保存でフレックス1. css 4:43 で保存しました 4:45 じゃあこのフレックス1.いじめるの方に作っていきますね 4:50 簡単に愛媛の基本構造を書きましてその中 4:54 タイトルとかね全部いらないんでその中に8自分の暮らすまず 4:59 コンテナーを作っていきます外側の 5:03 あれですね 5:07 te 今てぇなぁ 5:10 外側のフレックスコンテナんですねこれが 5:14 その中に8アイテムを作っていきますクラスのアイテム 5:21 -1 5:23 でこの中はアイテム1 5:26 まあなんでもいいですこの中だねも所 5:29 でこう書いといていただいてで中に行こう作っていきます 5:35 えーとこれ名前変えちゃいますねー 5:39 本当 5:41 と市がこれが2 day 5:44 これが2年 5:46 これがさんで来れなさ 5:49 今の時点でどんなものができているかっていうのを 5:53 と見てみましょうかじゃあですねー 5:56 prom でもパー北西もどっちでもいいんですけれども 6:01 できたこのファイルをですね開いてみます 6:05 じゃあ 6:06 私は 6:07 何十かな chrome にしますねー 6:11 開いてみるとこうなりました 6:16 でちょっと横並びにしてみます 6:20 そうなっていって 6:22 普通に書くとですねこんな感じで 6:25 重なって表示されるわけですね 6:29 じゃあこれを css でちょっと直していきたいと思うんですけれどもこの 6:35 フレックス施設 6:37 を読み込むためにここにリンク 6:42 8スタイルシードのリンクですねデフレックス一度と css と書いてあげて 6:49 まず読み込める状態にしますここで色をつけていくんですけれども 6:55 じゃあまずは 6:58 a フレックスまあコンテナはね 7:01 あとの設定しましょうかまずは. item 1が 7:07 えーっバックグランドばオレンジになります 7:11 でそれぞれピンクイエローになりますのでこれちょっとまたこれでですね 7:16 コピペデー 7:19 ピン 7:21 あとはさんは 7:23 イエロイエロー 7:26 と書いて更新ボタンを押すとオレンジピンクイエローになりましたね 7:32 そうです 7:34 まだ何のフレックスの設定もしないのでこういうか下がって表示されます 7:40 これをですねドットコンテがこれ書く位置はどこでもいいんですけれども 7:45 ここにドットコンテナさっき html で支給したこの部分ですね 7:51 この全部を包み込んでくれる 7:54 このコンテナー 7:57 に対して中身はディスプレイはフレックスだよ 8:02 と宣言してあげますそうするとどうなるかというと 8:07 となります横に並んでくれるようになりました 8:11 今この幅っていうのは8ここは文字のサイズ分 8:17 文字数分の幅にごくっついちゃってる感じですねで 8:21 割合を与えてみましょうここのフレックス123大1体に大産地たいというときは 8:28 フレックス-1 8:30 後悔だけだ 8:31 ねぇ 8:32 低 flex にの 8:34 で flex 3 8:36 って書いてあげると 8:40 1対2対3の割合が簡単に作れましたねっ 8:44 これでへ 8:46 まあ基礎ができたわけですね割合を変えたいときはここをのいじればいいわけさてば 8:52 こうとかしてあげると 8:55 ここがあ 8:56 交代に大差になってくれたらいいね 8:59 はレイアウトってこういう感じで 9:02 割合を決めてからその中身んね写真を入れたり文字をで誰ってしていくわけですけれど 9:07 も 9:07 これで大外の部分大枠の部分を簡単ににこのフレックスボックスを使うと作成すること 9:14 ができるわけです 9:17 はいえーみなさんも一緒にね書いてみてどうだったでしょうか 9:20 色々と割合とかを書いてみたりして試してみましょう 9:30