CSSでスタイルを設定していると「margin」と「padding」の基礎知識が曖昧だと使用する際に混乱しがちなので今回は両者の違いをまとめてみます。
marginとpaddingの関係図

marginの特徴
- borderの外側にスペース(余白)が設けられる
- スペース(余白)に背景色は適用不可
- marginに負数(-5pxなど)が使用可能
- 隣接した要素と相殺される(されないケースもあります)
paddingの特徴
- borderの内側にスペース(余白)が設けられる
- スペース(余白)に背景色を適用可能
- paddingに負数(-5pxなど)は使用不可
- 隣接した要素と相殺されない
ふとエスケープとエンコードの違いって何だろうと思ったので整理してみました。
どちらも「一定の規則に従い別の記号や文字列に置換する」という点では同義語に見えますが、根本的にその性質は全く異なるものです。
エスケープ
- HTMLでは「< 」を「&gt;」へ変換することをエスケープ処理と呼称します。この場合、画面上はエスケープしても「
エンコード
- 情報を暗号や通信に適した形式(コード)に変換すること。動画などの場合、この「形式」のことをコーデックと呼びます。
例えばURLコードへエンコードすると「半角スペース」は「%20」へ置換されます。そしてURLを見てみるとエンコード後の文字列がそのまま表示されています。
Web関連の開発をしていると必ずと言っていい程「GET」と「POST」という言葉が出てくるかと思います。
今回はHTTPの「GET」と「POST」の違いについてまとめてみます。
基本事項として
「GET」も「POST」もクライアントPCなどからサーバーに送信するデータ「リクエストパラメーター」を送信する方式となります。
Web開発初心者の方だと「GET」という言葉からサーバーからデータを取得するのかなあと勘違い(私だけ?)してしまうかもしれませんが、どちらも入力フォームのデータをサーバへリクエスト送信する際に使用します。基本的に以下の特徴を踏まえて、用途別に応じて適切に使い分ける必要があります。
GET送信の特徴
- HTMLの<form>タグの属性に「<form method=”get”>」のように指定して送信します。
- 「https://write-remember.com?id=abc&data1=123」のようにHTTPリクエストヘッダへリクエストパラメータが付与されます。
URLの後の「?」がgetパラメータ開始という意味となり、パラメータが複数ある場合は「&」で区切って指定されます。
- データをリクエストURLの末尾に付与して送信する方式となるため、Webサーバやプロキシサーバのアクセスログなどに残ることになります。
- 他の人がURLを見ると、入力したデータが丸見えになってしまうリスクがあるので、ログイン画面などではIDやパスワードが他者から丸見えになるのでGET送信は使用するべきではありません。
- URLの後に付与するのでデータ量(文字数)に制限が掛かる。(Internet Explorer のURLに使用できる最大文字数は最大2,048 文字)
- GETはHTTPヘッダ情報に含まれるため、簡単に取得することが可能。
- テキストデータのみ送信可能。
POST送信の特徴
- HTMLの<form>タグの属性に「<form method=”post”>」のように指定して送信します。
- HTTPのBODY部にリクエストパラメータが格納されます。
- GETのようにURLの末尾にパラメータは付与されません。
- 個人情報などの重要な情報や、データ量が多い場合はPOST送信を使用します。
- POSTはBODY部分(form)に含まれるため、取得がちょっと面倒。
- テキスト、バイナリどちらでも送信可能。
- POST送信後にブラウザの戻るボタン押下で有効期間切れが発生する場合がある。
- GETのように容易に他者からパラメータはわかりませんが、安全に個人情報を送信する際はPOSTに加えて暗号化などの処置を施す必要があります。
HTMLでコーディングしているときに、改行を表すタグとして
<br> と <br /> のどちらを使えばよいか迷ったことはありませんか?
結論から言えば、<br> は HTML、<br /> は XHTML の書き方 という違いがあります。
それぞれの特徴や使い分けについて整理してみましょう。
1. <br> と <br /> の基本的な違い
-
<br>
-
HTMLの標準的な改行タグ
-
開始タグだけで完結する「空要素」として扱われる
-
<br />
2. XHTMLでの記述例
XHTMLでは以下のように書きます。
<br /> のスラッシュ前には スペースを入れる ことが推奨されていました。
3. HTML5における扱い
現在主流の HTML5 では、<br> も <br /> もどちらも有効です。
ただし、HTML5はXML準拠を必須としていないため、よりシンプルな <br> が一般的に使われています。
4. 実務での使い分け
プロジェクトのコーディング規約に合わせることが最優先です。
まとめ
初心者は「基本は <br>、XHTMLの場合は <br />」と覚えておくと安心です。
🔧 補足:HTML仕様と実運用のポイント
現在のブラウザでは、<br> と <br /> のどちらも同じように改行を行います。
ただし、HTML5では「どちらの記法も許可」されていますが、XHTML互換性を意識する場合は <br /> のようにスラッシュを付けた自己終了タグを用いるのが安全です。
特に以下のようなケースでは注意しましょう:
実務上は「HTMLの書き方ポリシー」に合わせて統一することが大切です。
チーム開発では、コーディング規約に沿って記法を統一しておくと、可読性や保守性が向上します。
「駑馬十駕」を信念に IT系情報を中心に調べた事をコツコツ綴っています。