2013.09.12
css

意外と知らないCSSの使い方テクニック7つ

結構基本的なこともありますが、意外と知らないかもしれない、でも知っていると便利な、CSSの使い方を7個紹介します。

1.フォントに関する記述

CSSソース
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

以下のように省略できます。

CSSソース
font: bold italic small-caps 1em/1.5em verdana,sans-serif

すっきりしますね。
日本語フォントだとitalic、small-capsは関係ないですが・・・。
注意点は、この省略する方法は、font-familyとfont-sizeの両方が記述されていないと無効になります。
それ以外は省略してもOKです。
またfont-familyは一番最後に記述します。

2.同時に2つ以上のクラスを指定

通常は1つのクラスしか指定しないと思いますが、半角スペースで区切って2つ以上のクラスを同時に指定できます。
カンマではなくスペースなので注意です。

HTMLソース
<p class="text side">...</p>

上記のようにすると、このPタグには、CSSで記述したtextというクラスとsideというクラス両方の値が反映されます。もし重複した値がある場合はCSSでの記述が後のものが適用されます。

MEMO: CSSは後から記述された方が適用されます。

3.border(枠)のデフォルトの値

CSSでborderを記述する時、通常はcolor、width、styleを指定すると思います。

CSSソース
border: 3px solid #000;

例えば上記のようにすると、黒い3pxの太さの枠ができます。
しかし!実はstyleだけ指定すればOKなんです。

CSSソース
border: solid;

上記のようにすると、デフォルトのボーダーが適用されます。
デフォルトはミディアムとなっており、3~4pxの太さ、色はテキストの色になります。
CSSの記述はできるだけ少なく簡素に記述する方が良いですので、知っていると役立ちますね。

4.印刷用のCSS

HTMLのheadに2種類のCSSします。

HTMLソース
<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen"/>
<link type="text/css" rel="stylesheet" href="printstyle.css" media="print"/>

上記の場合、1つ目は画面表示用、2つ目は印刷用のCSSになります。
印刷時に変更したいCSSの部分をstylesheet.cssからprintstyle.cssへ持っていきCSSのプロパティや値を変更します。
また、display: none;を使って必要のない部分(メニュー、サイドバー、パンくずリストなど)は印刷されないようにします。

5.画像の配置テクニック

文字を書いた画像を使うよりも、HTMLで文字を直接書く方が、サーチエンジンや表示速度の面では有利とされています。
しかしデザインを重視したい場合や、強調したい場合などは画像を使いたかったりします。

例えば、ウィジェットを販売するサイトで、「ウィジェットを購入」というキャッチフレーズをサーチエンジンでも見つかるように見出しにし、文字ではなく画像を使いたい場合。

HTMLソース
<h1><img src="widget-image.gif" alt="ウィジェットを購入" /></h1>

上記のようにするのが一般的です。
しかし、最近ではaltのテキストはサーチエンジンで重視されていません。
つまりaltにテキストを入れてもSEOでは無意味なのです。

そこで下記のように。

HTMLソース
<h1>ウィジェットを購入</h1>
CSSソース
h1{
background: url(画像のパス/widget-image.gif) no-repeat;
height: 50px;
text-indent: -2000px
}

heightは必ず指定しましょう。
この方法は、text-indentで画面の外に文字を飛ばしています。
1つ問題点を挙げるとすれば、画像を非表示にしているユーザーには画像もテキストも何も表示されないという点です。
しかし、見出しを文字としているのでサーチエンジン対策にはなりますね。

6.上下のアライン

上下のスペースが均等に文字を中央に配置したいとき。
vertical-align: middle;というのがあるのですがこれは全然使えません。

CSSソース
height:2em;
line-height:2em;

上記のように要素のheightとline-heightを同じにするとうまくいきます。
注意点は文字が1行の場合のみ上下方向の中央に文字が配置されます。

7.positionについて

positionプロパティがうまく使えるようになるとデザインの幅がかなり広がります。

HTMLソース
<div id="container"><div id="navigation">...</div></div>
CSSソース
#container{
position: relative
}

#navigation{
position: absolute;
left: 30px;
top: 5px
}

上記のようにするとクラスnavigationはクラスcontainer内ののleftが30px、topが5pxの位置にきます。
position:absolute;を使わずにmargin:5px 0 0 30px;としても同じですが、z-indexを使用する場合などはpositionを利用しますので場合によって使い分けるのが良いですね。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP