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
54
技育祭 学生LightningTalks!
naa
0
340
よわよわ大学生がKaggleの世界を覗いてみた話
naa
1
860
世界中を敵に回してもあなたの味方bot_技育祭学生LT大会登壇資料
naa
0
290
実際のコードで流れを感じるDeepLearning超入門
naa
0
360
WEBデザイン×UXデザイン
naa
0
190
Other Decks in Programming
See All in Programming
Honoとフロントエンドの 型安全性について
yodaka
4
250
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
Unity Android XR入門
sakutama_11
0
140
WebDriver BiDiとは何なのか
yotahada3
1
140
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
技術を根付かせる / How to make technology take root
kubode
1
240
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
180
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
GraphQLとの向き合い方2022年版
quramy
44
13k
Code Review Best Practice
trishagee
66
17k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
A designer walks into a library…
pauljervisheath
205
24k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Faster Mobile Websites
deanohume
306
31k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
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/#