ページレイアウトをページごとに一つひとつ作るというのは手間がかかり、効率的ではありません。HTMLでのページレイアウトは同じパターンで、CSSで表示を変え、内容に合ったデザインに見せるというのが、簡単にページを作るテクニックです。
不要なコンテンツを見えなくする方法を紹介します。
基本のHTMLパターン
<div class="contentA">コンテンツA</div>
<div class="contentB">コンテンツB</div>
<div class="contentC">コンテンツC</div>
表示
コンテンツA
コンテンツB
コンテンツC
display: none;
display noneの書式
CSS書式
.contentB {
display: none;
}
表示
コンテンツA
コンテンツC
要素ボックスそのものが消えます。
visibility: hidden;
visibility hiddenの書式
CSS書式
.contentB {
visibility: hidden;
}
表示
コンテンツA
コンテンツC
内容は消えますが、ボックスのレイアウトのみ残ります。レイアウトを変えずに内容のみ残したい場合に使います。
text-indent: -999em;
text-indent -999emの書式
CSS書式
.contentB {
text-indent: -999em;
}
表示
コンテンツA
コンテンツB
コンテンツC
文字は消えますが、ボックスのレイアウトとデザインは残ります。文字のみ消したい場合に使えます。