スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSS(スタイルシート)の基本、小技、テクニック総まとめ

CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集|Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。

css-tips-matome.png

恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。

ということで順番に説明していきます。

1. 全般的なこと

1-1. CSSリセット

ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。

そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。

方法は色々ありますが、個人的には一番有名なEric Meyer's Reset CSSを使っています。

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

CSSの一番最初にこれを記述して、後から記述したもので上書きしていく感じになります。

1-2. 複数のクラスを指定する

クラスはスペースで区切ると複数指定することができます。

HTML
<div class="font size1">font1</div>
<div class="font size2">font2</div>
<div class="font size3">font3</div>

共通な部分と個別の部分を別のクラスで指定すると効率よく書くことができます。

CSS
.font {
  color: red;
  font-weight: normal;
}
.size1 { font-size: 18px; }
.size2 { font-size: 16px; }
.size3 { font-size: 14px; }

効率的なセレクタの使い方を説明した記事もありますのでぜひ。CSSセレクタの効率的、効果的な使い方をいろいろ|Webpark

1-3. IE用簡単CSSハック

CSSハックは使わないに越したことはないですが、IEに関してはなかなか新バージョンへの乗り換えも進まないし、ある程度仕方ない部分もありますね。
CSS
color: red; /* 全てのブラウザ */
color: green¥9; /* IE8 とそれ以下のバージョンに対応 */
*color: yellow; /* IE7 とそれ以下のバージョンに対応 */
_color: orange; /* IE6 に対応 */

この場合、IE9だと赤に、IE8だと緑に、IE7だと黄色に、IE6だとオレンジになります。CSSハックはたくさんありますがこれだけでも結構使えると思います。

2. まとめて書けるプロパティ

2-1. border

まずはボーダーです。よく使いますね。

  • border-width … 線の太さ
  • border-style … 線の種類
  • border-color … 線の色

これらは一括で指定することができます。

before
border-left-width: 1px;
border-left-style: solid;
border-left-color: red;
after
border-left: 1px solid red;

記述する順番に決まりはありません。

続いてはこちら。

上下左右すべて同じの線の場合は一括で指定できます。

  • border-top … 上のボーダー
  • border-right … 右のボーダー
  • border-bottom … 下のボーダー
  • border-left … 左のボーダー
before
border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
after
border: 1px solid red;

2-2. background

これもよく使いますね。

  • background-color … 背景色
  • background-image … 背景画像
  • background-repeat … 背景画像の並べ方(repeatで繰り返し、no-repeatで繰り返しなし、repeat-xで横方向、repeat-yで縦方向)
  • background-position … 背景画像の表示位置(水平方向、垂直方向の順で指定。「left top」「5px 3px」など)
  • background-attachment … 背景画像をスクロールさせるかどうか(scroll(初期値)かfixed)

これら背景に関するプロパティを一括して指定することができます。

before
background-color: #f5f5f5;
background-image: url: url(img/bg.png);
background-repeat: repeat-x;
background-position: left top;
background-attachment: scroll;
after
background: #f5f5f5 url(img/bg.png) repeat-x left top scroll;

必要のないものは省略することもできて、並べる順番も特に決まりはありません。

2-3. font

個人的にはあまり使っていないです。

  • font-style … イタリック体(italic)と斜体(oblique)を指定。初期値はnormal(標準)です。
  • font-variant … スモールキャピタルを指定。small-caps を指定すると、アルファベットの小文字の部分が「大文字を縮小したような形」で表示されます。
  • font-weight … フォントの太さ。
  • font-size … フォントサイズ
  • line-height … 行の高さ
  • font-family … フォントの種類

あまり使うことのないプロパティもありますが、これらをまとめることができます。line-heightが含まれていることに違和感を覚えるのは私だけでしょうか。

before
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 12px;
line-height: 120%;
font-family: "MS Pゴシック";
after
font: italic normal bold 80%/150% "MS Pゴシック";

「行の高さ(line-height)」を指定する場合は、「サイズ(font-size)」の後にスラッシュ( / )を入れ、その後に記述します。

font-size、line-height、font-familyは順番を守る必要がありますが、その他順番は自由です。

フォントサイズとフォントの種類以外は省略可能です。

2-4. padding、margin

よく使いますね。というか略さず書くことはほとんどないです。

4方向とも違う場合です。

before
padding-top: 10px;
padding-right: 5px;
padding-bottom: 8px;
padding-left: 3px;
after
padding: 10px 5px 8px 3px;

次は左右が一緒で上下が違う場合です。

before
padding-top: 10px;
padding-right: 5px;
padding-bottom: 8px;
padding-left: 5px;
after
padding: 10px 5px 8px;

上下と左右がそれぞれ一緒の場合です。

before
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
after
padding: 10px 5px;

最後はすべて同じ場合です。

before
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
after
padding: 10px;

2-5. ul、ol、li

今度はリストです。

  • list-style-type … マーカーの種類(disc、circle、squareなど)
  • list-style-position … マーカーの表示位置(outside(初期値)かinside)
  • list-style-image … マーカーを画像で表示

画像を指定した場合はマーカーの種類(disc、circle、squareなど)より優先して表示されます。

before
list-style-type: disc;
list-style-position: inside;
list-style-image: url(sample.png);
after
list-style: disc inside url(sample.png);

順番に決まりはありません。省略した場合は初期値になります。

3. セレクタに関すること

3-1. 最初に現れる文字にだけスタイルを適用する

最初に現れる文字にスタイルを適用します。雑誌なんかでありそうな感じです。

CSS
p:first-letter{
  font-weight:bold;
  font-size:32px;
}
sample
最初の文字にだけ適用されます。

3-2. 最初の行にだけスタイルを適用する

CSS
p:first-line{
  font-weight:bold;
  color:red;
}
sample
:first-lineを指定することで、最初の行にだけ適応されます。今回の場合1行目だけ赤い太字になり、2行目からは元に戻ります。

3-3. 最初に現れる要素にだけ適用する

最初に現れる要素にのみ適用されます。

CSS
p:first-child {
  font-weight:bold;
  color:red;
}
html
<p>最初のp要素にだけ適用されます。</p>
<p>2つ目以降のp要素には適用されません。</p>
sample

最初のp要素にだけ適用されます。

2つ目以降のp要素には適用されません。

3-4. n番目に現れる要素に適用する

先ほどは最初に現れるものに適用しましたが、:nth-of-type(n)のnを操ることで様々な要素にスタイルを適用します。

nの部分は数字のほかに、以下のように複数指定することもできます。

:nth-child(n) ・・・ n番目の要素に適用
:nth-of-type(odd) ・・・ 奇数番目の要素に適用
:nth-of-type(2n+1) ・・・ 奇数番目の要素に適用
:nth-of-type(even) ・・・ 偶数番目の要素に適用
:nth-of-type(2n) ・・・ 偶数番目の要素に適用
:nth-of-type(3n) ・・・ 3,6,9,12…番目の要素に適用
:nth-of-type(3n+1) ・・・ 1,4,7,10…番目の要素に適用
CSS
p:nth-of-type(2n+1) {
  font-weight:bold;
  color:red;
}

このようにすると奇数番目に表れるp要素にのみ適用されます。

html
<p>1行目</p>
<p>2行目</p>
<p>3行目</p>
<p>4行目</p>
<p>5行目</p>
sample

1行目

2行目

3行目

4行目

5行目

テーブルで1行ごとに色を変えるときなどに使えます。かなり便利なセレクタですがIE8以下は非対応です。これとよく似ているnth-childとの違いは、nth-childをご参考に。

4. テキストに関すること

4-1. 文章内の最初の文字を1文字下げる

日本語の文章は最初の一文字を開けることが多いですが、そんな時スペースでっていうのもなんだかな~という方に。
CSS
text-indent: 1em;
sample
このように最初の一文字が下がります。空白で下げるのは煩わしい、かっこ悪いと思われる方にはいいと思います。

4-2. 2行目以降の文字を1文字下げる

CSS
text-indent: -1em;
padding-left: 1em;
sample
※このように2行目以降が1文字下がります。注意書きや箇条書きっぽくするときなんかに便利かもしれないです。

4-3. 長い単語やURLを途中で折り返す

英語の場合、空白やハイフンが現れるまで折り返さず枠をはみ出ても表示されちゃいます。

aaaaaaa@aaaaaaaa_aaaaaaaaaaa.aaaaaaaaaa/aaaaaaaaaaaaaaaaa

そんな場合以下のスタイルでうまいこと折り返してくれます。

CSS
word-wrap: break-word;
sample
aaaaaaa@aaaaaaaa_aaaaaaaaaaa.aaaaaaaaaa/aaaaaaaaaaaaaaaaa

このブログではpreタグに使ってます。トラックバックのURLなんかもこれで解決かも。

4-4. 長い単語やURLの表示を途中でやめる

先ほどの同じ例で、今度ははみ出た部分を省略して「...」としてみます。
CSS
white-spce: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
sample
aaaaaaa@aaaaaaaa_aaaaaaaaaaa.aaaaaaaaaa/aaaaaaaaaaaaaaaaa

4-5. 単語を途中で折り返さない

タグクラウドなんかで、タグ名が途中で折り返して見にくいという場合はこちらを。
CSS CSS3 Javascript Google jQuery PHP Yahoo wordpress ドロップダウン メニュー テンプレート まとめ ブログ ソーシャルブックマーク ブラウザ ロゴ スライドショー

タグクラウドはフォントの大きさをspanタグで指定していることが多いので、以下のように指定してあげます。spanじゃない場合は変更してみてください。

CSS
div span{
white-space: nowrap;
}
sample
CSS CSS3 Javascript Google jQuery PHP Yahoo wordpress ドロップダウン メニュー テンプレート まとめ ブログ ソーシャルブックマーク ブラウザ ロゴ スライドショー

5. 小技いろいろ

5-1. divを中央揃えにする

divなどの要素を真ん中に表示します。

CSS
#container{
  width: 200px;
  margin: 0 auto;
}

多くのサイトがこれを使ってコンテンツ全体を真ん中に表示していると思います。

このようにdivが真ん中に表示されます。

昔はtext-align:centerで真ん中によらないと悩んだこともありました。

5-2. 上下中央揃えにする

上下中央揃えってIEのおかげで意外と面倒です。IE以外でしたら単純にdisplay:table-cell;を使えばいいわけですので、ほとんどIE用の記述となってます。

CSS
div.vertical div{
  display:table-cell;
  vertical-align: middle;
  *display: inline;
  *zoom: 1;
}
.vertical2{
height: 100px;
}

htmlもIEのおかげで面倒になってます。

HTML
<div class="vertical">
  <div>上下真ん中に表示されます</div>
  <div class="vertical2"></div>
</div>
sample
上下真ん中に表示されます

1行のテキストの場合はこちらでも大丈夫です。HTMLも入れ子にする必要もありません。

CSS
.vertical{
  line-height:200px;
  height:200px;
}

横メニューで上下中央にテキストを持ってきたいときなど結構使えます。

5-3. 高さの違うボックスをきれいにそろえる

floatで横に並べた高さが違うボックスをきれいにそろえます。

このように違う高さのボックスをならべると
もちろん下の位置がずれてきます。なんかかっこ悪いですよね。このような場合の対応法をこれから紹介します。
CSS
.box{
  overflow: hidden;
}
.contents1{
  float:left;
  padding-bottom: 10000px;
  margin-bottom: -10000px;
}
.contents2{
  float:left;
  padding-bottom: 10000px;
  margin-bottom: -10000px;
}
html
<div class="box">
  <div class="contents1">内容</div>
  <div class="contents2">内容</div>
</div>
このように違う高さのボックスも揃います
ちょっと強引な感じですがきれいにそろいます。両方のボックスを長くして、親のボックスからはみ出た部分は表示しないという感じです。

ちなみに10000pxという数字に意味はありません。長い方のコンテンツより小さくならなければ大丈夫です。

5-4. 最低限表示する高さを指定

divなどで最低限表示する高さを指定します。

CSS
.min{
  min-height: 100px;
  height: auto !important;
  height: 100px;
}

下2行はIE6対策です。

sample
このように中のコンテンツが少ない場合、高さが100pxになり、それ以下にはなりません。
sample
このように
中のコンテンツが
min-height
で指定した長さより
長い場合は、
中に
あわせて
divも
長く
なります。

5-5. hrに背景画像を使う

仕切り線を表すhrに背景画像を使うこともできます。

CSS
hr {
  background-image: url(back.png);
  height: 10px;
  border: 0;
}
sample

5-6. 画像の下に文字を回り込ませない

kotekumo-f02.gif

このように画像の右側の文章を配置した場合、文章が長くなると画像の下に文章が回りこみます。
これはこれでいいと言う人もいるかと思いますが、回り込ませない方法もありますので、紹介してみます。
どのようにするかは次のとおりです。特に問題ないですかね。
文章が短いと回り込まないので念のため文章を書いてます。

CSS
.content {
  padding: 0 0 0 180px;
  position: relative;
}
.content img {
  position: absolute;
  left: 10px;
  top: 10px;
}
html
<div class="content">
  <img src=".gif" alt="image" border="0" width="150" height="80" />
  <p>ここに文章を入れます</p>
</div>
sample
kotekumo-f02.gif

普段なら文章が長くなると、画像の下に文章が回りこみますが、この方法だと画像の下に文字が回りこまずに、そのまま下に続きます。
画像の大きさに合わせてpaddingを調整するといいと思います。
今回の場合画像が150pxのものを使い、文章は左から180pxあけて表示しています。

5-7. リストの一番上の線を消す

borderを使うとリストに仕切り線を入れることができます。

CSS
li {
  padding: 3px;
  border-top: 1px dotted #777;
}
  • メニュー 1
  • メニュー 2
  • メニュー 3
  • メニュー 4
  • メニュー 5

けど、全体を枠で囲むときなんかは上の線がだぶってしまうので消した方がいいと思います。そんな時は以下のコードで一番上の線だけ消せちゃいます。

CSS
ul {
  overflow: hidden;
}
ul li {
  margin-top: -1px;
  border-top: 1px dotted #777;
}
sample
  • メニュー 1
  • メニュー 2
  • メニュー 3
  • メニュー 4
  • メニュー 5

IE6以下は非対応ですが以下の方法でも大丈夫です。というか個人的にはこちらを使っています。

CSS
ul li {
  border-top: 1px dotted #777;
}
ul li:first-child {
  border-top: none;
}

5-8. リストのリンクを押しやすくする

リスト状に並んだリンクのクリックできる範囲を広くしてを押しやすくします。

html
<ul id="menu">
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
</ul>
CSS
#menu li {
  list-style-type: none;
  width: 400px;
  margin: 0;
  padding: 0;
  border-top: 1px dotted #777;
}
#menu a {
  text-decoration: none;
  display: block;
  padding:2px 10px;
}
#menu a:hover {
  background: #fff;
}
sample

5-9. リストを使った横並びメニュー

よくあるタイプのリストを横に並べたメニューです。

html
<ul id="menu">
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
</ul>
CSS
#menu li{
  list-style-type: none;
  float: left;
  width: 100px;
  text-align: center;
}
#menu a {
  display: block;
  width: auto;
  padding:5px 10px;
  background: #05a;
  color: #fff;
  text-decoration: none;
}
#menu a:hover {
  background: #036;
}
sample

これを基本にしてCSS3を使って装飾したのがこちら ⇒ 細部にこだわってみた!CSS3を使った美しい横メニューの作り方|Webpark

5-10. 色の違うボーダーの境目をきれいに見せる

下と左に違う色のボーダーを付けると境目がギザギザになります。見出しなどでよく見かけますが個人的にはあまり好きではないです。

下と左のボーダー

擬似要素を使うときれいに見せることができます。

CSS
h4{
  position: relative;
  padding-left:10px;
  border-left: 10px solid #05a;
}
h4:after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  height: 0;
  width: 100%;
  border-bottom: 1px solid #999;
}

ただしIE7以下は非対応です。個人的にはそれでもこちらを使いたいです。

sample

下と左のボーダー

5-11. 画像を使わずに吹き出しを作る

擬似要素とボーダーで作る三角形を使うと画像なしでCSSだけで吹き出しを作ることができます。

CSS
.fukidashi {
  position: relative;
  color: #fff;
  background: #555;
  margin: 10px 0px 10px 0px;
  padding: 5px 10px 5px 10px;
  border-radius: 3px;
}
.fukidashi:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 30px;
  height: 0;
  width: 0;
  border: 10px solid transparent;
  border-top: 10px solid #555;
}

吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付けて、他のボーダーは「transparent(透明)」にしています。

headline10.png

あと、この正方形の一辺が100pxになることに注意してください。

sample
吹き出し風

今回はspanにしていますが、見出しにも使えます。

擬似要素を使った見出しの作り方はこちらをご参考に ⇒ CSSの擬似要素を使った見出しデザイン|Webpark

5-12. HタグとPタグを横並びに表示する

記事のタイトル(2011.4.1)

こんな感じでタイトルと日付を表示して、タイトルにだけHタグを付けてみます。

html
<div>
  <h4>記事のタイトル</h4>
  <p>(2011.4.1)</p>
</div>

pよりspanの方がよさそうですがブロックレベル同士でも横並びになるというのを分かっていただくためpにしています。

そのままだと日付が下の段にきてしまいます。

記事のタイトル

(2011.4.1)

そんなときはこれで解決。

CSS
div h4, div p {
  display: inline;
}
sample

記事のタイトル

(2011.4.1)

日付にまでHタグを付けるのは嫌だという方や日付には違うスタイルを適用したいという方におすすめです。

5-13. リスト以外の要素をカウントする

リストだと「list-style-type: decimal;」で自動的に順番を付けることができます。それ以外の方法でリスト以外のものに番号を付けます。

CSS
.count h6 {
  counter-increment : chapter ;
}
.count h6:before {
  content : "第" counter(chapter) "章" ;
  padding-right: 10px;
  color : #777;
}

これでh6タグが現れた順に番号が付けられます。

sample
タイトル
タイトル
タイトル

タイトルという文字の前についている第1章から第3章はCSSで自動的に付けています。CSSのcounter-incrementを使ってリスト以外に番号を付ける方法|Webparkもご参考に。

5-14. clearfixで回り込みを解除

以下のHTMLで中にある2つのボックスをfloatを使って横に並べます。

html
<div class="wrap-box">
    <div class="float-box"></div>
    <div class="float-box"></div>
</div>
CSS
.wrap-box{
  padding: 10px;
  background: #ccc;
}
.float-box{
  float: left;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #777;
}

floatで回りこんでclearしないと親ボックスが子要素を包まなくなります。


子要素をもうひとつ追加してclear:bothを付けてやると解決ですが、毎回そんな訳にはいきません。というときは以下のコードを追加すると解決です。

CSS
.wrap-box:before,
.wrap-box:after {
    content: " ";
    display: table;
}
.wrap-box:after {
    clear: both;
}
.wrap-box {
    *zoom: 1;
}

これで親ボックスが子ボックスを包むように表示されます。

このテクニックをclearfixといい、「A new micro clearfix hack – Nicolas Gallagher」で紹介されているものが有名です。

さいごに

ということでCSSに関する小技テクニックを幅広くまとめてみました。といっても過去に紹介したもののまとめ的な感じになっていますが。。

基本的な内容が多いですが、意外と抜け落ちているところもあるかもしれませんので、これがいい復習の機会になれば幸いです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
GJです!
でも突っ込みどころもありますね。
CSS3は3-4以外にもあるけどなぜ3-4だけCSS3ってわざわざ書くのか、とか。
それから……

> 3-4. n番目に現れる要素に適用する【CSS3】

:nth-childと:nth-of-typeが混ざってますね。
:nth-childも:nth-of-typeも、IEは9からのサポートです。

> 4-5. 単語を途中で折り返さない

white-space: nowrapには、項目が包含ブロックの幅に収まり切らないとき、折り返されずにはみ出てしまう欠点があります。
その点、display: inline-blockは包含ブロックの幅に収まり切らないときに限って途中で折り返されるので、display: inline-blockの方が好ましいと思います。

デモ
http://jsfiddle.net/guimihanui/9ksRe/

> 5-6. 画像の下に文字を回り込ませない

画像の幅に応じてパディングを取るのは、いわゆるハードコードってやつで、あまりよくないと思います。
回りこませたくない要素をすべてdivでくくってそれにoverflow: hiddenを適用する方が、画像の幅に依存しないという点で優れています。
(マークアップの量はちょっと増えますけどね。)

デモ
http://jsfiddle.net/guimihanui/Qdqkd/

> 7. リストの一番上の線を消す

「IE7以下は非対応ですが...」と書かれていますが、IE7はfirst-childをサポートしていますよ。(IE6はしていません。)
【2013/03/28 03:42】 | シマダ #5WxxqtjY | [edit]
シマダ さま

コメント&ご指摘ありがとうございます。

確かに3-4以外にもCSS3はありますね。
これは今回追加した項目でして、
追加の際に気になったのでCSS3と入れていました。
紛らわしいので省きました。

IEの対応状況については認識不足でした。
first-childがIE7から対応しているのでしたら
かなり使い勝手がいいですね。

4-5と5-6も仰るとおりだと思います。
修正してよりよい記事にしたいと思います。

ほんとにありがとうございました。
勉強になりました!
今後もよろしくお願いします。
【2013/03/28 06:14】 | 管理人 #E2ywrYdA | [edit]
横から失礼します。

>5-2. 上下中央揃えにする

これのIE用ハックがIE8以下のものになっていますが、
display:table-cellはIE8から対応していますので、IE7以下用のハックで良いはずです。
【2013/04/04 02:13】 | ake_nyanko #- | [edit]
ake_nyanko さん

確かにdisplay:table-cellはIE8から対応ですね。
IE7以下のハックに変えました。

ご指摘ありがとうございました。
【2013/04/07 07:24】 | 管理人 #E2ywrYdA | [edit]
clearfixについてですが、このような書き方ではダメなのでしょうか?。
<style type="text/css">
.wrap-box:after {
content: "";
display: block;
clear: both;
}
【2015/07/15 15:17】 | kouya #SZv2Nm5w | [edit]
Всем известно что медицина в Германии хорошая.
К сожалению в Москве даже за деньги и даже попадая на прием к профессорам,
отношение к пациенту хамское, ни кому ни
чего не надо, нормально не обследуют.
Очень хочу попасть в хорошую германскую клинику.
Очень прошу посоветовать куда и как попасть на прием в хорошую платную клинику и к хорошему
врачу эндокринологу с заболеванием щитовидной железы.
Возможно в России существуют фирмы которые организовывают поездки и
дают переводчика, буду благодарна любой информации. http://www.conti-plus.com.ua/что-лечит-ортодонт/
【2016/11/10 02:15】 | Что лечит ортодонт #- | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。