<p class="ex_linkbtn">
<a href="#"><span>Click!!</span></a>
</p>

CSS

p.ex_linkbtn {
  display: inline-block;
  height: 34px;
  font-size: 14px;
  font-weight: bold;
}
p.ex_linkbtn a {
  display:inline-block;
    margin: 0 25px 0 10px;
  background:transparent url('img/bg_middle.png') repeat-x left top;
  height: 34px;
  color: #EEE;
  text-decoration:none;
}
p.ex_linkbtn a span{
  display:inline-block;
  padding:0 10px 0 0;
}
p.ex_linkbtn a:before, .ex_linkbtn a:after {
  display: inline-block; 
  content: "";
  height: 34px;
  background-repeat: no-repeat;
  vertical-align: middle;
}
p.ex_linkbtn a:before {
  margin-left: -10px;
  width : 10px;
  height : 34px;
  background:transparent url('img/bg_left.png') no-repeat left top;
}
p.ex_linkbtn a:after {
  margin-right: -20px;
  width : 20px;
  height : 34px;
  background:transparent url('img/bg_right.png') no-repeat left top;
}
/* hover */
p.ex_linkbtn a:hover {
  background:transparent url('img/bg_middle_on.png') repeat-x left top;
}
p.ex_linkbtn a:hover:before {
  background:transparent url('img/bg_left_on.png') no-repeat left top;

}
p.ex_linkbtn a:hover:after {
  background:transparent url('img/bg_right_on.png') no-repeat left top;
}

投稿 擬似要素を使って長さに対応するボタンを作ります。 は CodingMania に最初に表示されました。

<video poster="poster.jpg" width="640" height="360" controls preload>
<source src="https://codingmania.net/demo/video/0001/movie/movie.mp4" />
<source src="https://codingmania.net/demo/video/0001/movie/movie.ogv" /> 
<p>ご利用のブラウザーでは再生できません。<a href="movie/movie.mp4">コチラ</a>からダウンロードしてください。</p>
</video>

投稿 html5のvideo要素だけを使って動画を再生する は CodingMania に最初に表示されました。

<p><a href="sample.pdf" target="_blank">PDFへリンク</a></p>
<p><a href="sample.doc" target="_blank">Wordへリンク</a></p>
<p><a href="sample.xls" target="_blank">Excelへリンク</a></p>
<p><a href="sample.pps" target="_blank">PowerPintファイルへリンク</a></p>
<p><a href="sample.zip" target="_blank">zipファイルへリンク</a></p>
<p><a href="sample.exe" target="_blank">zipファイルへリンク</a></p>

CSS

a[href$=".pdf"] {
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_pdf.gif) no-repeat center right;
}
a[href$=".doc"] { 
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_doc.gif) no-repeat center right;
}
a[href$=".xls"] { 
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_xls.gif) no-repeat center right;
}
a[href$=".pps"] { 
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_pps.gif) no-repeat center right;
}
a[href$=".zip"] { 
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_zip.gif) no-repeat center right;
}
a[href$=".exe"] { 
	min-height:16px;
	height:auto!important;
	height:16px;
	padding-right: 18px;
	background: transparent url(icon_exe.gif) no-repeat center right;
}

投稿 リンクするファイル・拡張子を区別してファイルアイコンを自動で表示 は CodingMania に最初に表示されました。

<p>ツールチップ表示の<a href="#" class="tooltip"><span>ここにツールチップテキストをいれる</span>デモリンクはここ</a>です。<br />
ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。<br />
ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。</p>

CSS

/* リンクスタイル設定 */
a.tooltip:link{color:#000;}
a.tooltip:visited{color:#000;}
a.tooltip:hover{color:#FFF; background-color:#690; text-decoration:none; position:relative;}
a.tooltip:active{color:#FFF; background-color:#690; text-decoration:none;}
/* ツールチップスタイル設定 */
a.tooltip span{
	display:none;
}
a.tooltip:hover span{
	display:block;
	position:absolute;
	top:25px;
	left:20px;
	white-space:nowrap;/* 折り返し無し */
	color:#000;
	text-decoration:none;
	line-height:1.2;
	border:#690 solid 2px;
	background-color:#FFC;
	padding:5px;
}

投稿 CSSでツールチップを表示します。 は CodingMania に最初に表示されました。

<div class="mod_Rollover001">
<p><a href="#"><img src="photoimage.jpg" width="220" height="124"></a></p>
<!--mod_Rollover001_end--></div>

CSS

.mod_Rollover001 a{
	width:220px;
	height:124px;
	padding:9px;
	display:block;
	border:1px solid #999;
	background:#FFF;
}
.mod_Rollover001 a:link    {}
.mod_Rollover001 a:visited {}
.mod_Rollover001 a:hover   {background:#666;}
.mod_Rollover001 a:active  {background:#666;}

投稿 CSSの背景色を使ってマウスオーバー時、画像に枠をつける。 は CodingMania に最初に表示されました。

<div class="mod_Rollover002">
<p><a href="#"><img src="Rollover_002.gif" width="220" height="60" alt="ボタン" /></a></p>
<!-- mod_Rollover002_end --></div>

CSS

.mod_Rollover002 a{
	display:block;
	width:220px;
}
.mod_Rollover002 a:link    {transition: opacity 0.3s ease 0s;}
.mod_Rollover002 a:visited {}
.mod_Rollover002 a:hover   {opacity:0.8;}
.mod_Rollover002 a:active  {opacity:0.8;}
/* IE用 ↓*/
.mod_Rollover002 a:hover img {-ms-filter: "alpha( opacity=80 )";} /* IE8 */
.mod_Rollover002 a:hover img {filter:alpha(opacity=80);}/* IE6 7 */

投稿 CSSでロールオーバー時に画像の透明度をふわっと変えます。 は CodingMania に最初に表示されました。

<div class="mod_Rollover001">
<p><a href="#"><img src="Rollover_001.gif" width="220" height="120" alt="ボタン" /></a></p>
<!-- mod_Rollover001_end --></div>

CSS

.mod_Rollover001{
	width:220px;
	height:60px;
	overflow:hidden;
}
.mod_Rollover001 a{
	display:block;
}
.mod_Rollover001 a:link    {}
.mod_Rollover001 a:visited {}
.mod_Rollover001 a:hover   {margin-top:-60px;}
.mod_Rollover001 a:active  {margin-top:-60px;}

投稿 CSSで1枚画像をスライド。ロールオーバーを表示します。 は CodingMania に最初に表示されました。

<div class="mod_Midasi003">
<h2>Midasi_003：背景とボーダー付見出し</h2>
<!-- mod_Midasi003_end --></div>

CSS

.mod_Midasi003{
	width:698px;
	padding:1px;
	border:solid 1px #CCC;
}
.mod_Midasi003 h2{
	padding:5px;
	font-size:1.4em;
	font-weight:bold;
	line-height:1.7;
	color:#666;
	background:#EFEFEF url('Midasi_003.jpg') repeat-x bottom left scroll;
}

投稿 CSSの背景画像と線を指定してボックスを装飾する は CodingMania に最初に表示されました。

<div class="mod_Midasi002">
<h2>Midasi_002：リストマークつき見出し</h2>
<!-- mod_Midasi002_end --></div>

CSS

.mod_Midasi002{
}
.mod_Midasi002 h2{
	min-height:23px;
	height:auto!important;
	height:23px;
	padding:0 0 0 30px;
	font-size:1.4em;
	font-weight:bold;
	line-height:23px;
	color:#666;
	background:transparent url('Midasi_002.gif') no-repeat 0 0 scroll;
}

投稿 CSSでテキストの先頭に画像を表示する は CodingMania に最初に表示されました。

<div class="mod_Midasi001">
<h1>Midasi_001：外枠つき</h1>
<!-- mod_Midasi001_end --></div>

CSS

.mod_Midasi001{
	width:700px;
	padding:5px;
	background:transparent url('Midasi_001.gif') repeat scroll;
}
.mod_Midasi001 h1{
	padding: 5px;
	font-size:1.4em;
	font-weight:bold;
	color:#666;
	background-color:#FFF;
}

投稿 CSSの背景画像を指定してボックスの外枠を変える は CodingMania に最初に表示されました。