クラスと要素の関係

あれこれ指定しているうちに、何がなんだかわからなくなることがしょっちゅうなので覚え書き。

要素の中にクラスを指定した場合

(HTML)

<h2 class="hoge">
　：
　：
</h2>

(CSS)

h2.hoge {
　：
　：
}

クラスが指定された要素の場合

(HTML)

<div class="hoge">
<h2>
　：
　：
</h2>
</div>

(CSS)

.hoge h2 {
　：
　：
}

文字サイズを大きくしたときにもレイアウトが崩れないようにしたい

ひとつの単語が長いと、文字を大きくしたときに思わぬ結果を招いてしまう。

英単語はその長さのまま折り返されることなく表示されてしまうので、たちが悪い。

文字がはみ出てしまうときの処理（ブラウザに委ねる場合）

#hoge {
	width: 200px;
	overflow: auto;
}

基本的には下のように、スクロール表示になる。

あまり美しくないが、レイアウト自体が崩れてしまうくらいなら、こちらのほうがマシ。

リストの中身を横に並べたい

文章と同じように横に並べたいだけなら、display: inline; で十分かと。

リストの中身を横並びにする

li {
	display: inline;
}

回り込みさせる場合は以下。

li {
	float: left;
}

ちなみにリストの記号を取るには。

リストのスタイルをノーマルにする

li{
	list-style: none;
}

必要な要素だけを表示したい（スタイルシート）

デフォルトで表示される画面は、かなり見づらい。

カスタマイズしようとソースを見ると、こちらも非常に見づらく、
何が必要で何が不要なのか判断しづらい。

ここではレイアウトやデザインはあとで考えるとして、
まずは必要な要素だけを表示したい。

まず、新規でスタイルシートを作成する。
（ここではsite.cssという名前にする。）

最低限必要であろう指定は、marginとpaddingの初期化。

*は「すべてに適用させます」という意味。

つぎに<p></p><h1></h1>など、marginとpaddingを0に指定してもブラウザが自動で判断して書体が変化するタグへ、何も変化しないように指示をする。

（趣旨は「初期化」である。すべてのタグが同じように動作することを目的としている）

さらに、リストの表示に「・」などの記号は不要となるので、こちらも表示されないようにする。

画像を表示させるとき、枠線を表示しないようにする。

このスタイルシートを適用させる。
管理画面→デザイン→テンプレート→メインページ→HTMLヘッダー

CSSの詳細については説明を省く。
詳しく知りたい場合はこちらへどうぞ。

HTMLクイックリファレンス
http://www.htmq.com/index.htm

※元通りに戻せなくなっても責任を負いかねますので、
カスタマイズは自己責任において行ってください。