ヘッダー・コニファロゴお問い合わせ営業日カレンダーサイトマップコニファHOME
コニファ:ツール紹介やプログラム集・CSSの小技・まとめ
 

● CSSの小技・まとめ

最終更新:2017.08.17

olを使った箇条書きの開始番号を指定 + 昇降を逆に

順序付きリスト<ol>(ordered list)の最初の子要素<li>にvalue=""で開始番号を指定します。
また、すべての子要素<li>にvalue=""を指定することで、昇降を逆にすることも可能です。
<li value="5"><span>ダミーテキスト5</span>
通常のol
  1. ダミーテキスト5
  2. ダミーテキスト6
  3. ダミーテキスト7
  4. ダミーテキスト8
最初の <li>にvalue値を指定したol ( <li value="5"> )
  1. ダミーテキスト5
  2. ダミーテキスト6
  3. ダミーテキスト7
  4. ダミーテキスト8
すべての <li>にvalue値を指定したol ( <li value="4"> から<li value="1"> )
  1. ダミーテキスト5
  2. ダミーテキスト6
  3. ダミーテキスト7
  4. ダミーテキスト8

htmlソース内に記述されている<br>を無効化

cssの指定で、br {display:none; }を記述します。<br>を一時的に無効にして、デザインを確認するときなどに役立ちます。下のサンプルはともに「ダミーテキスト」の後ろに<br>が入っています。サンプル2は、br {display:none; }を指定しています。
.sample2 br	{display:none; }
●サンプル1

ダミーテキスト
ダミーテキスト
ダミーテキスト
ダミーテキスト

●サンプル2

ダミーテキスト
ダミーテキスト
ダミーテキスト
ダミーテキスト

リストにborder-topを付けたとき、最初のborderのみを消す

リストにborder-topを付け、全体をborderで囲んだ場合、最初のborderがデザイン的にじゃまになることがあります(●サンプル3)。直に対象のliにborderを消すcssを記述しても良いのですが、動的にリストを生成する場合などはかえって面倒です。そのようなときは、ulにoverflow: hiddenを指定するだけで済みます(●サンプル4)。
ul {overflow: hidden;
●サンプル3
  • ダミーテキストダミーテキスト
  • ダミーテキストダミーテキスト
  • ダミーテキストダミーテキスト
  • ダミーテキストダミーテキスト
●サンプル4
  • ダミーテキストダミーテキスト
  • ダミーテキストダミーテキスト
  • ダミーテキストダミーテキスト
  • ダミーテキストダミーテキスト

注釈文等で折り返した次の行以降を一文字おくる

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

●サンプル5

※マークを付けた注釈文等で文章が長くなって折り返したときに次の行の最初の文字がマークと並んでしまうと注釈文として分かりづらくなる。

●サンプル6

※マークを付けた注釈文等で文章が長くなって折り返したときに次の行の最初の文字がマークと並んでしまうと注釈文として分かりづらくなる。

サンプル6のソース
.indentp2	{ padding-left: 1em; text-indent: -1em;}

div要素内にある横並びブロックに対して、div要素の幅に合わせてマージンをつける

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

●サンプル7

サンプル7のソース
.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; }

col要素、colgroup要素を使って、データの種類ごとにグループ化して背景色を設定。

table要素の縦列であるcol要素をデータの種類ごとにまとめてcssを指定して表を見やすくします。
問題点:ブラウザごとにcss指定の解釈の違いがはっきり出る要素です。バックグランドの色指定だけは、ほぼ共通で使えそうです。ブラウザごとに差が出るcssは、padding、width、text-align、color、font-weightなど。
下のtableは、colgroupごとにtext-alignをleft、center、rightと3種類指定していますが、MacのSafari4、Firefox3.6で見ると、すべてleftになってしまいます。Windows IEはtext-alignを3種類表示できます。

●サンプル8
年月日 数値01 数値02 数値03 地名01 地名02
2012-03-26 2365 4792 12554 東京都 中野区
2012-02-20 6659 12478 25866 東京都 新宿区
2012-01-18 10020 6989 45778 神奈川県 横浜市
2011-12-16 99687 25566 20336 千葉県 千葉市
2011-11-10 336655 102030 26699 埼玉県 草加市
2011-10-05 20099 200556 2351 長野県 松本市

サンプル8のtableのソース
<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>

サンプル8のcssのソース
.gcol01	{ background: #fff999; text-align: center;}
.gcol02 { background: #dffcb1; text-align: right;}
.gcol03 { background: #b1fcec; text-align: left;}

:after擬似要素を利用して、floatを解除するclearfix。

子要素にfloatを利用すると、親要素の高さがなくなってしまいます。→関連ページ
下の例では、親要素(青紫の地)の高さが無くなり、「float:left;」した3つの画像が下にはみ出ています。

●サンプル9
floating image1 floating image2 floating image3
clearせずに、後に続く文字

これを修正する方法の一つに「clearfix」があります。「clearfix」はプロパティやセレクターの名称ではなく、:after擬似要素を利用したテクニックの名称です。この場合は、画像の親要素のdivに「class="clearfix"」を指定します。
:after擬似要素は、要素の直後に内容を挿入する際に使用するもので、必ずcontent:"追加内容"が必要です。

●「clearfix」を使用したサンプル9

floating image1 floating image2 floating image3
clearせずに、後に続く文字
「clearfix」のcssソース
.clearfix:after
{content:""; display:block; clear:both;} 
html・画像の親要素のcss指定ソース
<div id="testwrapp01" class="clearfix"> 
<img ・・・> <img ・・・> <img ・・・></div>

tableで、セルに連続した半角英数字が入る場合、勝手に広がってしまうのを折り返しで防ぐ

URLなど連続した長い半角英数字が入る場合、一つの単語と見なされるらしく、thやtdにwidthを指定しているにも関わらず、勝手にセルの幅を広げてしまいます。下の例1では、すべてのthで幅を140pxに指定していますが、広がってしまいます。
●(例1)サンプル10
width140 width140 width140 width140
width140ダミーテキスト width140abcdefghijklmnopwqstuvwxyz width140ダミーテキスト width140ダミーテキスト
ダミーテキスト width140abcdefghijklmnopwqstuvwxyz ダミーテキスト ダミーテキスト

これに対処するためまず、140pxのセル幅をブラウザに強制します。tableに指定しているcssに次の要素を加えることでセル幅は直ります。ただこのままでは、overflowプロパティのデフォルトが"visible"なので、下の(例2)のように内容がはみ出してしまいます。比較のため、overflow:autoを問題のセルの下のtdに加えてありますので、スクロールバーが出ているはずです(Google ChromやSafariの場合。IE9では、両方ともoverflow:hiddenと同じに、Firefox10では、両方ともoverflow:visibleと同じになります)。いずれにしても、overflowプロパティでは、きれいに折り返すことはできません。
table-layout: fixed;
●(例2)サンプル11
width140 width140 width140 width140
width140ダミーテキスト width140abcdefghijklmnopwqstuvwxyz width140ダミーテキスト width140ダミーテキスト
ダミーテキスト width140abcdefghijklmnopwqstuvwxyz ダミーテキスト ダミーテキスト

次に内容が飛び出すtd部分に、overflowプロパティの代わりに、word-wrapプロパティを加えます。これできれいに折り返すことができます(例3)。word-wrapプロパティは、Internet Explorerが独自に採用したものですが、他のブラウザでも利用できます。
word-wrap: break-word;
●(例3)サンプル12
width140 width140 width140 width140
width140ダミーテキスト width140abcdefghijklmnopwqstuvwxyz width140ダミーテキスト width140ダミーテキスト
ダミーテキスト width140abcdefghijklmnopwqstuvwxyz ダミーテキスト ダミーテキスト

「abbr」タグと:after疑似要素を使って、title値をhoverでツールチップのように表示

abbr(Abbreviation:省略、略語):このタグに囲まれた語句は略語や頭字語であることを示します。
このabbrタグと:after疑似要素を使って、略語の元の語句をツールチップのように表示します。「サンプル13」の右側に赤いアスタリスク付きの略語が対象で、マウスオーバーするとtitle値を表示します。IE7以前は非対応です。

●サンプル13
HTML5は、WHATWGによって2004年に定められ、W3Cにより2008年1月22日にドラフト(草案)が発表されました。 HTML4.01で非推奨だった font要素やcenter要素など、CSSで実現できるマークアップはすべて廃止されます。また、acronym要素も廃止され、abbr要素に一本化されます。 」

CSS
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; }

全称セレクタ「*」の使い方。

cssで「*」(アスタリスク)は、全称セレクタを意味します。「*」を単独で使うと、すべての要素を対象にすることを意味します。そのため、スタイルの初期化、リセットなどによく使われます(例1)。
これを、他のセレクタの後に付けると、そのセレクタの子要素すべてを対象にします [(例2)css ]。
[(例2)結果 ]では、子要素である2箇所のspanタグ部分のみに、cssが適用されていることが分かります。
(例1)css
  * { background: transparent; margin:0;  padding:0; zoom:1; } 
(例2)css
  #sample14 * { font-weight: bold; color: blue; } 
(例2)結果
子要素以外の部分は、影響を受けず、子要素のみ適用されます。こちらは子要素以外。こちらも子要素
(例2)htmlソース
 <div id="sample14">子要素以外の部分は、影響を受けず、<span>子要素のみ適用されます。</span>こちらは子要素以外。<span>こちらも子要素</span>。</div>

引用文を表す blockquote タグの使い方

< blockquote >タグは引用文であることを表し、長めの文章を引用する場合に使います。一行以内の短めの文章の引用には、< q >タグを使用します。一般的なブラウザでは左右がインデントされます。インデントすることを目的にこのタグを使うことは推奨されません。

また、ブラウザによっては、" font-style: italic "(イタリック・斜体)が自動でかかります。日本語の場合、斜体があまり美しくないので、これを避ける場合は、cssで" font-style: normal "を指定しておきます。

最近、ブログなどでよく使われるスタイルを再現してみました。

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

CSS
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;}
HTML
<blockquote class="quote">
<p>blockquoteタグは引用文であることを表し、長めの文章を引用する場合に使います。一行以内の短めの文章の引用には、&lt;q&gt;タグを使用します。<br>
<a href="#">引用元のurlなどを入れておくとさらに引用文であることが分かりやすくなります。</a></p>
</blockquote>

cssでif文的な振り分け

< a >タグを利用すると、"href"属性が必須で、"title"属性も使えます。これらの属性の内容に応じてif文的な振り分けが可能になります。セレクタに、a[href*="test"]と記述すると、< a >タグの"href"属性に「test」を含んでいる場合、cssを適用します。また、セレクタに、a[title="css"]と記述すると、< a >タグの"title"属性が「css」である場合、cssを適用します。
サンプルCSS
a[href*="test"]:after { content:" ★test★";
															color: #29a61c;
															font-weight: bold;
															}
"href"属性に「test」を含んでいる場合、:after疑似要素により、コンテンツの後ろに「 ★test★」をカラー「#29a61c」、ボールドで追加します。
a[title="css"]:before { content:"[css] ";
															color: blue;															font-weight: bold;
															}
"title"属性が「css」の場合、:before疑似要素により、コンテンツの前に「[css] 」をカラー「blue」、ボールドで追加します。
実際のサンプルは別ページに用意しました→こちらからサンプルページへ

Floatを使わずに、display: tableで横並びナビゲーションもどき

横並びナビゲーションを実装する場合、floatさせたリスト要素の<li>を使うのが、一般的ですが、その周りのレイアウトにもfloatを使用して、floatを解除するための「clearfix」の使い方によっては、IEでレイアウトが崩れて、収拾がつかなくなる場合があります。簡単な横並びナビゲーションなら、floatを使わずに実装することで、トラブルを回避できるケースが多々あります。下の例では、定義型リストのdl要素に「display: table」その子要素の<dt>と<dd>に「display: table-cell」を使って横並びさせています。
タイトル
コンテンツ1
コンテンツ2
コンテンツ3
コンテンツ4
コンテンツ5
コンテンツ6
HTML
<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等のテストページ」に載せています。

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

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

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

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

CSS3「text-overflow」を使って、オーバーフローしたときに、省略符号をつける

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

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

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

(1) white-space: nowrap; overflow: hidden;
  text-overflow: clip;

幅500ピクセルの領域。長めのテキストを読込むと、オーバーフローしてしまうように設定。

(2) white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;

幅500ピクセルの領域。長めのテキストを読込むと、オーバーフローしてしまうように設定。

CSS「display:table」と「display:table-cell;」を使って、上下方向の中央揃え

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

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

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

サンプル
p要素の中のspan要素

サンプルのCSSソース
.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 {   //子要素の中のspn要素
   display: inline-block; padding:5px 8px; border:3px solid blue; }

【CSS】文字はそのままで、背景のみを半透明にしたいときは、rgbaを使う

「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);

【CSS】img要素の左右中央揃え

インライン要素扱いの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">

 

listのmarkerを丸括弧付きの数字にする

もっとも簡単な方法は、「list-style-type:none」で定義済みスタイルのmarkerを消し、li要素の内容に「(1)」などの丸括弧付きの数字のテキストを先頭に付けるものです。しかし、これは後で修正が面倒ですし、数値の記述間違いも起こりやすくなります。そこで、定義済みスタイルのmarkerを消した後、:before疑似要素を使って丸括弧とその中に入る数値を先頭に付けます。数値は、counter-incrementで自動連番にします。

サンプル
  1. 「autofocus属性」。ページを表示したときにフォーカスされます。
  2. 「placeholder属性」。placeholder属性で指定した値が入力欄に初期表示されます。
  3. 「required属性」。入力必須のフィールドになり、ここを記載せず「送信」ボタンを押しても、アラートが出て、送信できません。
  4. 「pattern属性」。正規表現による入力制限により、このケース(pattern="^[0-9A-Za-z]+$")では半角英数のみの入力になります。
サンプルのCSSソース
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) " )"; }

EdgeやiOSのSafariで、数字のテキストが自動で電話番号リンクになってしまうのを防ぐ

Windows10のブラウザEdgeやiOSのSafariなどで、数字のテキストが自動で電話番号リンクになってしまうのを確認しました。次のリンクをEdgeやiOSのSafariで開いてみて下さい。 → 自動で電話番号リンクになってしまうサンプル

Windows10 Edge 38.14393.0.0で開いたキャプチャ

Edgeでは、携帯やスマホの番号っぽいものが、電話番号リンクになってしまいます。iOSのSafariでは、すべてが電話番号リンクになってしまいます。

自動で電話番号リンクになってしまうのを防ぐ方法
ページのheadに次のmetaタグを追加します。

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

次のリンクは、上のサンプルにmetaタグを追加したものです。今度は自動リンクになりません。

→ 自動電話番号リンクを防ぐサンプル

 




戻るボタン
Copyright© 2016 Conifer,Inc. All rights reserved.