レスポンシブwebデザインのCSS

CSS
2013-08-05 - 更新:2013-08-08

簡単なレスポンシブwebデザインを実装してみましょう。
以下のようなHTMLがあったとします。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<div class="content">
    sample
</div>

</body>
</html>

まず、どんな画面サイズでも共通となるスタイルを記述します。

@charset "utf-8";

*
{
    margin: 0;
    pading: 0;
}

各画面サイズに適用するスタイルをMediaQueryを使って指定していきます。
続きを読む…»

CSS, HTML, レスポンシブwebデザイン

1,584 views

画像の余分な余白を削除 [CSS]

CSS
2013-05-16 - 更新:2013-05-28

imgタグを使用して表示した画像の下には余分な余白ができてしまいます。
これは画像の下端がテキストのベースラインに合わせられることが原因です。

アルファベット小文字のgやy等で、ベースラインよりも下にはみ出す部分のことをディセンダー（descender）といいます。
このディセンダーは文字だけではなくimg要素にも適用されるので、画像の下に余白ができてしまいます。

ディセンダーはimg要素にvertical-align: text-bottom;
もしくはvertical-align: middle;を指定することで削除できます。

img
{
    vertical-align: text-bottom;
    vertical-align: middle;
}

ちなみに、img要素にmiddleを指定すると、画像の中心を小文字の「x」の中心に揃えることになる。

CSS, HTML

5,496 views

CSS nth-childセレクタ

CSS
2012-11-27

n番目や偶数・奇数の要素にスタイルシートを適用させたいとき、nth-childセレクタを使用します。
ここでは、テーブルを例にやってみます。

偶数行の背景色を指定する

table tr:nth-child(even)
{
    background: #f5f5f5;
}

奇数行の背景色を指定する

table tr:nth-child(odd)
{
	background: #cbcbcb;
}

1,987 views

改行方法の指定【word-break】

CSS
2012-11-20 - 更新:2012-12-17

文章の改行方法を指定したいとき、スタイルシートのword-breakプロパティを設定します。
特にURLやソースコードなど、途中で改行されずにボックスからはみ出てしまうことがあります。
※これまではIEのみの対応だったようですが、CSS3では標準採用されているようです。

div.sample
{
    word-break: break-all;
}

HTML

1,926 views

PNG画像の透過表示

CSS
2010-08-11 - 更新:2015-09-28

以下のフィルター（CSS）をimg要素に適用させる

filter: chroma(color=#000000);

もしくは

<div style="width:100%;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image, src='logo.png');"></div>

この場合、CSSでレイヤーとして表示しないといけない。

1,458 views