タグ別アーカイブ: CSS

CSS：CSSで簡単なツールチップを作成する方法

Posted on by
返信

CSSだけで簡単なツールチップを作成しました。

WEBサイト内の説明を書く場合などにツールチップを利用することがあります。
管理画面などでは項目ごとにどのような機能かを説明したりと便利です。

jQueryなどでもツールチップを作成することができますが、
今回はCSSのみで簡単なツールチップ（吹き出し）を作成する方法をメモします。

■ CSSでツールチップ（吹き出し）を作成

・テキストリンクにツールチップを付ける場合

【CSS】

<style type="text/css">
a.tooltip span {
    display: none;
    width: 200px;
    padding: 5px;
    margin: 10px 0 0 -10px;
}
a.tooltip:hover span{
    display: inline; 
    position: absolute; 
    border: 1px solid #CCC; 
    border-radius: 5px;
    background: #F7F7F7;
    color: #666;
    font-size: 12px;
    line-height: 1.6em;
}
</style>

【HTML】

<a href="#" class="tooltip">
テキストリンク<span>説明を書きます。<br />説明を書きます。説明を書きます。</span>
</a>

【表示例】

css_tooltip_1

・画像にツールチップを付ける場合

【CSS】

<style type="text/css">
a.tooltip span {
    display: none;
    width: 200px;
    padding: 5px;
    margin: 10px 0 0 -10px;
}
a.tooltip:hover span{
    display: inline; 
    position: absolute; 
    border: 1px solid #CCC; 
    border-radius: 5px;
    background: #F7F7F7;
    color: #666;
    font-size: 12px;
    line-height: 1.6em;
}
</style>

【HTML】

<a href="#" class="tooltip">
<img src="hatena.jpg" /><span>説明を書きます。<br />説明を書きます。説明を書きます。</span>
</a>

【表示例】

css_tooltip_2

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