スポンサーサイト

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

CSSの知識をもっと深める30+2の小技テクニック集

基本的なことやちょっと変わった意外な使い方などCSSに関する小技テクニックをたくさん紹介していきます。知っていることも多いかと思いますが、新しい発見もあるかもしれませんので復習を兼ねてぜひご覧ください。

2013.3.25 内容が少し古くなってきましたので作り変えました。ぜひこちらもご覧ください ⇒ CSS(スタイルシート)の基本、小技、テクニック総まとめ|Webpark

今回は数が多くなったので目次を作りました。クリックすると該当するところまでスクロールします。

ここからは各部分の解説となります。

1. 全般的なこと

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

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

html
<p class="border background padding"></p>

2. IE用簡単CSSハック

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

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

3. iPhone用CSSハック

iPhone用に一部レイアウトを変更したい場合などに。

CSS
@media screen and (max-device-width: 480px) {
 #iphone { color: red;  }
}

androidでも使えるかは、端末を持っていないので不明。標準はwebkit系だと思うのでいけるかも。お分かりの方教えてください。

【追記】androidには適用されないとの情報をいただきました。ありがとうございました。
sample
iPhoneで見ると赤くなります。

iPhone用にレイアウトを作り替えるときなどで、CSSを外部ファイルにする場合は、以下のようにします。

<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />

4. borderを一括で指定する

CSS
border:1px solid #336699;

top,right,bottom,leftすべて同じの線の場合は一括で指定できます。

また、線の太さ(border-width)、種類(border-style)、色(border-color)も一括で指定できます。

5. backgroundを一括で指定する

CSS
background: #ffffff url(bg.png) repeat-y right top fixed;
以下の順で一括して指定しています。
  • background-color
  • background-image: url
  • background-repeat
  • background-position
  • background-attachment
必要のない指定は省略することもできて、並べる順番も特に決まりはありません。

6. fontを一括で指定する

CSS
font: italic normal bold 80%/150% "MS Pゴシック";
以下の順で一括して指定しています。
  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family

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

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

7. padding、marginを一括で指定する

padding: 10px 5px 8px 3px; /* 上:10px 右:5px 下:8px 左:3px */
padding: 10px 5px 8px; /* 上:10px 右:5px 下:8px 左:5px */
padding: 10px 5px; /* 上:10px 右:5px 下:10px 左:5px */
4つだと上、右、下、左。3つだと上、左右、下、2つだと、上下、左右、1つだと全部。って感じになります。

2. 文章に関すること

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

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

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

雑誌の記事っぽくなります。wikipediaのトップページみたいな感じです。
CSS
p:first-letter{
  font-weight:bold;
  font-size:32px;
}
sample
最初の文字にだけ適用されます。

3. 中の要素に対してスタイルを適用する

下のようにCSSを指定すると、pタグではなくその中に入ったタグ(今回の場合bタグ)全てにに適用されます。
CSS
p *{color:green;}
html
<p>Pタグには適応されず、<b>中にあるタグ全てに適用されます。</b></p>
sample
Pタグには適応されず、中にあるタグ全て適用されます。
ちなみに、*(アスタリスク)だけにすると全てのタグに適用されます。

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

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

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

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

6. 長い単語やURLを途中で折り返す

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

aaaaaaa@aaaaaaaa_aaaaaaaaaaa.aaaaaaaaaa/aaaaaaaaaaaaaaaaa

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

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

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

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

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

8. 単語を途中で折り返さない

タグクラウドなんかで、タグ名が途中で折り返して見にくいという場合はこちらを。
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 ドロップダウン メニュー テンプレート まとめ ブログ ソーシャルブックマーク ブラウザ ロゴ スライドショー

3. レイアウトに関すること

1. divを中央揃えにする

最近はモニターもワイドなものが多くて幅も色々なので、ウェブサイトは真ん中に表示した方がいいですね。
CSS
#container{
  width: 200px;
  margin: 0 auto;
}
このようにdivが真ん中に表示されます。
以前text-align:centerで真ん中によらないと悩んだこともありました。

2. 上下中央揃えにする

上下中央揃えってIEのおかげで意外と面倒です。IE以外でしたら単純にdisplay:table-cell;を使えばいいわけですので、ほとんどIE用の記述(オレンジの部分)となってます。
CSS
div.vertical div{
  display:table-cell;
  vertical-align:middle;
  display:inline¥9;
  zoom:1¥9;
}
.vertical2{
height:100px;
}
htmlもIEのおかげで面倒になってます。
HTML
<div class="vertical">
  <div>上下真ん中に表示されます</div>
  <div class="vertical2"></div>
</div>
sample
上下真ん中に表示されます

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という数字は特に意味のあるものではありません。

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

divなどで最低限表示する高さを指定します。
CSS
.min{
  min-height:100px;
  height:auto !important;
  height:100px;
}

下2行はIE6対策です。

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

5. hrに背景画像を使う

仕切り線を表すhrに背景画像を使うとちょっとおしゃれな感じになります。
CSS
hr {
  background-image: url(back.png);
  height: 15px;
  border:0;
}
sample

背景画像に「」こんな画像を使ってます。

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あけて表示しています。
文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。

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

borderを使うとリストに仕切り線を入れることができます。
CSS
li {
  padding: 3px;
  border-top: 1px solid #336699;
}
  • メニュー 1
  • メニュー 2
  • メニュー 3
  • メニュー 4
  • メニュー 5

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

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

8. リストをボタン化する

リンクをボタンのようにします。このブログでもサイドバーで使っています。先ほどの上の線を消すものと組み合わせるといい感じになります。
CSS
#menu{
  list-style-type: none;
}
#menu a {
  background-color:#336699;
  color:#fff;
  display: block;
  width: 200px;
  padding:2px 10px;
}
#menu a:hover {
  background-color:#113366;
}
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>
sample

9. ページ送りナビゲーション風なリスト

先ほどと似ていますが display:inline-block; を使うことで、ヤフーで検索した際のページ番号のようなものが作れます。
CSS
#menu li{
  list-style-type: none;
  display: inline;
}
#menu a {
  text-decoration: none;
  background-color:#336699;
  color:#fff;
  display: inline-block;
  width: 20px;
  padding:2px 10px;
  text-align:center;
}
#menu a:hover {
  background-color:#002244;
}
html
<ul id="menu">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
</ul>
sample

10. HタグとPタグを横並びに表示する

記事のタイトル(2011.4.1)

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

記事のタイトル

(2011.4.1)

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

CSS
div h4, div p {
  display: inline;
}
html
<div>
  <h4>記事のタイトル</h4>
  <p>(2011.4.1)</p>
</div>
sample

記事のタイトル

(2011.4.1)

4. IEでも同じような効果が出せるなCSS3

IEはほとんどCSS3に対応していないので使いづらいのですが、IE独自のfilterを使って同じような効果を出せるものもありますので紹介します。

なお、filterは幅が成行きだと機能しないようですので、同時にwidthを指定する必要があります

1. 要素を回転させるtransform

指定した要素を回転させることができます。

CSS
.rotate {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

上からSafari、Chrome用、Firefox用、IE用となっています。上2つは回転する角度を、一番下は1から4の数字で90度ずつ回転します。

sample
このように要素が丸ごと回転します。

実際180度はあまり使いどころもないかもしれませんが、90度や270度はレイアウトのちょっとしたアクセントに使えそうです。

2. ボックスに影をつけるbox-shadow

指定するボックスに影をつけます。

CSS
.box-shadow {
  -moz-box-shadow: 2px 2px 3px #969696;
  -webkit-box-shadow: 2px 2px 3px #969696;
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
}

上からSafari、Chrome用、Firefox用、IE用となっています。

上2つは右側へのずれ、左側へのずれ、影のぼかし具合、影の色という順番で指定します。下はcolorが影の色、directionが角度、strengthが幅となっています。

sample
このようにボックスに影がつきます。

3. 要素の透明度を指定するopacity

指定したところの透明度を指定することができます。

CSS
.opacity {
  opacity:0.7;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
sample

このように背景が半透明になります。
数値は赤字の方が 0~1
紫の方がIE用で 0~100 まで指定できます。
ともに数値が小さいほど透明になります。

4. RGBAカラーモデルで色を指定する

RGBAカラーモデルは、RGBカラーモデルのred・green・blueに、alphaが加わったもので、alphaは色の透明度を表します。

CSS
.rgba{
  background: rgba(51, 102, 153, .4);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#88336699', endColorstr='#88336699');

IEでは#AARRGGBBの最初のAAは00(透明)~ ff(不透明)の範囲で透明度を指定し、RRGGBBは色を指定します。本来gradient()はグラデーションとして使うものです。

sample
RGBAカラーモデルで背景を指定しています。

5. CSS3 PIEでIEをCSS3に対応させる

CSS3 PIE

CSS3非対応のIEでも対応することができます。利用できるプロパティは以下のとおりです。ジェネレータもあるので簡単に設置できます。

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image
show CSSにチェックを入れるとコードが表示されるわけですが、PIE.htcをダウンロードするのと、アップした場所の指定だけ気をつけてくださいね。
behavior: url(PIE.htc);

おまけ. IE6対策に関すること

IE6はCSSの解釈が間違えているわけですが、それなりにシェアもあり無視するかどうかは意見が分かれるところだと思います。

このブログは基本無視ですが、最低限カラム落ちだけは避けようということでCSSで2つだけ注意しています。

1. border、padding使用時のボックス幅がおかしい

div#box{
	width:100px;
	border:1px solid black;
	padding:5px;
}

このようにCSSを指定した場合、最新ブラウザではボックス全体の幅は112pxとなりますが、IE6では全体で100pxとなります。

【対策】 widthとpadding、borderを一緒に使わない
div#box1{
	width:100px;
}

div#box2{
	border:1px solid black;
	padding:5px;
}

このように分けて指定し、box1の中にbox2が入るようにすると解決です。

2. floatで回り込むとmarginが2倍になってしまう

div#box{
	float:right;
	margin-right:20px;
}

このように指定した場合、通常は20pxですが、IE6の場合40pxとなります。

【対策】 marginとfloatを使うときはdisplay:inline;を忘れずに
div#box{
	float:right;
	margin-right:20px;
	display:inline;
}

IE6の場合margin-leftが40pxになりますが、display:inline;を追加すると通常通り20pxとなります。

floatでボックスを回りこませてmarginで間隔を開けるときはdisplay:inline;をお忘れなく。


分かっているつもりでも意外と奥が深いCSS。ご参考になれば幸いです。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
いつも勉強させていただいております。
まだ公開はしていないのですが、テンプレート3をカスタマイズして
使わせていただきたいと思います。

ぺージ送りのリストをカテゴリー別の記事一覧とタグの記事一覧に付けたいと思っています。
お忙しい所恐縮ですがどの位置に付ければいいのか、
ご指導いただけたら嬉しいです。

【2011/08/07 17:15】 | Imoon #- | [edit]
こんにちは
いつもありがとうございます。

このブログのページ送りについては
「FC2ブログのテンプレート工房」さんの
ものを使わせてもらっています。

http://10plate.blog44.fc2.com/blog-entry-233.html


Imoon さんのテンプレートだと以下のpタグを中身ごと削除して

<p class="content-nav" align="center">

以下のJavaScriptを挿入すればいいと思います。


<script type="text/javascript"><!--
pagenavi(5); //--></script>


ヘッダー部分のJavaScriptは「FC2ブログのテンプレート工房」で
ご確認くださいね。

いつも説明下手ですいません。
分からなかったら仰ってください。
【2011/08/09 20:17】 | 管理人 #E2ywrYdA | [edit]
お返事ありがとうございます!!
なんとか、出来たようです。
説明、とても分かりやすいです。

もう一つ、教えていただけたら嬉しいです。
ページ送りに枠を付けましたが、Webparkさんのような
枠を好みの大きさに変えて、しかも色が付くようにしたいのです。

自分でちょっとやってみたのですが、小さくしか色が変わってくれないので・・・

やり出すとキリがないのですが、変えてみると勉強になります。
度々の質問、申し訳ありません。

【2011/08/10 01:21】 | Imoon #- | [edit]
おはようございます。

分かってもらえてよかったです~

で、ご質問の枠組みですが、やり方は色々あると思うのですが、
私は以下のようにJavaScriptを変更した上でスタイルシートで
枠組みを作ってます。


if (i == c) {
document.write(' <div class="pnavi2">' + i + '</div> ');
} else {
document.write(' <div class="pnavi"><a href=\"' + base + (i - 1) + ext + '\">' + i + '</a></div> ');
}


pnavi2が現在表示しているページ数、pnaviがそれ以外のページでリンク
になっている部分となります。

スタイルシートの設定方法はこの記事の
「3-9. ページ送りナビゲーション風なリスト」
を参考にしていただければと思います。
【2011/08/12 04:51】 | 管理人 #E2ywrYdA | [edit]
ページ送りナビ風なリストの件です。

テンプレート工房さんのやり方に枠を付けるところまでは何とか理解できたのですが、
その後分からず困っています。
html部分へ入れるリスト1~6はどの部分へ入れるべきでしょうか。

また記事のカテゴリーやタグ一覧以外の記事の一番下にもページ送りを付けたいのですが上手くいきませんでした。
今現在次ページへ、などと表示されている部分です。

この部分に枠付きのリストを付けていたとき、記事数が多く数字が折り返してしまいました。
なのでこの部分は初期状態に戻してあります。


イメージとしては<< 枠付き数字1~6.....50 >>のような感じ・・・
(果たしてこれがいいのかどうかさえも不安です)


素人な質問ですみません。
お忙しいところ申し訳ありませんがお知恵をいただけましたら嬉しいです。
【2011/09/05 21:52】 | Imoon #- | [edit]
では、分かる範囲でお答えさせていただきます。

記事のカテゴリーやタグ一覧以外の記事の一番下にもページ送りを付けたいとのことですが
<!--前&次-->で囲まれた部分にコードを挿入すればいいはずです。


<< 枠付き数字1~6.....50 >>という感じ(このブログのように)でしたら
<script type="text/javascript"><!--
pagenavi(5); //--></script>
で大丈夫だと思います。

これだと周り5ページが表示されますので10ページ目でしたら以下のようになります。
1 ... 4 5 6 7 8 9 10 11 12 13 14 15 16 ... 50
このような場合が一番スペースを取りますので
収まるように調整すればいいと思います。

すべての疑問に答えられていなかったらすいません。
【2011/09/09 18:21】 | 管理人 #E2ywrYdA | [edit]
いつも、チラっと勉強をさせて頂いておりありがとうございます。

貴殿にしては珍しい事だったのでコメントしてみました。
記事1-5~7の間と、記事4-5の部分の表示が乱れています。
macos10.5+firefox9.0という環境依存なのか分からなかったのでお知らせしておきます。

今後も頑張って下さい!
【2011/12/18 08:26】 | - #- | [edit]
ご指摘ありがとうございます。

リストに使っている画像を変えたのですが、
その際間違えて違う画像を指定してしまってました。

ただいま修正しましたのでもう大丈夫だと思います。

これからもよろしくお願いします!
【2011/12/18 16:58】 | 管理人 #E2ywrYdA | [edit]
「HタグとPタグを横並びに表示する」でpをinlineにしているのが勉強になりました。
hとpにfloat:left;をする必要がないんですね。
【2012/03/29 17:31】 | 天 #- | [edit]
天さん

こんにちは。
お役に立ててうれしいです。
個人的にfloatは苦手なのでこっちの方がおすすめです。

またお立ち寄りください。
【2012/03/29 17:45】 | 管理人 #E2ywrYdA | [edit]
ボックスを揃えるのが参考になりました。アイデアがすごいですね。
あと、
>ちなみに10000pxという数字は特に意味のあるものではなりません。
の「なりません」は「ありません」の間違いではないでしょうか?
【2012/04/03 18:39】 | 天 #- | [edit]
天さん

ご指摘ありがとうございます。
情けない間違いですね。早速修正しました~

ありがとうございました!
【2012/04/04 04:38】 | 管理人 #E2ywrYdA | [edit]
ブログの左サイドバーに枠だけ2個でてしまっています。この左の枠を消すにはどうしたらよいですか?
宜しくお願いします。
【2015/12/24 00:56】 | takemotoma0822 #x9c5GV3o | [edit]









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

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