Contents
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プロパティ: 指定された要素を左または右に寄せて配置する
WebProgramming入門
- 01a. 開発環境構築(Windows8.1+VMware Player+CentOS)
- 01b. 開発環境構築(Windows 10+Ubuntu)
- 01c. 開発環境構築(Ubuntu18.04(WSL)+Ansible+Serverspec+WP-CLI)
- 01d. 開発環境構築(WSL2+Ubuntu18.04+Docker)(作成中)
- 02a. AWS環境構築(CentOS6)
- 02b. AWS環境構築(CentOS6+LAMP環境+WordPress)
- 02c. AWS環境構築(CentOS7+Django)
- 02d. AWS環境構築(CentOS7+Ansible+Serverspec+WP-CLI+Munin)(作成中)
- 02z. さくらのクラウド環境構築(CentOS7+Ansible+Serverspec+WP-CLI)
- 03a. WordPress制作入門
- 03b. WordPress制作入門
- 04. トラブルシューティング
- 11. HTML/CSS入門
- 11a. ProgateでHTML&CSS初級
- 11b. ProgateでHTML&CSS中級(ランディングページ)
- 11c. ProgateでHTML&CSS上級(レスポンシブデザイン)
- 11d. ProgateでHTML&CSS(Flexbox編)
- 11e. ProgateでSass(CSSをより便利に効果的に操作する言語)
- 11y. ドットインストールでBootstrap4入門
- 11z. PaizaラーニングでBootstrap4入門
- 12. MySQL入門
- 12a. ProgateでSQL Ⅰ~Ⅲ
- 12b. ドットインストールでmongoDB入門
- 13. PHP入門
- 14. ProgateでRubyⅠ~Ⅴ
- 15a. ProgateでRuby on RailsⅠ~Ⅴ
- 15b. ProgateでRuby on RailsⅥ~Ⅷ
- 15c. ProgateでRuby on RailsⅨ~Ⅺ
- 16. ProgateでPythonⅠ~Ⅴ
- 17. paizaラーニングでFlask入門
- 18a. Django入門1(Djangoの基本の理解)
- 18b. Django入門2(Djangoの動作の理解)
- 18c. Django入門3(Djangoのテンプレートとフォームを理解)
- 18d. Django入門4(お勧め店を投稿できるランチマップアプリの作成)
- 18e. Django入門5(Djangoでユーザー管理)
- 19a. ProgateでjQuery初級編
- 19b. ProgateでjQuery中級編
- 19c. ProgateでjQuery上級編
- 20a. ProgateでJavascript(ES6)Ⅰ~Ⅲ
- 20b. ProgateでJavaScript Ⅳ~Ⅴ
- 20c. ProgateでJavaScript Ⅵ~Ⅶ
- 20d. JavaScriptでCRUDアプリを作る(ELOOP)