CSSのみで制御とは

Question

とあるサイト制作について、

＆nbsp; 改行コードは使わずに、CSSのみで制御を行うよう言われたのですが、一体どういう意味なのでしょうか？技術不足のため理解ができませんでした。どなたかご教授いただきますと有り難いです。

Answer 1

本当に文章を改行したいのであれば、<br>を使えばいいですし、
改行をしたくないスペースなのであれば、 (no break space)を使えばいいです。
別の意味で使ってはいけないってことです。

以下のようなブロック間の幅を確保するための<br>などは好ましくありません。
メニューとメインの間はもう少し隙間が欲しいから<br/>を増やしてっと。。。みたいなことです。
<br>は改行を意味するもののため、文章以外で使われていること自体がおかしいんです。

<header></header>
<br />
<aside></aside>
<br /><br />
<article id="main"></article>
<br /><br /><br />
<footer></footer>

同様の理由で以下のようなものもおかしいです。

<input type="text" id="first-name" />&nbsp;&nbsp;&nbsp;<input type="text" id="last-name" />

レイアウトの縦間隔のために<br />を、
横間隔のために を乱用する人は今でもいてますが、やめた方がいいです。
HTMLは文書構造を意味するものだけのため、レイアウトやデザインに関わってくるべきではないからです。

例えば、今回のような<br>もそうですし、<font color="red">テキスト</font> や
<center><table>略</table></center> などもです。
こういうレイアウトやデザインを表すタグは昔は使えたのですが、
今では非推奨もしくは廃止されています。

そしてレイアウトやデザインを担うのがCSSです。
今回で言うのであれば、隙間が欲しいのであれば、「余白」を意味するmarginを使いましょう。

見た目的には<br>と で望んだものになるかもしれませんね。
それでも、タグには１つ１つ意味があるため、その意味以外で使うのはやめましょう。
というのがHTML5の考え方です。
この考えにのっとったHTMLをセマンティックHTMLと言います。

これに反する代表的なものが、テーブルレイアウトですね。

<table>タグを使ってレイアウトをするやつです。 <table>は表なので、表以外では使うべきでありません。

それぞれのセマンティクス（意味）が分かりやすいと、
検索エンジンのクローラーなどにとても好かれやすいため、検索結果が上位にきやすかったりします。
細部まで解析しなくても、大まかなタグの構造を見るだけで、
ある程度ちゃんと作られたサイトだなってのが分かるためです。

最初に書いたHTMLはちょっと前までは以下のように書いていました。

<div id="header"></div>
<br />
<div id="menu"></div>
<br/><br/>
<div id="main"></div>
<br/><br/><br/>
<div id="footer"></div>

しかし、これは文書として何の意味も持たないため、綺麗ではありません。
<div>タグ自体が特に意味を持っていないからです。
今やそれらを表す代わりとなるタグがありますので、それらを使うべきだということになります。

ちょっと話しが脱線してるように思えるかもしれませんが、

＆nbsp; 改行コードは使わずに、CSSのみで制御を行うよう言われた

そうしなければならない理由の本質的な部分は、こういうことです。
「HTMLは文書構造のみを、レイアウトやデザインはCCSで」です。

Answer 2

ソースが無いのでわかりませんが、<br>の連続とかをやっちゃったのでは？
あと、 をスペース空けるために使ってたとか…
いずれも、paddingormarginで対応してくれということじゃないかと思います。

Comments

[退会済みユーザー]

ソース貼るべきでした。cssの中のpaddingとmarginを確認してみます。ソースのない中、回答頂けたことに感謝しております。ありがとうございます。