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

ProntiatVRでのWEB班勉強会での資料

Transcript

1. HTML/CSS 1カラムレイアウト ～実際にサイトを作って練習してみよう！～
2. そもそも1カラムレイアウトとは…？ • カラムとは、ざっくりいうと「列」のこと！ • ウェブサイトのレイアウトには，1カラムレイアウト，2カラムレイアウトなどが あるが，言い換えると1列のレイアウト，2列のレイアウトを意味します！ 2カラムレイアウト 3カラムレイアウト
3. 1カラムレイアウトに挑戦しよう！ 実際に手を動かしてHTML/CSSに慣れていこう♪ • 今回は、1カラムレイアウトを作ってみよう！ • 2カラムレイアウトに比べて、比較的とっつきやすいかも…！ • 前回の習ったことを照らし合わせながら作成すると、さらに力がつくと思いま す！！
4. 今回作ってもらうサイトはこちら↓
5. 今回のポイント • イメージ的には、Web班の紹介HP • トップ画像が大部分を占める、1カラムレイアウト • 背景に画像を敷き詰める • メニューを作り，横並びにする • 画像の上にテキストをのせる 早速作ってみようー！
6. まずは下準備 • webフォルダを作る • 以下のファイルを新規作成し、webフォルダに 入れていく • web.html • main.css • imagesフォルダ(使う画像を入れるフォルダ) • background.jpgとtop.jpgをダウンロードして、 imagesフォルダに入れる webフォルダ web.html main.css imagesフォルダ background.jpg top.jpg
7. HTMLを書いていこう • まずはHTMLの骨格を書こう サイトの土台 まだ真っ白…
8. サイトの構成の確認 header footer main menu top_img top_text
9. bodyにheader・main・footer追加
10. headerの編集(1/2) • サイトの見出し「Web班 ~ProntiatVR~」 を<p>タグで囲む • <div>タグでmenuのクラスを作る • メニューの内容を<ul>タグで囲み、要素一 つ一つを<li>タグで囲む。「｜」も忘れず に囲もう。 メニューなどの羅列する表記は <ul>タグで囲うのが基本的
11. headerの編集(2/2) • 現時点ではこんな感じ • <ul>タグで囲んだので箇条書き （「・」ver）になっている • 「・」はcssで消すのでご心配なく！ • 箇条書きの書き方はもう一つ<ol>タグ もある．<ol>タグで囲むと番号付きの 箇条書きになる
12. リンクをはり付ける • href属性でリンクをはる • これでomake.htmlに飛ぶことが できる • ちゃんと飛べるようにリンク先の ファイルであるomake.htmlと main_2.cssをダウンロードして webフォルダに入れよう • sliderフォルダもimagesフォルダ に入れてね
13. mainの編集(1/2) • 画像とその上に乗せるテキストを書き 込む(好きなキャッチコピーを入れてみ よう！！！) • 画像のパスを書いて画像を挿入する • 画像のパスを考えるにあたって，次の スライドで相対パスの概念を学んでみ よう！ • 後でcssでいじりやすいように<div>で top_imgクラスとtop_textクラスを 作って囲む
14. 相対パス • パス：ファイルの場所を示すもの • 相対パス：基準となるファイルから見た，そ のファイルの場所 • 同じ階層→「./ファイル名」，もしくはそのま ま「ファイル」 • フォルダの一つ下の階層のファイル→「フォ ルダ名/ファイル名」 今回のtop.jpgでいうと，web.htmlを起点にすると同じ階層のimagesフォルダの 一つ下の階層にあるため， ”images/top.jpg”と記述する top.jpg 基準となるファイル 挿入したい画像
15. mainの編集(2/2) 画像がドーン！！ テキストは画像の下に。 後からcssで画像に重ねる！ ちなみにこの画像は去年の ゲームサイトのソースコー ドを撮ったものです^ω^
16. footerの編集 • footerに著作権を入れるのが基本的 • 「©ProntiatVR」を<p>タグで囲む HTMLはとりあえず 終了！ 折り返し地点！！！
17. いざ、CSSへ • 見やすいようにコメントを書いておく • ちなみにHTMLの骨格を書いたときに main.cssのリンクを既に設定しておい た！ main.css web.html
18. 全体の編集 • 横幅を1000pxに設定する • marginをautoに設定する。autoにすると空白を いい感じに調整してくれるので、中央に配置する ことができる Before After
19. 背景の編集 • 背景にbackground.jpgを適用する • background.jpgは小さい画像なので繰り返し貼り合わせて背景を作る。 そのときに使うのが、background-repeat background.jpg こんな感じで敷き詰める
20. 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から引用)
21. headerの編集(2/4) 上に変な隙間が…(；；) 原因は何なんだぁー！！
22. headerの編集(3/4) • こんな時…！ F12を押して何が 原因か確かめる！ そうか！<p>タグの上のマージンが変な 空白を作っているのか！！ ここをクリックすると空白の原因を 突き止めやすい！(経験談) 自分で調べて原因をつきとめ、試 行錯誤することが大切！！
23. headerの編集(4/4) • 早速<p>タグのmarginを消そう！ 消えた！！
24. menuの編集(1/3) • <p>タグの文字を左に、メニューを右に配 置するのにfloatを用いる(floatは次の次の スライドで説明します！) • munuはクラスなので、セレクタの前に 「.」を付ける
25. menuの編集(2/3) • メニューを横並びにしたいのでfloat: left; • <p>タグと同様にline-heightを使う • 色とサイズを設定 あとは「・」と要素間の空白を作りたい
26. floatとは • 通常ボックス要素は上から下に順番に表示されるが，floatプロパティを使って横 に並べることができる • float要素で右か左に寄せて配置すると，後に続く要素はその反対側に回り込む • floatを指定するとそれより後の要素がすべて回り込んでしまうため，clearプロ パティでfloatを解除する必要がある！ ただし注意！
27. floatの解除 • web.htmlのmenuのあとにクラス名 「clear」のdivを作る（中身は空） • floatの解除はmain.cssでできる clear: bothで解除できる main.css
28. menuの編集(3/3) • list-style: noneで<li>タグの「・」を消 せる • margin: [上] [右] [下] [左] で指定できるのでいい感じにする • ついでに「Web班 ~ProntiatVR~」の文 字の左にもmarginを足しておく
29. header完成！！ やっとそれっぽくなった！ 次は画像に文字をのせて みよう
30. mainへ • トップ画像とテキスト についてcssで記述する • このままではテキスト が下にある テキスト
31. テキストの編集(1/2) • テキストの色とサイズを指 定する • background-colorでテキ ストボックスを塗りつぶす • 4つ目の要素は透明度を指 定できる。範囲は0～1で， 1が最も濃く，0は透明 • text-align: center;で中央 に位置できる
32. テキストの編集(2/2) これでテキストが見やすくなった！
33. 重ねる！ • 背景に配置するものはposition: relative; • 重ねて配置するものはposition: absolute; • を設定する • z-indexの値が大きいほど前面に配置される ので，top_imgを0，top_textを1に設定する • あとは，テキストを好きな位置に持っていく だけ！数値を変えていろいろ動かしてみよ う！
34. 重ねた結果 ほぼほぼ完成！あともう一息！
35. footerの編集 • footerの色と高さを指定し，余計な隙間 をなくすためにmarginを0にする • 「©ProntiatVR」の文字も中央に寄せて， きれいにする
36. 完成！！！！！！ お疲れさまでした！！！！
37. おまけ • Twitterの埋め込み方 https://publish.twitter.com/#