5. HTML/CSS入門(備忘録)
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セレクタ
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プロパティ： 指定された要素を左または右に寄せて配置する