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超絶浅い説明
Search
KTD
December 24, 2024
Programming
0
370
HTML/CSS超絶浅い説明
HTML/CSSの超絶浅い説明(10分用)
KTD
December 24, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
0
250
Deep Dive into ~/.claude/projects
hiragram
10
2.2k
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
130
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
0
420
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
520
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
590
RailsGirls IZUMO スポンサーLT
16bitidol
0
120
Team operations that are not burdened by SRE
kazatohiei
1
290
Create a website using Spatial Web
akkeylab
0
310
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
480
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
694
190k
Raft: Consensus for Rubyists
vanstee
140
7k
Automating Front-end Workflow
addyosmani
1370
200k
KATA
mclloyd
30
14k
Being A Developer After 40
akosma
90
590k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
GitHub's CSS Performance
jonrohan
1031
460k
Code Reviewing Like a Champion
maltzj
524
40k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
BBQ
matthewcrist
89
9.7k
A Tale of Four Properties
chriscoyier
160
23k
Transcript
HTML/CSSの概要
HTML/CSSとは? スーパー簡単に言うと、WEBページを作るためのプ ログラミング言語みたいなものです。
HTML/CSSとは? HTML → WEBページの構造・内容を作る CSS → WEBページを彩る
HTML
<div> <p>Hello</p> <p>こんにちは</p> </div> HTMLとは? Hello こんにちは
<div> <p>Hello<p> <p>こんにちは</p> </div> HTMLとは? 常に、 「<HTMLタグ>内容</HTMLタグ>」の形
HTMLとは? Hello こんにちは
HTMLタグ - 文字 <p>文字</p> ページに表示する文字
HTMLタグ - リンク <a href=”https://homie.co.jp”>こちらへ</a> 飛ばしたいURL ページに表示する文字
HTMLタグ - 画像 <img src=”http://example.com/image.png”></img> 画像のURL
CSS
<div> <h1>Hello</h1> <p style=”font-size: 24px; color: red;”>こんにちは</p> </div> CSSの部分 HTMLの中に「style=”CSSの内容”」で記述
CSSとは?
<div> <h1>Hello</h1> <p style=”font-size: 24px; color: red;”>こんにちは</p> </div> CSSとは? styleの中は「プロパティ1:値1;プロパティ2:
値2;」の形で記述
CSS - テキストカラー <p style=”color: red;”>赤色の文字</p> <p style=”color: rgb(112, 220,
5);”>緑色の文字</p> カラーコード (red/blueとかでもいいし、rgb(...)どちらでも可)
CSS - バックグラウンドカラー <p style=”background-color: red;”>赤色背景</p> カラーコード (red/blueとかでもいいし、rgb(...)どちらでも可)
CSS - テキストサイズ <p style=”font-size: 10px;”>10px文字</p> <p style=”font-size: 24px;”>24px文字</p> ※pxはサイズの単位
文字の大きさ
CSS - 太字 <p>文字</p> <p style=”font-weight: bold;”>太字</p> 文字の太さ イタリック(italic)なども可
CSS - 上下に余白 <p>1番目</p> <p style=”margin-top: 100px;”>2番目(上に空白)</p> <p style=”margin-bottom: 200px;”>3番目(下に空白)</p>
<p>4番目</p> 空白の大きさ
CSS - テキストサイズ&カラー <p>文字</p> <p style=”font-size: 200px; color: blue;”>青色200px</p> 文字の大きさ
テキストの色
<p style=”font-size: 32px; “>Hello</p> <p style=”margin-top: 200px; color: rgb(122, 246,
153);”>こんにちは</p> HTML/CSS例① こんにちは Hello
<img src=”https://homie.co.jp/homie.svg”></img> <p style=”font-weight: bold;”>こんにちは</p> HTML/CSS例② こんにちは