11. HTML/CSS入門

2015.09.222019.06.27

Contents

1 HTML/CSSとは
2 HTML基礎
3 CSS基礎
4 CSSボックス
5 article要素とsection要素
6 CSSセレクタ
7 HTMLフォーム
8 レイアウト
- 8.1 WebProgramming入門

HTML/CSSとは

文章の構造を定義するHTML
デザインを指定するCSS
要素とタグ
属性：要素の中に付加的な情報を埋め込む役割を持つ
CSSの記述方法

h1 { color: red; }
セレクタ { プロパティ: 値; }

HTML基礎

HTMLの基本構造

DOCTYPE宣言
html要素 <html lang="ja">
head要素
meta要素 <meta charset="UTF-8">
title要素
body要素

ドキュメントツリー
HTMLの特殊文字
HTMLの中に半角の「<」や「>」を記入すると、HTMLタグの一部だと認識されます。
代わりに「<」「>」を使います。

代表的な特殊文字
ブラウザでの表示	特殊文字の書き方	名称・解説
<	<	小なり
>	>	大なり
&	&	アンパサンド
		空白
©	©	著作権記号

h1-h6要素
p要素
img要素 <img src="logo.png">
a要素 <a href="http://xxxxxxxx.jp/" target="_blank">
ul要素
li 要素

CSS基礎

CSSの適用方法
link要素 <link rel="stylesheet" href="momotaro.css">
HTML/CSSのソース表示
CSSのプロパティ

color
background-color
font-size
text-align (text-align: center;)
border (border-bottom: solid 1px #000000;)

CSSボックス

ボックス
margin：境界線の外側の余白を指定
padding：境界線の内側の余白を指定
表示領域(widthとheight)
marginとpaddingの初期値
margin と auto と width (margin: 0 auto;)
ブロックボックス(div要素)
インラインボックス(span要素、a要素)
div要素とspan要素

article要素とsection要素

article要素: サイト内で自己完結しており、それ自体で独立したコンテンツとして成り立つもの
section要素: 文章内の節を表す

CSSセレクタ

id属性とclass属性

HTMLフォーム

入力・送信フォーム
form要素： action属性にデータ送信先を指定し、PHPで受け取る
input要素
select要素、option要素
label要素
placeholder属性：ユーザのデータ入力の助けとなるようなヒントを表示できる
maxlength属性：最大入力文字数を指定する

input要素[type属性]
属性の値	役割	種類
text	改行なしのテキスト	テキストボックス
email	メールアドレス	テキストボックス
password	パスワード	テキストボックス
radio	複数の選択肢から1つを選択	ラジオボタン
checkbox	複数の選択肢から0個以上を選択	チェックボタン
submit	入力されたデータを送信する	ボタン

レイアウト

ページ構成
セクションの定義

header要素：見出しや概略など、ページのヘッダーを表す
footer要素：作成者やコピーライトなど、ページのフッターを表す
nav要素：同じWebサイト内の別ページへのリンク(ナビゲーション)を表す
article要素：サイト内で自己完結しており、それ自体で独立したコンテンツとして成り立つもの
aside要素：ページ内容と関連しているが、あまり重要ではないもの(広告、補足記事など)を表す

floatプロパティ：指定された要素を左または右に寄せて配置する

タイトルとURLをコピーしました