★CSS
●text-align
・・・行揃え
種類は、
{text-align: leff;}・・・左揃えです。
{text-align: right;}・・・左揃えです。
{text-align: center;}・・・左揃えです。
※インライン要素対象です。
※子孫要素も対象です。
（※文字や画像もインライン要素です。考え方としてこれが重要です。）
●ブロック要素の中央揃え
例えば、
#container{
width: ～px;
margin-left: auto;
margin-right: auto;
}
と記述すると、containerのidで囲まれた部分が中央にきます。
<div id="contants01">
<div id="contants02">
<h2>らーめん<h2>
<h3>みそらーめん<h3>
<h3>カレーらーめん<h3>
<h3>とんこつらーめん<h3>
</div>
</div>
↑のソースはHTMLで記述すると↓のようになります。
らーめん
みそらーめん
カレーらーめん
とんこつらーめん
↑のCSSの記述は・・・
/* div#contents01設定 */
div#contents01 {
border: solid 1px #000000;
background-color: #00ff00;
width: 500px;
height: 300px;
}
/* div#contents02設定 */
div#contents02 {
border: solid 1px #000000;
background-color: #ff2211;
width: 300px;
height: 200px;
margin: auto;
}
/* div#contents02 h2,h3設定 */
div#contents02 h2,h3{
text-align: center;
}
となります。
contents02がcontents01の中で左右の幅が等しい中央にきてますよね。
margin: auto;のCSSの記述でそうなってます。上下は真ん中にくると思ったけどこないようですね。
ちなみに、h2,h3タグの中のテキストがインライン要素なので、text-align: center;で真ん中にきてます。rightなら右、leftなら左に来ます。
●
コメントアウト上のCSSの記述のところに/* div#contents01設定 */ありますよね。
これは、コメントアウトと言ってブラウザが/* */の中に書いたものをプログラムとして読み込まないようになります。ここにCSSの説明など書けば、誰が見てもわかりやすいよになりますよね。使ってったほうが良いらしいです。
CSSは/* コメン */
HTMLは<!-- コメント -->
です。囲みは（<!---->、/* */)半角英数で、コメントは全角でもＯＫだそうです。
PR
