カテゴリーアーカイブ: CSS

CSS：text-shadowを使用し、文字に影や縁取りをする

Posted on by
2

CSS3のtext-shadowを使用すれば、画像で作ったように文字を装飾することができます。
text-shadowを使用して、文字に影を付けたり、縁取り（アウトライン）をする方法をメモします。

text-shadowは文字に影を付けるプロパティです。

[text-shadow]

text-shadow: 横方向 縦方向 ぼかし 影の色;

使用例は下記のように指定します。

text-shadow: 5px 5px 1px #999999;

text-shadow1

設定する値を複数指定したい場合は下記のように’,’区切りで指定します。

text-shadow: 5px 5px 1px #999999, -5px -5px 1px #999999;

text-shadow2

noneを指定した場合、影は付きません。

■ 文字に影を付ける場合

【CSS】

.test {
	color: #000;
	font-size: 50px;
	font-weight: bold;
	text-shadow: 5px 5px 1px #999999;
}

【表示例】

text-shadow1

■ 文字に縁取りをする場合

【CSS】

.test {
	color: #FFF;
	font-size: 50px;
	font-weight: bold;
	text-shadow: 2px 2px 1px #00F,
	-2px 2px 1px #00F,
	2px -2px 1px #00F,
	-2px -2px 1px #00F;
}

【表示例】

text-shadow3

CSS：CSSで画像の幅・高さの最大値を指定する

Posted on by
返信

HTMLで画像を表示する場合、今まではimgタグに「width」、「height」を指定してました。

画像サイズが決まっているものに関しては問題ないのですが、
サイズが決まっていない画像を表示する場合は「width」・「height」を
指定していると画像が元のサイズから拡大や縮小してしまい、
きれいに表示されないことがあります。

CSSの「max-width」、「max-height」を使用すると画像の幅・高さの
最大値を指定することができるので拡大・縮小せずに画像を
きれいに表示することができます。

下記に「max-width」、「max-height」の使用方法をメモします。

■ max-width

幅の最大値を指定します。

max-width: 100px;

■ max-height

高さの最大値を指定します。

max-height: 100px;

■ 使用方法

【CSS】

div#hoge img {
	max-width: 300px;
	max-height: 300px;
}

【HTML】

<div id="hoge">
    <img src="/img/hoge.jpg" />
</div>

上記の方法を使用すると「max-width」、「max-height」で指定したサイズより小さい場合は
指定されません。
最大値に設定したサイズを超えた場合、指定したサイズに縮小され表示されます。

また、「min-width」、「min-height」を使用すれば、幅・高さの最小値を指定することができます。

CSS：「!important」を使用し優先的にスタイルを適用させる

Posted on by
返信

CSSでスタイルが適用される順番は、基本的には最後に読み込まれたスタイルが適用されます。
しかし、最初に読み込まれたスタイルを優先的に読み込ませたい場合があります。

CSSで「!important」を使用すると指定したスタイルを優先的に適用させることが可能です。

■ 「!important」の使用方法

「!important」の記述は下記のように
値の後に半角スペースを空けて記載します。

div {
	プロパティ: 値 !important;
}

下記のように設定した場合「!important」を使用した方のスタイルが優先的に適用されます。
なので、HTMLで記載した文字列の色は「#000000」で出力されます。

【CSS】

<style type="text/css">
div#main {
    color: #000000 !important;
}

div#main {
    color: #999999;
}
</style>

【HTML】

<div id="main">
テキスト文字列
</div>

「!important」を記述しない場合は、後に読み込まれた方のスタイルが
適用されるので文字列の色は「#999999」で出力されます。

CSS：CSSでボックス内の英語文字列等を折り返しさせる

Posted on by
2

HTMLの「table」タグや「div」タグなど、ボックス内で長い英語文字列やURL等を入れるとボックスからはみ出して表示されることがあります。
ボックスに指定した幅で文字列を折り返しさせるために、CSSを使用し英語等の文字列をボックス内で改行させます。
CSSは「word-break」、「word-wrap」を使用し、文字列の改行の仕方を指定します。

■ 「table」タグの場合

「table」タグでは「word-wrap: break-word;」を使用するとボックス幅が伸びてしまうので、「word-break: break-all;」を使用して折り返しさせます。

【CSS】

table {
    width: 300px;
}
table th {
    border: 1px solid #CCC;
    width: 50px;
}
table td {
    border: 1px solid #CCC;
    word-break: break-all;
}

【HTML】

<table>
    <th>URL</th>
    <td>http://raining.bear-life.com/test/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</table>

css_box_1

■ 「div」タグの場合

「div」タグでは「word-wrap: break-word;」と「word-break: break-all;」でどちらでも折り返しされますが、「word-wrap: break-word;」の方が単語の途中で折り返しするので「word-wrap: break-word;」を使用します。

【CSS】

div {
    border: 1px solid #CCC;
    width: 300px;
    word-wrap: break-word;
}

【HTML】

<div>
http://raining.bear-life.com/test/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

css_box_2