HTML/CSSの基礎

HTMLとCSS
1
12年4月30日月曜日

HTMLとは

✤ エイチティーエムエル
✤ HyperText Markup Language

2

HTMLとは

✤ エイチティーエムエル
✤ HyperText Markup Language

✤ 色々な情報をリンクで結ぶ
✤ 設計書

3

HTML

4

HTML

✤ htmlと画像は別のファイル

5

HTML


htmlの中身

6

HTML


画像を読み込んで表示

htmlの中身

7

HTML


8

WORD、EXCELとの違い

9

WORD、EXCELとの違い

✤ 画像入った文書も1ファイルだけ

10

HTMLの書き方

11

HTMLの書き方
<h1>大見出し</h1>

<p>F22ラプターの最大の特徴はステルス機体であ

ること。<br />

レーダーの観測をくぐりぬけて疾走できる夢の機

体である。</p>

<img src=”f22.jpg” />

12

HTMLの書き方
<h1>大見出し</h1>

<p>F22ラプターの最大の特徴はステルス機体であ

ること。<br />

レーダーの観測をくぐりぬけて疾走できる夢の機

体である。</p>

<img src=”f22.jpg” />

開いたら閉じる
13

タグ

14

大見出し
文書に例えると...

15

大見出し

小見出し

16

大見出し

小見出し

段落

17

大見出し

小見出し

段落

リスト

18

<h1>お使いになる前に</h1>

19


<h2>iPhone上で∼</h2>

20


{

<p>「iPhoneユーザー∼</p>

21


{


<ul>
{
<li>お住まいの地域で∼</li>

<li>Apple ID∼</li>

<li>USB 2.0ポート∼</li>

</ul>
22

CCSとは

23

CCSとは

✤ シーエスエス
✤ Cascading Style Sheets

24

CCSとは

✤ シーエスエス
✤ Cascading Style Sheets

✤ ビジュアルを整える
✤ 設計書

25


{

26


font-weight : bold;

font-size : 20px;

{

27


font-weight : bold;

font-size : 20px;


color : blue; {

28


font-weight : bold;

font-size : 20px;


color : blue; {

font-size : 12px;

29

見た目を整えるプロパティはいっぱい

30

CSSの書き方

31

CSSの書き方

h1 {
font-size: 20px;
font-weight: bold;
color : blue;
}

p{
font-size:12px;
}

32

CSSの書き方

h1 {
font-size: 20px;
font-weight: bold;
color : blue;
}

p{
font-size:12px;
} htmlとは別のファイルに書いていく

33

なぜ別ファイルに?

34

✤ HTMLの中にも記述できる

35


36


37


38

✤ すべてのページで見た目を管理できる

39

見た目を整えるプロパティはいっぱい

40

とにかくリファレンス

41

More Related Content