Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HTML/CSS 1カラムレイアウト勉強会資料
Search
naa
May 10, 2019
Programming
0
44
HTML/CSS 1カラムレイアウト勉強会資料
ProntiatVRでのWEB班勉強会での資料
naa
May 10, 2019
Tweet
Share
More Decks by naa
See All by naa
Open Hack U 2020 vol.4 発表資料
naa
0
58
技育祭 学生LightningTalks!
naa
0
350
よわよわ大学生がKaggleの世界を覗いてみた話
naa
1
940
世界中を敵に回してもあなたの味方bot_技育祭学生LT大会登壇資料
naa
0
300
実際のコードで流れを感じるDeepLearning超入門
naa
0
370
WEBデザイン×UXデザイン
naa
0
210
Other Decks in Programming
See All in Programming
ニーリーにおけるプロダクトエンジニア
nealle
0
950
NPOでのDevinの活用
codeforeveryone
0
900
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
0
120
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
620
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
210
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
260
効率的な開発手段として VRTを活用する
ishkawa
0
160
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
CDK引数設計道場100本ノック
badmintoncryer
2
480
GPUを計算資源として使おう!
primenumber
1
250
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Thoughts on Productivity
jonyablonski
69
4.7k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Faster Mobile Websites
deanohume
308
31k
Documentation Writing (for coders)
carmenintech
72
4.9k
A designer walks into a library…
pauljervisheath
207
24k
GitHub's CSS Performance
jonrohan
1031
460k
Music & Morning Musume
bryan
46
6.7k
The Invisible Side of Design
smashingmag
301
51k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Transcript
HTML/CSS 1カラムレイアウト ~実際にサイトを作って練習してみよう!~
そもそも1カラムレイアウトとは…? • カラムとは、ざっくりいうと「列」のこと! • ウェブサイトのレイアウトには,1カラムレイアウト,2カラムレイアウトなどが あるが,言い換えると1列のレイアウト,2列のレイアウトを意味します! 2カラムレイアウト 3カラムレイアウト
1カラムレイアウトに挑戦しよう! 実際に手を動かしてHTML/CSSに慣れていこう♪ • 今回は、1カラムレイアウトを作ってみよう! • 2カラムレイアウトに比べて、比較的とっつきやすいかも…! • 前回の習ったことを照らし合わせながら作成すると、さらに力がつくと思いま す!!
今回作ってもらうサイトはこちら↓
今回のポイント • イメージ的には、Web班の紹介HP • トップ画像が大部分を占める、1カラムレイアウト • 背景に画像を敷き詰める • メニューを作り,横並びにする •
画像の上にテキストをのせる 早速作ってみようー!
まずは下準備 • webフォルダを作る • 以下のファイルを新規作成し、webフォルダに 入れていく • web.html • main.css
• imagesフォルダ(使う画像を入れるフォルダ) • background.jpgとtop.jpgをダウンロードして、 imagesフォルダに入れる webフォルダ web.html main.css imagesフォルダ background.jpg top.jpg
HTMLを書いていこう • まずはHTMLの骨格を書こう サイトの土台 まだ真っ白…
サイトの構成の確認 header footer main menu top_img top_text
bodyにheader・main・footer追加
headerの編集(1/2) • サイトの見出し「Web班 ~ProntiatVR~」 を<p>タグで囲む • <div>タグでmenuのクラスを作る • メニューの内容を<ul>タグで囲み、要素一 つ一つを<li>タグで囲む。「|」も忘れず
に囲もう。 メニューなどの羅列する表記は <ul>タグで囲うのが基本的
headerの編集(2/2) • 現時点ではこんな感じ • <ul>タグで囲んだので箇条書き (「・」ver)になっている • 「・」はcssで消すのでご心配なく! • 箇条書きの書き方はもう一つ<ol>タグ
もある.<ol>タグで囲むと番号付きの 箇条書きになる
リンクをはり付ける • href属性でリンクをはる • これでomake.htmlに飛ぶことが できる • ちゃんと飛べるようにリンク先の ファイルであるomake.htmlと main_2.cssをダウンロードして
webフォルダに入れよう • sliderフォルダもimagesフォルダ に入れてね
mainの編集(1/2) • 画像とその上に乗せるテキストを書き 込む(好きなキャッチコピーを入れてみ よう!!!) • 画像のパスを書いて画像を挿入する • 画像のパスを考えるにあたって,次の スライドで相対パスの概念を学んでみ
よう! • 後でcssでいじりやすいように<div>で top_imgクラスとtop_textクラスを 作って囲む
相対パス • パス:ファイルの場所を示すもの • 相対パス:基準となるファイルから見た,そ のファイルの場所 • 同じ階層→「./ファイル名」,もしくはそのま ま「ファイル」 •
フォルダの一つ下の階層のファイル→「フォ ルダ名/ファイル名」 今回のtop.jpgでいうと,web.htmlを起点にすると同じ階層のimagesフォルダの 一つ下の階層にあるため, ”images/top.jpg”と記述する top.jpg 基準となるファイル 挿入したい画像
mainの編集(2/2) 画像がドーン!! テキストは画像の下に。 後からcssで画像に重ねる! ちなみにこの画像は去年の ゲームサイトのソースコー ドを撮ったものです^ω^
footerの編集 • footerに著作権を入れるのが基本的 • 「©ProntiatVR」を<p>タグで囲む HTMLはとりあえず 終了! 折り返し地点!!!
いざ、CSSへ • 見やすいようにコメントを書いておく • ちなみにHTMLの骨格を書いたときに main.cssのリンクを既に設定しておい た! main.css web.html
全体の編集 • 横幅を1000pxに設定する • marginをautoに設定する。autoにすると空白を いい感じに調整してくれるので、中央に配置する ことができる Before After
背景の編集 • 背景にbackground.jpgを適用する • background.jpgは小さい画像なので繰り返し貼り合わせて背景を作る。 そのときに使うのが、background-repeat background.jpg こんな感じで敷き詰める
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から引用)
headerの編集(2/4) 上に変な隙間が…(;;) 原因は何なんだぁー!!
headerの編集(3/4) • こんな時…! F12を押して何が 原因か確かめる! そうか!<p>タグの上のマージンが変な 空白を作っているのか!! ここをクリックすると空白の原因を 突き止めやすい!(経験談) 自分で調べて原因をつきとめ、試
行錯誤することが大切!!
headerの編集(4/4) • 早速<p>タグのmarginを消そう! 消えた!!
menuの編集(1/3) • <p>タグの文字を左に、メニューを右に配 置するのにfloatを用いる(floatは次の次の スライドで説明します!) • munuはクラスなので、セレクタの前に 「.」を付ける
menuの編集(2/3) • メニューを横並びにしたいのでfloat: left; • <p>タグと同様にline-heightを使う • 色とサイズを設定 あとは「・」と要素間の空白を作りたい
floatとは • 通常ボックス要素は上から下に順番に表示されるが,floatプロパティを使って横 に並べることができる • float要素で右か左に寄せて配置すると,後に続く要素はその反対側に回り込む • floatを指定するとそれより後の要素がすべて回り込んでしまうため,clearプロ パティでfloatを解除する必要がある! ただし注意!
floatの解除 • web.htmlのmenuのあとにクラス名 「clear」のdivを作る(中身は空) • floatの解除はmain.cssでできる clear: bothで解除できる main.css
menuの編集(3/3) • list-style: noneで<li>タグの「・」を消 せる • margin: [上] [右] [下]
[左] で指定できるのでいい感じにする • ついでに「Web班 ~ProntiatVR~」の文 字の左にもmarginを足しておく
header完成!! やっとそれっぽくなった! 次は画像に文字をのせて みよう
mainへ • トップ画像とテキスト についてcssで記述する • このままではテキスト が下にある テキスト
テキストの編集(1/2) • テキストの色とサイズを指 定する • background-colorでテキ ストボックスを塗りつぶす • 4つ目の要素は透明度を指 定できる。範囲は0~1で,
1が最も濃く,0は透明 • text-align: center;で中央 に位置できる
テキストの編集(2/2) これでテキストが見やすくなった!
重ねる! • 背景に配置するものはposition: relative; • 重ねて配置するものはposition: absolute; • を設定する •
z-indexの値が大きいほど前面に配置される ので,top_imgを0,top_textを1に設定する • あとは,テキストを好きな位置に持っていく だけ!数値を変えていろいろ動かしてみよ う!
重ねた結果 ほぼほぼ完成!あともう一息!
footerの編集 • footerの色と高さを指定し,余計な隙間 をなくすためにmarginを0にする • 「©ProntiatVR」の文字も中央に寄せて, きれいにする
完成!!!!!! お疲れさまでした!!!!
おまけ • Twitterの埋め込み方 https://publish.twitter.com/#