【HTML】CSSを使ってひと工夫。

font-weight:bold;
}




そしてHTML。


〈i〉ここに小見出し〈/i〉
〈u〉ここに見出しテキスト〈/u〉




〈〉を＜＞に変えてください。



小見出しは、POINT の部分。
見出しテキストは、「このような見出しをつけるには？」の部分です。





応用
色や形を少し変えてみよう



CSSソースの前半のかたまりは、小見出し部分のデザインを指定しています。
後半のかたまりは、見出し部分のデザインを指定しています。



【小見出し】

#u_result i{

display:inline-block;/*ここから6つは変えない*/

padding:0px 4px;

line-height:1.5;

position:relative;

bottom:-0.2em;

font-style:normal;

background-color:#D0B0FF;/*背景色(今は紫)*/

border-radius:7px 7px 0px 0px;/*角丸み(左上 右上 右下 左下)*/

color:#FFFFFF;/*文字色(今は白)*/

font-size:105%;/*文字サイズ*/

}




【見出し】

#u_result u{

display:inline-block;/*ここから5つは変えない*/

text-decoration:none;

line-height:1.5;

text-align:center;

padding:15px 15px;

background-color:#fdfdfd;/*背景色(今は薄いグレー)*/

border-top:3px solid #D0B0FF;/*上の線(太さ 線の種類 色)*/

border-bottom:3px solid #D0B0FF;/*下の線(太さ 線の種類 色)*/

color:#000000;/*文字色(今は黒)*/

font-size:155%;/*文字サイズ(通常は100%)*/

font-weight:bold;/*文字を太く(通常に戻す場合は「normal」に変更)*/

}






POINT
オシャレな囲みをつける方法





POINT

このように、内側に小見出しが付いたオシャレな囲み(ボックス)を作る方法をお教えします。色や形を変えることもできますよ。



改行してもズレません。






まずはCSS。



#u_result strong{
display:inline-block;
font-weight:normal;
background-color:#FFBEDA;
border-radius:0px 0px 10px 0px;
color:#FFFFFF;
font-size:105%;
position:relative;
top:-0.4em;
left:-0.4em;
padding:1px 2px;
}



#u_result b{
display:inline-block;
font-weight:normal;
background-color:#FFFFFF;
color:#000000;
border:3px solid #FFBEDA;
padding:4px;
}



そしてHTML。


〈b〉〈strong〉ここに小見出し〈/strong〉

ここに囲むテキスト(改行可能)〈/b〉



毎度の如く〈〉を＜＞に変えます。





応用
色や形を少し変えてみよう


先程同様、上のかたまりが小見出し、下のかたまりが囲んでいるデザインを指定しています。



【小見出し】

#u_result strong{

display:inline-block;/*ここから6つは変えない*/

font-weight:normal;

position:relative;

top:-0.4em;

left:-0.4em;

padding:1px 2px;

background-color:#FFBEDA;/*背景色(今はピンク)*/

border-radius:0px 0px 10px 0px;/*角丸み(左上 右上 右下 左下)*/

color:#FFFFFF;/*文字色(今は白)*/

font-size:105%;/*文字サイズ*/

}




【囲まれてる部分】

#u_result b{

display:inline-block;/*ここから3つは変えない*/

padding:4px;

font-weight:normal;

background-color:#FFFFFF;/*背景色(今は白)*/

color:#000000;/*文字色(今は黒)*/

border:3px solid #FFBEDA;/*囲み線(太さ 線の種類 色)*/

}







私はいつも、このサイトを参考に、CSSを勉強しています。


詳しいCSSのやり方の他に、いいアイデアが沢山載っていますので、皆さんも是非参考にしてみてください。



リクエスト等あればコメント欄まで。