<li value="5"><span>ダミーテキスト5</span>

.sample2 br	{display:none; }

ul {overflow: hidden;

注釈文等で折り返した次の行以降を一文字おくります。サンプル5は、比較のための通常の文章で、一文字おくる文章と先頭を合わせるため、padding-left: 1emにしています。サンプル6が一文字おくった文章で、text-indent: -1emを付加しています。

.indentp2	{ padding-left: 1em; text-indent: -1em;}

「webページ制作担当者用CSS、jQuery等のテストページ」から採録
幅320pxのdiv要素内（赤紫の囲み）にliタグをfloatして、ブロック（画像100px、25px）を横並びに均等配置。

.menu { width: 320px; border: 1px solid #9d06ea; }

																	.menu ul { width: 330px; margin-right: -10px ;overflow: hidden;_zoom: 1;  }

																	.menu ul li { float:  left; list-style: none; margin-right: 10px;  }

																	.menu ul li img	{ margin: 0; }

<table class="main-t" width="560" cellspacing="2" cellpadding="0">

<colgroup span="1" class="gcol01"></colgroup>

<colgroup span="3" class="gcol02"></colgroup>

<colgroup span="2" class="gcol03"></colgroup>

.gcol01	{ background: #fff999; text-align: center;}
.gcol02	{ background: #dffcb1; text-align: right;}
.gcol03	{ background: #b1fcec; text-align: left;}

.clearfix:after
{content:""; display:block; clear:both;} 

<div id="testwrapp01" class="clearfix"> 

 <img ・・・>  <img ・・・> <img ・・・></div>

table-layout: fixed;

word-wrap: break-word;

abbr.help01:after { 
 margin: auto 4px; font-size: 1em; color:red; content: "*"; }
abbr.help01:hover:after {  
 padding: 3px 5px; olor: #555555; border: 2px solid  #b41315; content: attr(title) " の略語"; background: #ccffcc; }

  * { background: transparent; margin:0;  padding:0; zoom:1; } 

  #sample14 * { font-weight: bold; color: blue; } 

 <div id="sample14">子要素以外の部分は、影響を受けず、<span>子要素のみ適用されます。</span>こちらは子要素以外。<span>こちらも子要素</span>。</div>

blockquoteタグは引用文であることを表し、長めの文章を引用する場合に使います。一行以内の短めの文章の引用には、<q>タグを使用します。
引用元のurlなどを入れておくと、引用文であることがさらに分かりやすくなります。

blockquote.quote {

																			　width: 580px; padding: 0px; border: 1px solid #8cb7b8; margin: 10px 0 10px 30px; font-style: normal;

																			　background: url(img/quote2.png) no-repeat scroll top left;

																			　}

																		

																		blockquote.quote p {

																			　background: url(img/quote2end.png) no-repeat scroll bottom right;<br> 	padding: 10px 35px;margin: 0px;

																		　}

																		

																		blockquote.quote p a {color:#518F90;text-decoration: none;}

																		

																		blockquote.quote p a:hover {color: orangered;text-decoration: underline;}													

<blockquote class="quote">

																		<p>blockquoteタグは引用文であることを表し、長めの文章を引用する場合に使います。一行以内の短めの文章の引用には、&lt;q&gt;タグを使用します。<br>

																		<a href="#">引用元のurlなどを入れておくとさらに引用文であることが分かりやすくなります。</a></p>

																		</blockquote>

a[href*="test"]:after { content:"　★test★";
															color: #29a61c;
															font-weight: bold;
															}

a[title="css"]:before { content:"[css] ";
															color: blue;															font-weight: bold;
															}

タイトル

コンテンツ1

コンテンツ2

コンテンツ3

コンテンツ4

コンテンツ5

コンテンツ6

<dl id="sample15">

<dt>タイトル</dt>

<dd><a href="#">コンテンツ1</a></dd>

<dd><a href="#">コンテンツ2</a></dd>

<dd><a href="#">コンテンツ3</a></dd>

<dd><a href="#">コンテンツ4</a></dd>

<dd><a href="#">コンテンツ5</a></dd>

<dd><a href="#">コンテンツ6</a></dd>

</dl>

CSS

#sample15 dl { display: table; background-color: #eee; width: 640px; padding: 0px; border: 0;}

#sample15 dt, #sample15 dd { display: table-cell; height: 30px; vertical-align: middle; text-align: center;}

#sample15 dt { width:100px; font-size:15px; font-weight: bold; background-color: #c9c9c9; color: #444; }

#sample15 dd { width:90px; font-size:12px; font-weight: normal; background-color: #777; color:#ccc; }

#sample15 dd a { text-decoration: none; color:#ccc; }

#sample15 dd a:hover { text-decoration: none; color:#orange; }

画面のテキストを選択したときの背景色を「::selection疑似要素」を使って変更

webページ上で、ユーザーがテキストを選択してコピーする場合などに、選択ハイライトとして、背景色が強調されます。この背景色をCSSの「::selection疑似要素」を使うことで変更することができます。この部分と選択ハイライトのCSSを設定した下のサンプルとで、テキストを選択すると違いが分かります。

サンプル

テスト用テキスト・テスト用テキスト・テスト用テキスト・テスト用テキスト・テスト用テキスト・テスト用テキスト

CSS

.bg-hilite::selection { background: #fe77b0;}

.bg-hilite::-moz-selection {background: #fe77b0;}

画像を使わず、矢印として三角形を使う場合のtips

1. 三角形のフォントを使う　▲▼▶◀

   (使用例)　▲ページのトップに戻る

2. 横、縦のサイズを0にしたボックスのボーダーを使う

   横、縦のサイズを0にしたボックスのボーダーを「border: 10px solid #cccccc;」位に指定。
   #cccccc;は分かりやすくするためつけています。
   三角形を表示したいボーダー部分（top、bottom、left、right）の色を#333333に指定(例1)。
   表示したい三角形以外のボーダー部分をbackgroundと同じ色にすることで三角形のみを表示します(例2)。
   使用例は、サイズ、マージンを調整しています。
   
   (例1)　
   
   
   (例2)　
   
   
   (使用例1)　
   ページのトップに戻る
   
   
   (使用例2)　
   次のページへ
   
   

(使用例2)　HTML

<div class="f-left" style="margin-top:5px;">(使用例2)　</div>
<div class="sankakukei333"></div>
<div class="f-left" style="margin-top:5px;"><a href="#">次のページへ</a></div>

(使用例2)　CSS

		.sankakukei333	{ 

																				width: 0; height: 0; margin: 7px 0 0 0; float: left;

																				border: 7px solid #ffffff; border-left-color: #333333; }
		

この内容は、「webページ制作担当者用CSS、jQuery等のテストページ」にも収録しています。

【CSS3】foo属性を使って、タグの内容を判別して振り分け

【CSS3】のセレクターのfoo属性を利用することで、タグの内容を判別して、別のスタイルを適用させることができます。サンプルは、リンクのaタグの"href"の値が「http」で始まっている絶対パスであるかどうかを識別し、after疑似要素を使って「相対パス」または「絶対パス」を付加しています。

この内容についての詳細は、「webページ制作担当者用CSS、jQuery等のテストページ」に載せています。

サンプル
• [js] ChromeやSafariのonfocusの動きをフィックス 
• jQueryプラグインpresentation.jsを使って、画面全体のスライダー 

Internet Explorer 10からinput欄に自動表示されるクリアーボタンを消す方法

Internet Explorerは、バージョン10（標準モード）から、input欄などに自動でクリアーボタンが表示されるようになっています。これ自体は便利なものですが、IE9、IE8をはじめ他のブラウザでは表示されません。scriptなどでクリアーボタンを表示させるようにした場合（→「jQueryプラグインで、検索窓にクリアーボタン追加」）、IE10では表示が重複してしまいます（下画像）。

そこで、Internet Explorer 10に用意された「::-ms-clear疑似要素」を使って、自動で表示されるクリアーボタンを消します。スタイルで、次のように記述します。

input::-ms-clear	{
    visibility:hidden;
	}

IE10の自動表示されるクリアーボタンの無効確認

Search IE10でこのページを表示し、このインプット欄になにか入力しても、クリアーボタンは表示されません。

CSS3「text-overflow」を使って、テキストが領域からオーバーフローし、かつ「overflow: hidden; 」にしているとき、省略符号「…」をつけることができます。

「text-overflow: ellipsis;」で、省略符号「…」を表示
「text-overflow: clip;」で、省略符号非表示、になります。

(1)は、折り返し無し、「overflow: hidden;」で、オーバーフローした部分は非表示。
(2)は、(1)と同じですが、オーバーフローして非表示にしている部分があることを示す、省略符号の「…」が付きます。

ボックス内のp要素などを縦方向の中央に配置する場合、table要素のセル用の「vertical-align:middle」を指定しても、効果ありません。そこで、親要素に「display:table」、子要素に「display:table-cell;」を指定して、「vertical-align:middle」を有効にします。

サンプルでは、子要素のp要素が親要素全体に広がって図解しにくいため、p要素の中にspan要素を入れてborder表示しています。

ピンク色のborder部分が親要素のdiv、黄色の部分が子要素のp要素、ブルーのborder部分がspan要素です。

.box6 {　　　//親要素

　　　width: 500px;height: 200px;margin: 20px auto;display: table;border: 3px solid deeppink;
	}

.box6 p.va-middle {　　　//子要素

　　　display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-weight: bold;

　　　font-size: 16px;
	background: #99ff99;
	}

.box6 p.va-middle span {　　　//子要素の中のspan要素

　　　display: inline-block;
	padding:5px 8px;
	border:3px solid blue;
	}

「opacity」を使った半透明では、文字や背景、ボーダーまでも半透明になります。

上側サンプルは、背景の背景に画像を使い、文字色を黒、ボーダー色を黒、背景を白に指定し、opacityで50%の半透明にしています。文字やボーダーも半透明になっているのが分かります。

color:#000; border: 1px solid #000;

	background: #fff; opacity: 0.5;

下側サンプルは、上側とほぼ同じ条件で、背景色指定、透明度指定のみをrgbaにしています。透明度はa（アルファチャンネル）で上側と同じ50%に指定しています。文字色、ボーダー色は指定どおりの色になっています。

color:#000; border: 1px solid #000;

	background: rgba(255,255,255,0.5);

インライン要素扱いのimgの左右中央揃えをするときは、中央揃えのCSS指定をした親要素（divタグなど）で包むことが多いですが、img単体でも中央揃えが可能です。次のように、「display:block」でブロック要素扱いにすることで、marginのautoが有効になります。その他、「display:table」や「display:list-item」などでも同様になります。

<img style="display:block;margin:20px auto;" src="img9/smalltile.png" width="70">

ol.paren  {
	padding:0 ;
	width:600px;
	margin:1em 0 1.5em 4em;
	}

ol.paren li  {
	list-style-type:none;
	counter-increment: cnt;
	text-indent:-2.5em;
}

ol.paren li:before  {
	display: marker;
	content: "( "counter(cnt) " )";
	}

<meta name="format-detection" content="telephone=no">