文字数と背景の長さをそろえる

widthで幅を指定しないと(a)のようになってしまうから、(b)のように文字数によって要素の幅が可変するものを作りたい

実際HTML/CSSを書いてみる

<h1>header title</h1>

• まずwidthにemで指定

h1 {
	background-color: gray;
	width: 12em;
}

背景はみ出まくり。。。
前記事【1emの・・・幅？ - Lv.1ノンプログラマの誰得メモ】の通り、文字数と幅指定はあまり関係ないみたい

• 次にwidthにautoで指定

h1 {
	background-color: gray;
	width: auto;
}

widthをautoにしても意味が無いみたい？

そこで使うのが、displayプロパティ

h1 {
	background-color: gray;
	display:inline;
}

じゃーん！！

displayプロパティの値をinlineにすることで、本来ブロック要素である<h1>をインライン要素として動作させます。することで、どんな文字数になってもご覧の通り！！

ただし、h1はインライン要素になってるので、前後にインライン要素をつけて

<h1>title</h1>
<a href="index">これはリンクです</a>

としてしまうと

このようになってしまいます
なので、divのようなブロック要素で囲むことによって

<div><h1>title</h1></div>
<a href="index">これはリンクです</a>

これでオッケー！

1emの・・・幅？

CSSで使う単位には、px,pt,em etc.　色々ある。中でemについてちょっと考えてみる
そもそも1emの定義は、その要素のfont-sizeプロパティ値（高さ）を１とするらしい

じゃあ幅は？
1emの幅ってどれくらいあるの？
文字の横幅なんて、全角・半角あるし、そもそも均等割り付けじゃない
1em分だけのインデントを指定したらどれくらい字下げされるの？

ってことで、HTMLとCSSを書いて確認してみた
文字の左の青い部分が1em（下線の青は境界が分かりやすいようにしただけ）

全角も半角も1emの幅サイズは変わらないのね
というか、1emの幅って高さと同じなのね
納得

htmlspecialchars()関数

htmlspecialchars()は、 HTML において特殊な意味を持つものを、 HTML の表現形式に変換するための関数。
例えば、この関数を使ったものと、使わないもので比べてみる。

sample04a.php

<?php

//htmlspecialchars()使用//
print ('name : ' . htmlspecialchars($_REQUEST['my_name']  ,  ENT_QUOTES).' <--使用'); 
print ('<br />');

//htmlspecialchars()未使用//
print ('name : ' . $_REQUEST['my_name'].' <--未使用');	

?>

「めぐさん」と入力してみる

何の変わりもない

じゃあ次
「<strong>めぐさん</strong>」と入力してみる

んん？！

htmlspecialchars()を使ってない方は、見事に<strong>タグが反映されちゃってますね
これは<abc>という意味のないものでも、”<”と”>”で挟まれた記号はHTMLタグと誤認識されるらしく、表示されない

表示させたい意味のある文字列を入力したとしても、これじゃあ表示されないし、HTMLタグが入れられるということは、レイアウトが崩壊したり、ハッキングされたり〜、非常に危険
だから、htmlspecialchars()を使おうぜ！！

htmlspecialchars()の２つ目のパラメータ”ENT_QUOTES”は、「'」 (シングルクオート) は 「＆#039;」になります