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
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
440
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
400
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
Progressive Web Apps für Desktop und Mobile mit Angular (Hands-on)
christianliebel
PRO
0
110
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
920
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
400
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
Vue.js学習の振り返り
hiro_xre
2
130
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
3.1k
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.7k
Vue SFCのtemplateでTypeScriptの型を活用しよう
tsukkee
3
1.5k
色々なIaCツールを実際に触って比較してみる
iriikeita
0
270
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
39
2.4k
Happy Clients
brianwarren
97
6.7k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Code Review Best Practice
trishagee
64
17k
How GitHub (no longer) Works
holman
311
140k
Automating Front-end Workflow
addyosmani
1365
200k
Fireside Chat
paigeccino
32
3k
Scaling GitHub
holman
458
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
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/#