HTML/CSS超絶浅い説明

by KTD

Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

HTML/CSSの概要

Slide 2

Slide 2 text

HTML/CSSとは？スーパー簡単に言うと、WEBページを作るためのプログラミング言語みたいなものです。

Slide 3

Slide 3 text

HTML/CSSとは？ HTML → WEBページの構造・内容を作る CSS　 → WEBページを彩る

Slide 4

Slide 4 text

HTML

Slide 5

Slide 5 text

Hello

こんにちは

HTMLとは？ Hello こんにちは

Slide 6

Slide 6 text

Hello

こんにちは

HTMLとは？常に、「内容」の形

Slide 7

Slide 7 text

HTMLとは？ Hello こんにちは

Slide 8

Slide 8 text

HTMLタグ - 文字

文字

ページに表示する文字

Slide 9

Slide 9 text

HTMLタグ - リンクこちらへ飛ばしたいURL ページに表示する文字

Slide 10

Slide 10 text

HTMLタグ - 画像

画像のURL

Slide 11

Slide 11 text

CSS

Slide 12

Slide 12 text

Hello

こんにちは

CSSの部分 HTMLの中に「style=”CSSの内容”」で記述 CSSとは？

Slide 13

Slide 13 text

Hello

こんにちは

CSSとは？ styleの中は「プロパティ1：値1；プロパティ2: 値2;」の形で記述

Slide 14

Slide 14 text

CSS - テキストカラー

赤色の文字

緑色の文字

カラーコード（red/blueとかでもいいし、rgb(...）どちらでも可）

Slide 15

Slide 15 text

CSS - バックグラウンドカラー

赤色背景

カラーコード（red/blueとかでもいいし、rgb(...）どちらでも可）

Slide 16

Slide 16 text

CSS - テキストサイズ

10px文字

24px文字

※pxはサイズの単位文字の大きさ

Slide 17

Slide 17 text

CSS - 太字

文字

太字

文字の太さイタリック（italic）なども可

Slide 18

Slide 18 text

CSS - 上下に余白

1番目

2番目(上に空白)

3番目(下に空白)

4番目

空白の大きさ

Slide 19

Slide 19 text

CSS - テキストサイズ＆カラー

文字

青色200px

文字の大きさテキストの色

Slide 20

Slide 20 text

Hello

こんにちは

HTML/CSS例① こんにちは Hello

Slide 21

Slide 21 text

こんにちは

HTML/CSS例② こんにちは