ぜひ知っておきたい20のCSS小技集

CSSの小技集ってよく見かけますが、勉強とメモ帳を兼ねて自分なりに便利だと思うものを集めてみました。皆さんはいくつ知っていますか?
内容を充実させて作り替えたので、お手数ですがこちらをご覧ください。
 ⇒ CSSの知識をもっと深める30+2の小技テクニック集

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. 最初の行にだけスタイルを適用する

CSS
p:first-line{
  font-weight:bold;
  color:red;
}
sample

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

4. 最初に現れる文字にだけ適用する

雑誌の記事っぽくなります。wikipediaのトップページみたいな感じです。
CSS
p:first-letter{
  font-weight:bold;
  font-size:32px;
}
sample

最初の文字にだけ適用されます。

5. 中の要素に対してCSSを指定

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

Pタグには適応されず、中にあるタグ全て適用されます。

ちなみに、*(アスタリスク)だけにすると全てのタグに適用されます。

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

日本語の文章は最初の一文字を開けることが多いですが、そんな時スペースでっていうのもなんだかな~という方に。
CSS
text-indent: 1em;
sample

このように最初の一文字が下がります。空白で下げるのは煩わしい、かっこ悪いと思われる方にはいいと思います。

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

CSS
text-indent: -1em;
padding-left: 1em;
sample

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

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

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

aaaaaaa@aaaaaaaa_aaaaaaaaaaa.aaaaaaaaaa/aaaaaaaaaaaaaaaaa

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

CSS
word-wrap: break-word;
sample

aaaaaaa@aaaaaaaa_aaaaaaaaaaa.aaaaaaaaaa/aaaaaaaaaaaaaaaaa

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

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

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

aaaaaaa@aaaaaaaa_aaaaaaaaaaa.aaaaaaaaaa/aaaaaaaaaaaaaaaaa

10. divを中央揃えにする

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

11. 上下中央揃えにする

上下中央揃えって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
上下真ん中に表示されます

12. hrに背景画像を使う

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

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

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

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あけて表示しています。

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

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

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

リンクをボタンのようにします。このブログでもサイドバーで使っています。先ほどの上の線を消すものと組み合わせるといい感じになります。
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

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

先ほどと似ていますが 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

17. borderを一括で指定する

CSS
border:1px solid #336699;

これは皆さん使っていると思いますが、top,right,bottom,leftすべて同じの線の場合は一括で指定できます。

また、線の太さ、種類、色も一括で指定できます。

18. backgroundを一括で指定する

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

19. 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は順番を守る必要がありますが、その他順番は自由です。

20. 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つだと全部。って感じになります。
分かっているつもりでも意外と奥が深いCSS。調べてみると結構面白くて勉強になりました。ご参考になれば幸いです。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









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

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加