WEB受注システムCSSの小技・まとめ※「CSSの小技・まとめ(2)」はこちらです。全称セレクタ「*」の使い方。cssでif文的な振り分け。サンプル表示には、before擬似要素とafter擬似要素も使用。tableで横並びナビゲーションもどき。画面のテキストを選択したときの背景色を「::selection疑似要素」を使って変更。画像を使わず、矢印として三角形を使う場合のtips。list)の最初の子要素<li>にvalue=""で開始番号を指定します。すべての子要素<li>にvalue=""を指定することで、昇降を逆にすることも可能です。<br>を一時的に無効にして、デザインを確認するときなどに役立ちます。下のサンプルはともに「ダミーテキスト」の後ろに<br>が入っています。}●サンプル1ダミーテキストダミーテキストダミーテキストダミーテキスト●サンプル2ダミーテキストダミーテキストダミーテキストダミーテキストリストにborder-topを付けたとき、最初のborderのみを消すリストにborder-topを付け、全体をborderで囲んだ場合、最初のborderがデザイン的にじゃまになることがあります(●サンプル3)。直に対象のliにborderを消すcssを記述しても良いのですが、動的にリストを生成する場合などはかえって面倒です。hiddenを指定するだけで済みます(●サンプル4)。hidden;●サンプル3ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト●サンプル4ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト注釈文等で折り返した次の行以降を一文字おくる注釈文等で折り返した次の行以降を一文字おくります。-1emを付加しています。●サンプル5※マークを付けた注釈文等で文章が長くなって折り返したときに次の行の最初の文字がマークと並んでしまうと注釈文として分かりづらくなる。●サンプル6※マークを付けた注釈文等で文章が長くなって折り返したときに次の行の最初の文字がマークと並んでしまうと注釈文として分かりづらくなる。幅320pxのdiv要素内(赤紫の囲み)にliタグをfloatして、ブロック(画像100px、25px)を横並びに均等配置。}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になってしまいます。IEはtext-alignを3種類表示できます。left;}:after擬似要素を利用して、floatを解除するclearfix。子要素にfloatを利用すると、親要素の高さがなくなってしまいます。→関連ページ下の例では、親要素(青紫の地)の高さが無くなり、「float:left;」した3つの画像が下にはみ出ています。●サンプル9clearせずに、後に続く文字これを修正する方法の一つに「clearfix」があります。「clearfix」はプロパティやセレクターの名称ではなく、:after擬似要素を利用したテクニックの名称です。この場合は、画像の親要素のdivに「class="clearfix"」を指定します。:after擬似要素は、要素の直後に内容を挿入する際に使用するもので、必ずcontent:"追加内容"が必要です。・・・></div>tableで、セルに連続した半角英数字が入る場合、勝手に広がってしまうのを折り返しで防ぐURLなど連続した長い半角英数字が入る場合、一つの単語と見なされるらしく、thやtdにwidthを指定しているにも関わらず、勝手にセルの幅を広げてしまいます。下の例1では、すべてのthで幅を140pxに指定していますが、広がってしまいます。ダミーテキストこれに対処するためまず、140pxのセル幅をブラウザに強制します。tableに指定しているcssに次の要素を加えることでセル幅は直ります。このままでは、overflowプロパティのデフォルトが"visible"なので、下の(例2)のように内容がはみ出してしまいます。ChromやSafariの場合。IE9では、両方ともoverflow:hiddenと同じに、Firefox10では、両方ともoverflow:visibleと同じになります)。いずれにしても、overflowプロパティでは、きれいに折り返すことはできません。ダミーテキスト次に内容が飛び出すtd部分に、overflowプロパティの代わりに、word-wrapプロパティを加えます。これできれいに折り返すことができます(例3)。Explorerが独自に採用したものですが、他のブラウザでも利用できます。ダミーテキスト「abbr」タグと:after疑似要素を使って、title値をhoverでツールチップのように表示abbr(Abbreviation:省略、略語):このタグに囲まれた語句は略語や頭字語であることを示します。このabbrタグと:after疑似要素を使って、略語の元の語句をツールチップのように表示します。「サンプル13」の右側に赤いアスタリスク付きの略語が対象で、マウスオーバーするとtitle値を表示します。IE7以前は非対応です。HTML5は、WHATWGによって2004年に定められ、W3Cにより2008年1月22日にドラフト(草案)が発表されました。font要素やcenter要素など、CSSで実現できるマークアップはすべて廃止されます。acronym要素も廃止され、abbr要素に一本化されます。}全称セレクタ「*」の使い方。cssで「*」(アスタリスク)は、全称セレクタを意味します。「*」を単独で使うと、すべての要素を対象にすることを意味します。そのため、スタイルの初期化、リセットなどによく使われます(例1)。]では、子要素である2箇所のspanタグ部分のみに、cssが適用されていることが分かります。子要素以外の部分は、影響を受けず、子要素のみ適用されます。