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属性： 最大入力文字数を指定する
| 属性の値 | 役割 | 種類 |
|---|---|---|
| text | 改行なしのテキスト | テキストボックス |
| メールアドレス | テキストボックス | |
| password | パスワード | テキストボックス |
| radio | 複数の選択肢から1つを選択 | ラジオボタン |
| checkbox | 複数の選択肢から0個以上を選択 | チェックボタン |
| submit | 入力されたデータを送信する | ボタン |
レイアウト
- ページ構成
- セクションの定義
- header要素： 見出しや概略など、ページのヘッダーを表す
- footer要素： 作成者やコピーライトなど、ページのフッターを表す
- nav要素： 同じWebサイト内の別ページへのリンク(ナビゲーション)を表す
- article要素： サイト内で自己完結しており、それ自体で独立したコンテンツとして成り立つもの
- aside要素： ページ内容と関連しているが、あまり重要ではないもの(広告、補足記事など)を表す
- floatプロパティ： 指定された要素を左または右に寄せて配置する
[siteorigin_widget class=”AdWidgetItem”][/siteorigin_widget]
[siteorigin_widget class=”WP_Widget_Search”][/siteorigin_widget]
[siteorigin_widget class=”WP_Widget_Pages”][/siteorigin_widget]
[siteorigin_widget class=”AdWidgetItem”][/siteorigin_widget]