追加のスタイルシート

テンプレート ＞

2019/06/03

H3見出しの追加分や、いつもの文字装飾用のスタイルシートです。
『style.css』に追加してもOKなのですが自分で探しやすいので『sub.css』としました。

sub.css

下の記述を全文コピペで『sub.css』としてアップロードします。

sub.css (コピペ出来ます)

@charset "utf-8";

/*h3.grタグの設定*/
h3.gr, div.gr, span.gr {
	background-color: #FFF;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #d6d0c7), color-stop(0.00, #a74864));
	background: -webkit-linear-gradient(#a74864, #d6d0c7);
	background: -moz-linear-gradient(#a74864, #d6d0c7);
	background: -o-linear-gradient(#a74864, #d6d0c7);
	background: -ms-linear-gradient(#a74864, #d6d0c7);
	background: linear-gradient(#a74864, #d6d0c7);
	background-repeat: no-repeat;		/*背景の丸いマーク画像をリピートしない設定*/
	background-position: left center;	/*背景の丸いマーク画像の位置*/
	-webkit-box-shadow: 1px 2px 5px #e2e2e2;	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	box-shadow: 1px 2px 5px #e2e2e2;			/*同上*/
	font-size: 100%;
	color: #FFF;	/*文字色*/
	padding: 4px 15px;	/*上下、左右への余白*/
	clear: both;
	border: 1px solid #635946;	/*枠線の幅、線種、色*/
	border-radius: 6px 6px 6px 6px;	/*角丸のサイズ。左上、右上、右下、左下の順の設定。*/
	margin: 5px 0px;
}

/*h3.gr1タグの設定*/
h3.gr1, div.gr1, span.gr1 {
	background-color: #FFF;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#f4f4f4));	/*グラデーション*/
	background: -webkit-linear-gradient(#FFF, #f4f4f4 49%, #e8e8e8 50%, #FFF 100%);	/*同上*/
	background: linear-gradient(#FFF, #f4f4f4 49%, #e8e8e8 50%, #FFF 100%);			/*同上*/
	background-repeat: no-repeat;		/*背景の丸いマーク画像をリピートしない設定*/
	background-position: left center;	/*背景の丸いマーク画像の位置*/
	-webkit-box-shadow: 1px 2px 5px #e2e2e2;	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	box-shadow: 1px 2px 5px #e2e2e2;			/*同上*/
	font-size: 100%;
	color: #635946;	/*文字色*/
	padding: 4px 15px;	/*上下、左右への余白*/
	clear: both;
	border: 1px solid #635946;	/*枠線の幅、線種、色*/
	border-radius: 6px 6px 6px 6px;	/*角丸のサイズ。左上、右上、右下、左下の順の設定。*/
	margin: 5px 0px;
}

/*h3.gr2タグの設定*/
h3.gr2, div.gr2, span.gr2 {
	background-color: #FFF;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #0ff), color-stop(0.00, #0f0));
	background: -webkit-linear-gradient(#0f0, #0ff);
	background: -moz-linear-gradient(#0f0, #0ff);
	background: -o-linear-gradient(#0f0, #0ff);
	background: -ms-linear-gradient(#0f0, #0ff);
	background: linear-gradient(#0f0, #0ff);
	background-repeat: no-repeat;		/*背景の丸いマーク画像をリピートしない設定*/
	background-position: left center;	/*背景の丸いマーク画像の位置*/
	-webkit-box-shadow: 1px 2px 5px #e2e2e2;	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	box-shadow: 1px 2px 5px #e2e2e2;			/*同上*/
	font-size: 100%;
	color: #000;	/*文字色*/
	padding: 4px 15px;	/*上下、左右への余白*/
	clear: both;
	border: 1px solid #635946;	/*枠線の幅、線種、色*/
	border-radius: 6px 6px 6px 6px;	/*角丸のサイズ。左上、右上、右下、左下の順の設定。*/
	margin: 5px 0px;
}

/*文字色*/
.pink {
	color: #ff3366;
}
.mido {
	color: #00cc00;
}
.red {
	color: #ff0000;
}

/* ボタンのデザイン */
.botan-blue {
font-weight: bold;
text-align: center;
text-decoration:none;
padding: 2px 5px;
margin: 5px;
border-radius: 3px;
color: #ffffff;
background-color: #1486b8; border-style: solid; border-width: 1px; border-color: #026892;
}

.botan-white {
font-weight: bold;
text-align: center;
text-decoration:none;
padding: 2px 5px;
margin: 5px;
border-radius: 3px;
color: #333333;
background-color: #ffffff; border-style: solid; border-width: 1px; border-color: #333333;
}

.botan-black {
font-weight: bold;
text-align: center;
text-decoration:none;
padding: 2px 5px;
margin: 5px;
border-radius: 3px;
color: #ffffff;
background-color: #000000; border-style: solid; border-width: 1px; border-color: #000000;
}

.botan-blackao {
font-weight: bold;
text-align: center;
text-decoration:none;
padding: 2px 5px;
margin: 5px;
border-radius: 3px;
color: #00ccff;
background-color: #000000; border-style: solid; border-width: 1px; border-color: #000000;
}

.botan-aka {
font-weight: bold;
text-align: center;
text-decoration:none;
padding: 2px 5px;
margin: 5px;
border-radius: 3px;
color: #333333;
background-color: #ffffff; border-style: solid; border-width: 3px; border-color: #ff0000;
}

/* アンダーライン */
.red-under {
  border-bottom: solid 3px #ff0000;
  }
  
.grn-under {
  border-bottom: solid 3px #00ff00;
  }
  
.pink-under {
  border-bottom: solid 3px #ff00ff;
  }
  
.mizu-under {
  border-bottom: solid 3px #00ffff;
  }
  
/* マーカー */
.marker {
  background: linear-gradient(transparent 0, #ffff00 0);
  }
.redmarker {
  background: linear-gradient(transparent 0, #ff0000 0);
  }
.grnmarker {
  background: linear-gradient(transparent 0, #ccffcc 0);
  }
.pinkmarker {
  background: linear-gradient(transparent 0, #ffccff 0);
  }
.mizumarker {
  background: linear-gradient(transparent 0, #ccffff 0);
  }

/*アンダーラインマーカー*/
.marker-under {
  background: linear-gradient(transparent 50%, #ffff00 50%);
  }
.redmarker-under {
  background: linear-gradient(transparent 50%, #ff0000 50%);
  }
.grnmarker-under {
  background: linear-gradient(transparent 50%, #ccffcc 50%);
  }
.pinkmarker-under {
  background: linear-gradient(transparent 50%, #ffccff 50%);
  }
.mizumarker-under {
  background: linear-gradient(transparent 50%, #ccffff 50%);
  }

/*背景色有りテキスト*/
.infob {
  background-color:#f0f8ff;  /*背景水色*/
  border:1px solid #294be6;
  padding:10px;
  overflow: auto;
}

/*背景色有りテキスト*/
.infop {
  background-color:#f4ebee;  /*背景ピンク色*/
  border:1px solid #a74864;
  padding:10px;
  overflow: auto;
}

/*背景色有りテキスト*/
.infow {
  background-color:#ffffff;  /*背景白色*/
  border:1px solid #e2e2e2;
  padding:10px;
  overflow: auto;
}

/*枠線を付ける 影あり*/
.waku {
	-webkit-box-shadow: 1px 2px 5px #e2e2e2;	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	box-shadow: 1px 2px 5px #e2e2e2;			/*同上*/
	border:2px solid #ebebeb;
	margin:10px auto 10px;
}

/*枠線を付ける */
.waku2 {
  border:4px solid #ebebeb;
  margin:10px auto 10px;
}

/*===枠無しarticle===*/
article.non {
padding:10px 20px;
margin-bottom:20px;
border:0;
overflow:hidden;
}

section.content article.non {
padding:10px 20px;
margin-bottom:20px;
border:0;
overflow:hidden;
}

HTMLに１行追加

『sub.css』を使用したい『〜〜.html』の下図マーカー部分のすぐ下の行に１行追加します。

<link rel="stylesheet" href="sub.css" type="text/css" media="screen">

サンプル見出し

h3 class="heading" (デフォルト)

h3 class="gr"

h3 class="gr1"

h3 class="gr2"

サンプル文字装飾

span class="pink"、span class="mido"、span class="red"

span class="botan-blue"、span class="botan-white"、span class="botan-black"

span class="botan-blackao"、span class="botan-aka"

span class="red-under"、span class="grn-under"、span class="pink-under"、span class="mizu-under"

span class="marker"、span class="redmarker"、span class="grnmarker"
span class="pinkmarker"、span class="mizumarker"

span class="marker-under"、span class="redmarker-under"、span class="grnmarker-under"
span class="pinkmarker-under"、span class="mizumarker-under"

背景色有りテキスト

p class="infob"

p class="infop"

p class="infow"

枠線を付ける

p class="waku"

span class="waku"

画像の場合も下のようにマーカー部分を追加で枠付きになります。
<img src="images/gazou.png" width="247" height="23" alt="" class="waku">


p class="waku2"

span class="waku2"

画像の場合も下のようにマーカー部分を追加で枠付きになります。
<img src="images/gazou.png" width="247" height="23" alt="" class="waku2">

枠無しarticle

article class="non"

TOP


Copyright © TM_BB. All Rights Reserved. Design by https://f-tpl.com