HTML/CSS入門 ver.0.1

HTMLとは

HyperText Markup Language
ハイパーテキストのための、文書に目印をつける 方法を定めた文法上の約束

マークアップの基本は、 文書の「論理構造」。

HTMLは複数のタグで生成されている。

<p>こんにちはー</p>


主要タグ①
「見出し」タグ

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>

主要タグ②
「文書」タグ

<p></p>

主要タグ③
「リンク」タグ

<a></a>

主要タグ④ 「改行」タグ

<br>

・主要タグ⑤
「ブロック」タグ

<div></div>

主要タグ⑥
「インライン」タグ

<span></span>

主要タグ⑦
「画像」タグ

<img />

主要タグ⑧
「箇条書き」タグ

<ul>
<li></li>
<li></li>
<li></li>
</ul>

主要タグ⑨
「番号付け」タグ

<ol>
<li></li>
<li></li>
<li></li>
</ol>

 


基本のかたち

盛り込みたい要素を考えて、書いてみよう!


CSSとは

Cascading Style Sheets ウェブページのスタイルを指定するための言語。

CSSは、色とか形(スタイル)を 変更するためのもの。
CSSはstyleタグで表現されている 。

CSSは「セレクタ」で効果の出る対象を指定する。

1. 要素型セレクタ
例 p {color:blue;}

2. 全称セレクタ
例 * {color:blue;}

3. idセレクタ
例 p#sample {color:blue;}

4. classセレクタ
例 p.sample {color:blue;}


基本のCSSプロパティ

・文字の色
color

{ color: #00ff00 }

・背景の色
background-color

{ color: #eeffee }


サンプル

<!DOCTYPE html>
<html lang=”ja”>

<head>
<meta charset=”utf-8″>
<title>WEBページのタイトル</title>
<style type=”text/css”>
body {
background-color: pink;
}
p#mystory {
color: #0000CD;
}
</style>
</head>
<body>
<h1>わたしの名前</h1>
<p id=”mystory”>生い立ち…</p>
</body>
</html>

 


*参考*

Webカラー

ウェブカラー(英: Web colors)はウェブページのデザインで使う色であり、その色を指定し記述する方法である。16進の色コードはハッシュ記号 (#) が先頭に付与される
(Wikipediaより)

カラーピッカー↓
http://www.benricho.org/colors/color_picker/


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です