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
42
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
55
技育祭 学生LightningTalks!
naa
0
340
よわよわ大学生がKaggleの世界を覗いてみた話
naa
1
890
世界中を敵に回してもあなたの味方bot_技育祭学生LT大会登壇資料
naa
0
290
実際のコードで流れを感じるDeepLearning超入門
naa
0
370
WEBデザイン×UXデザイン
naa
0
190
Other Decks in Programming
See All in Programming
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
130
아직도 SOLID 를 '글'로만 알고 계신가요?
sh1mj1
0
360
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
110
requirements with math
moony
0
520
AHC 044 混合整数計画ソルバー解法
kiri8128
0
300
私の愛したLaravel 〜レールを超えたその先へ〜
kentaroutakeda
12
3.4k
データベースエンジニアの仕事を楽にする。PgAssistantの紹介
nnaka2992
9
4.1k
ベクトル検索システムの気持ち
monochromegane
29
8.7k
安全に倒し切るリリースをするために:15年来レガシーシステムのフルリプレイス挑戦記
sakuraikotone
5
2.2k
プログラミング教育のコスパの話
superkinoko
0
110
Return of the Full-Stack Developer
simas
PRO
1
310
爆速スッキリ! Rspack 移行の成果と道のり - Muddy Web #11
dora1998
1
140
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
137
6.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Statistics for Hackers
jakevdp
798
220k
Writing Fast Ruby
sferik
628
61k
Embracing the Ebb and Flow
colly
85
4.6k
Building Applications with DynamoDB
mza
94
6.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Designing for Performance
lara
606
69k
Visualization
eitanlees
146
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
320
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/#