HTML/CSS 1カラムレイアウト勉強会資料

Slide 1

Slide 1 text

HTML/CSS 1カラムレイアウト～実際にサイトを作って練習してみよう！～

Slide 2

Slide 2 text

そもそも1カラムレイアウトとは…？ • カラムとは、ざっくりいうと「列」のこと！ • ウェブサイトのレイアウトには，1カラムレイアウト，2カラムレイアウトなどがあるが，言い換えると1列のレイアウト，2列のレイアウトを意味します！ 2カラムレイアウト 3カラムレイアウト

Slide 3

Slide 3 text

1カラムレイアウトに挑戦しよう！実際に手を動かしてHTML/CSSに慣れていこう♪ • 今回は、1カラムレイアウトを作ってみよう！ • 2カラムレイアウトに比べて、比較的とっつきやすいかも…！ • 前回の習ったことを照らし合わせながら作成すると、さらに力がつくと思います！！

Slide 4

Slide 4 text

今回作ってもらうサイトはこちら↓

Slide 5

Slide 5 text

今回のポイント • イメージ的には、Web班の紹介HP • トップ画像が大部分を占める、1カラムレイアウト • 背景に画像を敷き詰める • メニューを作り，横並びにする • 画像の上にテキストをのせる早速作ってみようー！

Slide 6

Slide 6 text

まずは下準備 • webフォルダを作る • 以下のファイルを新規作成し、webフォルダに入れていく • web.html • main.css • imagesフォルダ(使う画像を入れるフォルダ) • background.jpgとtop.jpgをダウンロードして、 imagesフォルダに入れる webフォルダ web.html main.css imagesフォルダ background.jpg top.jpg

Slide 7

Slide 7 text

HTMLを書いていこう • まずはHTMLの骨格を書こうサイトの土台まだ真っ白…

Slide 8

Slide 8 text

サイトの構成の確認 header footer main menu top_img top_text

Slide 9

Slide 9 text

bodyにheader・main・footer追加

Slide 10

Slide 10 text

headerの編集(1/2) • サイトの見出し「Web班 ~ProntiatVR~」を

タグで囲む •

タグでmenuのクラスを作る • メニューの内容を

タグで囲む。「｜」も忘れずに囲もう。メニューなどの羅列する表記は

Slide 11

Slide 11 text

headerの編集(2/2) • 現時点ではこんな感じ •

タグで囲むと番号付きの箇条書きになる

Slide 12

Slide 12 text

リンクをはり付ける • href属性でリンクをはる • これでomake.htmlに飛ぶことができる • ちゃんと飛べるようにリンク先のファイルであるomake.htmlと main_2.cssをダウンロードして webフォルダに入れよう • sliderフォルダもimagesフォルダに入れてね

Slide 13

Slide 13 text

mainの編集(1/2) • 画像とその上に乗せるテキストを書き込む(好きなキャッチコピーを入れてみよう！！！) • 画像のパスを書いて画像を挿入する • 画像のパスを考えるにあたって，次のスライドで相対パスの概念を学んでみよう！ • 後でcssでいじりやすいように

で top_imgクラスとtop_textクラスを作って囲む

Slide 14

Slide 14 text

相対パス • パス：ファイルの場所を示すもの • 相対パス：基準となるファイルから見た，そのファイルの場所 • 同じ階層→「./ファイル名」，もしくはそのまま「ファイル」 • フォルダの一つ下の階層のファイル→「フォルダ名/ファイル名」今回のtop.jpgでいうと，web.htmlを起点にすると同じ階層のimagesフォルダの一つ下の階層にあるため， ”images/top.jpg”と記述する top.jpg 基準となるファイル挿入したい画像

Slide 15

Slide 15 text

mainの編集(2/2) 画像がドーン！！テキストは画像の下に。後からcssで画像に重ねる！ちなみにこの画像は去年のゲームサイトのソースコードを撮ったものです^ω^

Slide 16

Slide 16 text

footerの編集 • footerに著作権を入れるのが基本的 • 「©ProntiatVR」を

タグで囲む HTMLはとりあえず終了！折り返し地点！！！

Slide 17

Slide 17 text

いざ、CSSへ • 見やすいようにコメントを書いておく • ちなみにHTMLの骨格を書いたときに main.cssのリンクを既に設定しておいた！ main.css web.html

Slide 18

Slide 18 text

全体の編集 • 横幅を1000pxに設定する • marginをautoに設定する。autoにすると空白をいい感じに調整してくれるので、中央に配置することができる Before After

Slide 19

Slide 19 text

背景の編集 • 背景にbackground.jpgを適用する • background.jpgは小さい画像なので繰り返し貼り合わせて背景を作る。そのときに使うのが、background-repeat background.jpg こんな感じで敷き詰める

Slide 20

Slide 20 text

headerの編集(1/4) • headerの色を設定し、高さを70pxにする • 「Web班 ~ProntiatVR~」の文字のサイズと色を指定する • line-heightプロパティを使えば、文字の行間を調節することができる。70px(header の高さ)と指定することで、文字の高さがちょうど中央になる。 • 参考URL https://udemy.benesse.co.jp/development/web/line-height.html headerの高さ:70px (参考URLから引用)

Slide 21

Slide 21 text

headerの編集(2/4) 上に変な隙間が…(；；) 原因は何なんだぁー！！

Slide 22

Slide 22 text

headerの編集(3/4) • こんな時…！ F12を押して何が原因か確かめる！そうか！

タグの上のマージンが変な空白を作っているのか！！ここをクリックすると空白の原因を突き止めやすい！(経験談) 自分で調べて原因をつきとめ、試行錯誤することが大切！！

Slide 23

Slide 23 text

headerの編集(4/4) • 早速

タグのmarginを消そう！消えた！！

Slide 24

Slide 24 text

menuの編集(1/3) •

タグの文字を左に、メニューを右に配置するのにfloatを用いる(floatは次の次のスライドで説明します！) • munuはクラスなので、セレクタの前に「.」を付ける

Slide 25

Slide 25 text

menuの編集(2/3) • メニューを横並びにしたいのでfloat: left; •

タグと同様にline-heightを使う • 色とサイズを設定あとは「・」と要素間の空白を作りたい

Slide 26

Slide 26 text

floatとは • 通常ボックス要素は上から下に順番に表示されるが，floatプロパティを使って横に並べることができる • float要素で右か左に寄せて配置すると，後に続く要素はその反対側に回り込む • floatを指定するとそれより後の要素がすべて回り込んでしまうため，clearプロパティでfloatを解除する必要がある！ただし注意！

Slide 27

Slide 27 text

floatの解除 • web.htmlのmenuのあとにクラス名「clear」のdivを作る（中身は空） • floatの解除はmain.cssでできる clear: bothで解除できる main.css

Slide 28

Slide 28 text

menuの編集(3/3) • list-style: noneで

タグの「・」を消せる • margin: [上] [右] [下] [左] で指定できるのでいい感じにする • ついでに「Web班 ~ProntiatVR~」の文字の左にもmarginを足しておく

Slide 29

Slide 29 text

header完成！！やっとそれっぽくなった！次は画像に文字をのせてみよう

Slide 30

Slide 30 text

mainへ • トップ画像とテキストについてcssで記述する • このままではテキストが下にあるテキスト

Slide 31

Slide 31 text

テキストの編集(1/2) • テキストの色とサイズを指定する • background-colorでテキストボックスを塗りつぶす • 4つ目の要素は透明度を指定できる。範囲は0～1で， 1が最も濃く，0は透明 • text-align: center;で中央に位置できる

Slide 32

Slide 32 text

テキストの編集(2/2) これでテキストが見やすくなった！

Slide 33

Slide 33 text

重ねる！ • 背景に配置するものはposition: relative; • 重ねて配置するものはposition: absolute; • を設定する • z-indexの値が大きいほど前面に配置されるので，top_imgを0，top_textを1に設定する • あとは，テキストを好きな位置に持っていくだけ！数値を変えていろいろ動かしてみよう！

Slide 34

Slide 34 text

重ねた結果ほぼほぼ完成！あともう一息！