プログラミング覚え書き

WEB製作覚え書き

ノート代わりに勉強した内容をまとめています。

HTML

HTML:値の送受信 ~複数の値の送受信~

例(input type="checkbox") 変数が定義されているか調べる(isset) 扱いやすい変数名で処理する 配列かどうか調べる(is_array) 配列内の値をforeach繰り返し処理で表示 例(input type="checkbox") ↓ ↓ ↓ 解説 変数が定義されているか調べる(isset) …

HTML:値の送受信 ~POST形式~

POST形式で値を送信 リクエストとレスポンス POST形式で送信した値の確認方法 例 POST形式で受け取った値 未入力時のメッセージ POST形式で値を送信 form要素のmethod属性値に"post"を指定した場合、submitボタンが押下されると、action属性で指定したページ…

HTML:値の送受信 ~GET形式~

GET形式で値を送信 クエリ文字列 例 フォームを使用せずにGET形式で値を送信 GET形式で受け取った値 未入力時のメッセージ GET形式で値を送信 form要素のmethod属性値に"get"を指定した場合、submitボタンが押下されると、action属性で指定したURLの後ろに、…

HTML:値の送信 ~select・option要素~(セレクトボックス)

select要素/option要素 select要素の代表的な属性 option要素の代表的な属性 例 select要素/option要素 セレクトボックスは、select要素とoption要素を組み合わせて作成する selectタグはセレクトボックスの「枠」を、optionタグは「選択肢」を定義する <select name="送信する値に付ける名前"> <option value=送信する値></option></select>…

HTML:値の送信 ~textarea要素~(テキストエリア)

textarea要素 代表的な属性 例 textarea要素 複数の入力エリアを作成するのに使用する 初期値を指定する場合は、開始タグと終了タグの間に記述する(input要素はvalue属性を使用するので混同しないように注意すること) 置換インライン要素に属す <textarea name="送信する値に付ける名前" cols="横幅を指定する文字数" rows="高さを指定する行数" > 初期値 </textarea> …

HTML:値の送信 ~input要素~(入力・選択・ボタン・隠し パーツ)

input要素 パーツタイプとtype属性値対応表 value属性 入力パーツ type属性の属性値 type属性以外の 代表的な属性 例 選択パーツ type属性の属性値 type属性以外の 代表的な属性 例 使いやすい選択パーツ ボタンパーツ type属性の属性値 type属性以外の 代表…

HTML:値の送信 ~フォームの基本構造~

form要素 ユーザ入力値等を送信するためのパーツはform要素の中に記述する。 (JavaScript等を使って送信せずに利用する入力パーツはform要素の中に入っていないこともある。) 主にお問合せフォームや検索フォームなどに使用する。 <form action="値の送信先" method="送信形式"> ここにフォームパーツを</form>…

CSS:セレクタの種類

idセレクタ classセレクタ セレクタのグループ化 子孫セレクタ a要素に対する疑似クラス 参照 idセレクタ classセレクタ セレクタのグループ化 子孫セレクタ a要素に対する疑似クラス ※通常、検証ツールのCSSパネルには表示されないので、状態名をクリック …

HTML:要素のグループ化

ブロックレベル要素としてグループ化 id属性・class属性 インライン要素としてグループ化 ブロックレベル要素としてグループ化 ※</div>の後に、コメントでid名やclass名を記述するとわかりやす。 id属性・class属性 インライン要素としてグループ化

HTML:コメントブロックの定義

コメントブロックの定義

HTML:実体参照

実体参照 実体参照 表示 文字実体 数値文字 表示 文字実体 数値文字 < &lt; &#60; > &gt; &#62; & &amp; &#38; " &quot; &#34; © &copy; &#169; ® &reg; &#174; ™ &trade &8482 改行しないスペース &nbsp; &#160;

HTML:テーブルの定義

テーブルの定義 テーブルの属性 テーブルの行や列の連結属性 テーブルの定義 <table border="1"><tr><th>料金</th><th>平日</th><th>土曜</th><th>日曜・祝日</th></tr><tr><td>ギター</td><td>2,000円</td><td>2,500円</td><td>3,000円</td></tr><tr><td>ベース</td><td>2,000円</td><td>3,000円</td><td>3,500円</td></tr><tr><td>アンプ</td><td>2,000円</td><td>3,000円</td><td>3,000円…</td></tr></table>

HTML:リストの定義

番号なしリストの定義 番号付きリストの定義 定義リストの定義 番号なしリストの定義 <ul> <li>●●●●</li> <li>●●●●</li> <li>●●●●</li> </ul> 番号付きリストの定義 <ol> <li>●●●●</li> <li>●●●●</li> <li>●●●●</li> </ol> 定義リストの定義 <dl> <dt>●●●●</dt> <dd>◆◆◆◆◆<dd> <dt>●●●●</dt> <dd>◆◆◆◆◆<dd> <dt>●●●●</dt> <dd>◆◆◆◆◆<dd> </dl> ※定義リストの場合、上図点線で囲まれた範囲を指定する…

HTML:属性の記述法

HTML属性記述のルール

HTML:文章を定義するタグ

見出しの定義 段落の定義 改行の定義 水平線・区切りの定義 強調の定義 強い重要性の定義 整形済みテキストの定義 長い引用文の定義 短い引用文の定義 引用元のタイトルの定義 後から内容追加・削除 の定義 斜体で表示 太文字で表示 見出しの定義 段落の定義…

HTML:タグの記述法

HTML:ブロックレベル要素・インライン要素

要素のカテゴライズ ブロックレベル要素 インライン要素 置換インライン要素(インラインブロック要素) ブロックレベル・インライン要素表示 要素のカテゴライズ ブロックレベル要素 インライン要素 ※a要素のみ、ブロックレベル要素を含むことができる。 置…

HTML:画像の定義

画像の定義 画像の属性 画像にリンクを定義 画像の定義 <p><img src="ファイルパス" alt="代替文字"></p> ※pタグやfigureタグなど、改行される仕様のタグに、当該imgタグのみを内包することで、CSSでのレイアウトがしやすくなる。 ※windowsでは有効だったリンクが、サーバ上では無効になるケースあり。 原因…

HTML:リンクを定義する

リンクの定義 絶対パス 相対パス ページ内リンク リンクの定義 <a href="リンク先パス">リンクさせたい文字</a> 別ウィンドウで開く場合 <a href="リンク先パス" target="_blank">リンクさせたい文字</a> a hrefと targetとの順序は逆でも良い 絶対パス 相対パス ※「./」(自分のいる階層)は、省略可能 ※パスの巻頭に「/」を記述し、…

HTMLの基本構造

HTMLの基本構造 文字コードの指定 ページのタイトル定義 ■HTML 4.01 Strict DTD<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>無題ドキュメント</title></head> <body></body></html> ■HTML 4.01 Transitional DTD<…