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
39
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
54
技育祭 学生LightningTalks!
naa
0
320
よわよわ大学生がKaggleの世界を覗いてみた話
naa
1
800
世界中を敵に回してもあなたの味方bot_技育祭学生LT大会登壇資料
naa
0
270
実際のコードで流れを感じるDeepLearning超入門
naa
0
350
WEBデザイン×UXデザイン
naa
0
170
Other Decks in Programming
See All in Programming
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
430
CSC509 Lecture 09
javiergs
PRO
0
110
EventSourcingの理想と現実
wenas
6
2.1k
CSC509 Lecture 08
javiergs
PRO
0
110
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
250
僕がつくった48個のWebサービス達
yusukebe
18
17k
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
140
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
560
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
1.7k
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
16
4.1k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
440
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
510
110k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
GitHub's CSS Performance
jonrohan
1030
460k
Measuring & Analyzing Core Web Vitals
bluesmoon
1
41
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Adopting Sorbet at Scale
ufuk
73
9k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.9k
Typedesign – Prime Four
hannesfritz
39
2.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
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/#