HTML/CSSはじめました!:文字飾りのCSS


投稿日: html/CSSはじめました! , ,

文字飾りのCSSを紹介します。


使用例

<head>
<style>

#example1 {

/*フォントサイズの設定*/
font-size: 20px;
/*文字の色を設定*/
color: #F03;
/*バックの色を設定*/	  
background-color: #CF6;
/*左線をつける*/	  
border-left: solid 7px #33FFCC;
/*下線を引く*/
border-bottom: dotted 3px #000000;

}
		  
#example2 {
	
/*フォントサイズの設定*/
font-size: 25px;
/*文字の色を設定*/
color: #F03;
/*バックの色を設定*/	  
background-color: #CF6;
/*余白を調整*/
padding-top: 5px;
padding-left: 60px;

}
		  
#example3{

/*フォント種類を設定*/
font-family: "MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
/*フォントサイズを設定*/
font-size: 36px;
/*フォントスタイルを設定*/
font-style: italic;
/*上部に破線*/
border-top-style: dotted;
/*左側線を指定しない*/
border-right-style: none;
/*下部に破線*/
border-bottom-style: dotted;
/*下部線を指定しない*/
border-left-style: none;
/*上部線の色*/
border-top-color: #CC3;
/*下部線の色*/
border-bottom-color: #F36;

}
</style>
</head>


<p>CSSの適応なし</p>

<p id = "example1">example1を適応あり</p>

<p id = "example2">example2を適応あり</p>

<p id = "example3">example3を適応あり</p>

<p>線の種類</p>
<p style = "border-bottom-style: solid">solid</p>
<p style = "border-bottom-style: dotted">dotted</p>
<p style = "border-bottom-style: dashed">dashed</p>

ブラウザでの表示

heml


少しでも、あなたのウェブページが充実しますように!!

スポンサードリンク

おすすめコンテンツ


スポンサードリンク