まとめ
仮に、ＨＴＭＬタグをボックスと呼ぶ。
アメブロでは、ほぼ、<div></div>タグが使用されている。
そのdivタグへ、ＣＳＳを指定する。
ボックスへの指定はどんな事が出来るのか…。
灰色の線は、実際に見えないものです。
解かりやすくするためにしてあります。
ＨＴＭＬタグを
<div id="oya">
<div class="aiueo">
<p>あいうえお</p><p>かきくけこ</p><p>さしすせそ</p><p>たちつてと</p>
</div>
</div>
と、例にします。
かきくこけ
さしすせそ
たちつてと
フォントを指定：イタリック・太字・14pxの大きさ・ゴシック（参照 ）
フォントの色指定：緑色（参照 ）
テキストの装飾：文字にアンダーライン（参照 ）
テキストの位置：左寄せ（参照 ）
行間：200%（参照 ）
.aiueo {
font : italic blod 14px 'MS ゴシック' , sans-serif ;
color : #339900 ;
text-decoration : underline ;
text-align : left ;
line-height : 200% ;
}
あいうえお
かきくこけ
さしすせそ
たちつてと
続いて…
ボックスの大きさ：幅200px・高さ200px（参照
）
ボックスの枠：太さ1px・黒・線（参照 ）
ボックスの背景：背景色黄色・背景画像なし（参照 ）
.aiueo {
font : italic blod 14px 'MS ゴシック' , sans-serif ;
color : #339900 ;
text-decoration : underline ;
text-align : left ;
line-height : 200% ;
width : 200px ;
height : 150px ;
border : 1px #000000 solid;
background : #ffff99 ;
}
あいうえお
かきくこけ
さしすせそ
たちつてと
続いて…
余白：外側の余白10px（参照 ）
.aiueo {
font : italic blod 14px 'MS ゴシック' , sans-serif ;
color : #339900 ;
text-decoration : underline ;
text-align : left ;
line-height : 200% ;
width : 200px ;
height : 150px ;
border : 1px #000000 solid ;
background : #ffff99 ;
margin : 10px ;
}
あいうえお
かきくこけ
さしすせそ
たちつてと
続いて…
余白：内側の余白5px（参照 ）
.aiueo {
font : italic blod 14px 'MS ゴシック' , sans-serif ;
color : #339900 ;
text-decoration : underline ;
text-align : left ;
line-height : 200% ;
width : 200px ;
height : 150px ;
border : 1px #000000 solid ;
background : #ffff99 ;
margin : 10px ;
padding : 5px ;
}
あいうえお
かきくこけ
さしすせそ
たちつてと
続いて…
はみ出し部分の表示：自動（参照 ）
.aiueo {
font : italic blod 14px 'MS ゴシック' , sans-serif ;
color : #339900 ;
text-decoration : underline ;
text-align : left ;
line-height : 200% ;
width : 200px ;
height : 150px ;
border : 1px #000000 solid ;
background : #ffff99 ;
margin : 10px ;
padding : 5px ;
overflow : auto ;
}
あいうえお
かきくこけ
さしすせそ
たちつてと
続いて…
回り込み：ボックスの位置右（参照 ）
.aiueo {
font : italic blod 14px 'MS ゴシック' , sans-serif ;
color : #339900 ;
text-decoration : underline ;
text-align : left ;
line-height : 200% ;
width : 200px ;
height : 150px ;
border : 1px #000000 solid ;
background : #ffff99 ;
margin : 10px ;
padding : 5px ;
overflow : auto ;
float : right ;
}
あいうえお
かきくこけ
さしすせそ
たちつてと
floatを削除し元に戻す…
.aiueo {
font : italic blod 14px 'MS ゴシック' , sans-serif ;
color : #339900 ;
text-decoration : underline ;
text-align : left ;
line-height : 200% ;
width : 200px ;
height : 150px ;
border : 1px #000000 solid ;
background : #ffff99 ;
margin : 10px ;
padding : 5px ;
overflow : auto ;
}
あいうえお
かきくこけ
さしすせそ
たちつてと
続いて…
ボックスの位置：上詰め・右寄せ（参照）
#oya {
position : relative ;
}
.aiueo {
font : italic blod 14px 'MS ゴシック' , sans-serif ;
color : #339900 ;
text-decoration : underline ;
text-align : left ;
line-height : 200% ;
width : 200px ;
height : 150px ;
border : 1px #000000 solid ;
background : #ffff99 ;
margin : 10px ; /*positionでは絶対的な値なので無効化される*/
padding : 5px ;
overflow : auto ;
position : absolute ;
top : 10px ; /*marginの余白分をプラス*/
right : 10px ; /*marginの余白分をプラス*/
}
あいうえお
かきくこけ
さしすせそ
たちつてと
続いて…
非表示（参照 ）
.aiueo {
display : none ;
}
領域を残したい場合は→（参照 ）
必要ないものは省いたり、もっと細かく上・横・下と指定したりします。