HTMLコーディングするとき、イラっとしたこと～CSS編其の陸～

7月の中盤に入りましたね。

だんだん気温が高くなり、一部の地域では40℃超えが出てきてますね。

そろそろ水際対策の規制が緩和され、海外に旅行する人が増えてますね。

また、第7波が来てるみたいですが…

その前に、COVID-19が終息することを願うばかりです！

さてと本題に入りましょう。

HTMLコーディングするとき、イラっとしたこと～CSS編其の陸～

ある制作会社がトラブルで費用がかさむとなった時、引継ぎでこちらで依頼することがほとんど多いです。

引継ぎはの中身の内容によりますが…

話を取り戻して…

HTMLのページをコーディングするときに、中身（プログラム）を見るとド素人っぽくイラっとしました。

これで外注した費用が数百万をかけて中身が適当で情けなく感じました。

Web制作会社はどこまでぼったくるんやろって…

（ここまでの前置き（笑））

均等割り付けの時に<span>を使って均等割付する人がいました！

ホンマに情けなくて…

今の時代は何だと思ってるんだ！といいたいぐらいです。

サルでも優しい使い方を教えましょう。

NGな部分

<dl class="sample">
	<dt class="title">開催期間</dt>
	<dd class="guide">3月25日（金）～27日（日）</dd>

	<dt class="title"><span class="space01">定</span>員</dt>
	<dd class="guide">各日40名</dd>

	<dt class="title"><span class="space02">参加</span>費</dt>
	<dd class="guide">無料</dd>

	<dt class="title">申込方法</dt>
	<dd class="guide">別紙参照</dd>
</dl>

.sample{
	display:block;
	margin:0;
	padding:0;
}
.sample .title{
	float:left;
	margin:0;
	padding:0;
}
.sample .title .space01{
	letter-spacing:2em;
}
.sample .title .space02{
	letter-spacing:0.5em;
}
.sample .guide{
	padding:0 0 0 100px;
	margin:0 0 5px;
}

上記のHTMLとCSSのコードを見ると笑えました！
お客様のお金をぼった来るのはどうかと思います。

プロとして、ちゃんとした正しいコードをお見せしましょう！

こっちがプロが当たり前のようにコードの記述方法を見てください！

<dl class="sample">
	<dt class="title">開催期間</dt>
	<dd class="guide">3月25日（金）～27日（日）</dd>

	<dt class="title">定員</dt>
	<dd class="guide">各日40名</dd>

	<dt class="title">参加費</dt>
	<dd class="guide">無料</dd>

	<dt class="title">申込方法</dt>
	<dd class="guide">別紙参照</dd>
</dl>

.sample{
	display:block;
	margin:0;
	padding:0;
}
.sample .title{
	float:left;
	margin:0;
	padding:0;
	text-align:justify;
	text-align-last:justify;/* 均等割り付けに使うコード */
	width:100px;/* 長さを指定しておかないと均等割り付けができない */
}

.sample .guide{
	padding:0 0 0 100px;
	margin:0 0 5px;
}

という風にコーディングを行います。

ご参考までに！

ではまた！