css

text-indent:-9999pxが使えない時はこの方法

2014年5月21日

·

master

サイトのロゴ等、テキストにタグを指定して画像に置き換える方法は定番だが、text-align:rightを使いテキストを右揃えで使っている場所ではtext-indent:-9999pxの方法は使えない。
(さらに…)

三点リーダがブラウザで文字の下側に揃って表示されてしまう時のcss解決方法

2014年4月8日

·

master

三点リーダとは、いわゆる中黒「・」が３つ並んで１文字分になっている記号のこと。
(さらに…)

メンテナンスも可能なcssファイルの最適化・軽量化ならこの方法

2014年2月18日

·

master

ウェブサイトの表示は高速であればあるほどユーザーの離脱率は低くなりUX（ユーザーエクスペリエンス）も向上する。
表示速度もサイト評価の対象となるとGoogleもコメントしているように、サイトの高速化は急務といえる。

大きな変更を必要としない高速化として、スタイルシートの最適化、圧縮、軽量化は効果的な方法。

検索すると様々なcss圧縮のウェブサービスが見つかるが、難読化がメインだったり、圧縮のレベルを設定できないなど、不便なサイトも多い。
最適化・軽量化の処理をした後も、サイトの更新等でcssの修正が必要となる場合も多いことから「適度な軽量化」が出来るサイトとして、以下のサイトをおススメする。

http://e-optimize.jp/services/csstidy/css_optimiser.php

使い方は簡単。

1.　ページ左側にある「CSS Input」のテキストボックスの中にcssファイルの中身をペーストするか、「URLから入力」で最適化・軽量化したいcssファイルのURLを指定する。

2.　実行ボタンを押す。

3.　画面下部に最適化・軽量化されたcssファイルが表示される。

4.　表示されたcssファイルをコピーして保存。

最適化・軽量化されたcssファイルの上部には

入力: 6.901KB, 出力:4.964KB, 圧縮率: 28.1% (-1937 Bytes)

のように表示されるので、どれだけ圧縮、軽量化できたかも確認できる。

また、オプションとしてCode LayoutとOptionsの項目があり、

Code Layoutでは

圧縮率（コードレイアウト）を

最高 (改行なし)
高 (セレクタ1行表記)
標準 (プロパティごと改行)
低 (プロパティをインデント)

からプルダウンで選択することが出来る。

Optionsでは

CSSの内容を保護する
セレクタをアルファベット順で整列（注意）
プロパティをアルファベット順で整列
セレクタの再編成
ショートハンドCSSの最適化
colorの値を簡略化する
font-weightを数値にする
セレクタを小文字にする
プロパティの文字:
変更なし小文字大文字
不要なバックスラッシュを削除
最後のプロパティには ; をつけない
規格外のプロパティは削除
タイムスタンプを追加
最適化の結果を保存する

からチェックボックスで有効にする項目が指定出来る。

今後の修正を必要としないcssファイルの場合は圧縮率を「最高」にしてもいいが、修正や追加などのメンテナンスが必要なcssファイルの場合は

標準 (プロパティごと改行)

がおススメ。
また、Optionsは以下の

colorの値を簡略化する
font-weightを数値にする
不要なバックスラッシュを削除

にチェックのままで良いだろう。

なお、最適化のためにcssファイル内のコードの順序等も変更されるから、必ず元のcssファイルは保存しておき、表示に問題が無いことを確認することが大切。

CSSのみで簡単にテーブルの表示をレスポンシブルデザインにしたい時

2013年6月21日

·

master

Javascriptも使わず、スタイルシートのみで簡単にテーブルのデザインを変更して、スマートフォン等でも見やすくすることが可能です。

CSS

/* 通常時の設定 */
#list-tbl{
	border-collapse: collapse;
}
#list-tbl th{
	width: 180px;
}
	#list-tbl th,
	#list-tbl td{
	border: 1px solid #ccc;
}

/* 800px以下になった場合の設定 */
@media only screen and (max-width:800px){
	#list-tbl th,
	#list-tbl td{
		width: auto;
		display: list-item;
		list-style-type: none;
		border: none;
	}
	#list-tbl th{
		color: #fff;
		background: #ccc;
	}
}

HTML

<table id="list-tbl">
<tbody>
<tr><th>1月3日</th><td>南方週末社説差し替え事件。同月7日より出版の自由を求めるデモが行われた。</td></tr>
<tr><th>1月13日</th><td>シボレー・コルベット7代目モデル（C7型）がアメリカの「デトロイトモーターショー13」プレビューイベントにて発表される。</td></tr>
<tr><th>1月16日〜20日</th><td>アルジェリア南部イナメナスの天然ガス関連施設をイスラム系武装勢力が襲撃し、日本人技術者を始めとする多数の死傷者が発生した。（詳細→アルジェリア人質拘束事件）</td></tr>
<tr><th>1月17日</th><td>ソマリアを正式承認。国交を樹立</td></tr>
<tr><th>1月20日</th><td>アメリカ合衆国大統領就任式。2012年11月の選挙の結果により、バラク・オバマ大統領が続投でアメリカ大統領に就任した。</td></tr>
<tr><th>1月22日</th><td>ロシアの小型衛星BLITSがスペースデブリに衝突。BLITSは衛星としての機能を喪失。当初は2007年1月11日に破壊された中国の気象衛星風雲1号Cの破片と思われていた。<br />スマトラ島の北部、アチェ州直下でマグニチュード(M)5.9の地震が発生、14歳の少女1人が死亡、15人が負傷した。（詳細→スマトラ島地震 (2013年1月)）</td></tr>
</tbody>
</table>

PC（ウィンドウサイズ800px以上の場合の表示）

スマートフォン等（ウィンドウサイズ800px未満の場合の表示）

WordPressのスマホ用プラグインwp-pdaのカラーカスタマイズはこの方法

2012年11月14日

·

master

iPhone・Android等のスマートフォンに対応させるWordPress用のプラグインWordpress PDA & iPhone（wp-pda）はベースにJquery mobileを使用している。
そのためwp-pdaの配布ファイルでは、ウェブサイトを高速化するため、jquery、jquery mobileの各javascriptおよびスタイルシートcssはCDNで直接呼び出しており、CSSを使ったカスタマイズが分かりにくいという難点がある。
デフォルトでは黒いタイトルラインとブルー系のナビボタン、日付になっているが、これを変更したいと思うことは多いはず。
色の変更であれば、意外なほど簡単に配色をカスタマイズしてサイトのデザインを変えることが可能なので紹介。

修正するのは以下のファイル
wp-content/plugins/wp-pda/style.css

ファイルを開き、最後に以下のスタイルシートを追加する

.ui-btn-active,
.ui-bar-b,
.ui-bar-c {
background: #fff;
color: #fff;
font-weight: bold;
border: 1px solid #bf0059;
text-shadow: 0 -1px 1px #bf0059;
text-shadow: none;
background-image: -webkit-gradient(linear, left top, left bottom, from( #ffbbca), to( #ff90a7));
background-image: -webkit-linear-gradient(#ffbbca, #ff90a7);
background-image: -moz-linear-gradient(#ffbbca, #ff90a7);
background-image: -ms-linear-gradient(#ffbbca, #ff90a7);
background-image: -o-linear-gradient(#ffbbca, #ff90a7);
background-image: linear-gradient(#ffbbca, #ff90a7);
}

各項目の解説

background:
ヘッダ、タイトル、ナビ選択状態の背景色

color:
ヘッダ、タイトル、ナビ選択状態の文字色

border:
回りのラインの色（同系色の濃いめにすると良い）

text-shadow:
タイトル文字の影（同系色の濃いめにすると良い）

background-image:
複数あるが、多くのブラウザに対応させるためのもの（同じ色で指定していく）

CSSで複数のclassを同時に指定したい時

2012年7月28日

·

master

CSSで複数のclassを使う場合、

<div class="aaa">
<div class="bbb">
</div>
</div>

のような表記をまとめて

<div class="aaa bbb">
</div>

とするのは知られているが、では、その両方のclassを持っている要素の指定はどうすればいいか。

方法は意外に簡単で以下の通り。

.aaa.bbb {
background:#000;
}

超簡単で動かせる付箋・スティッキーズ風のモーダルウィンドウ

2012年7月21日

·

master

シンプルな構造で設置も簡単、マウスで移動も自由でボタンで消すことも出来る、MacやWindowsのスティッキーズ風のモーダルウィンドウ（Modal window）。ポップアップウィンドウに変更するのも簡単。

導入は以下のサンプルを貼付けていくだけで簡単にできる。

<head>〜</head>内にJqueryを取得するコードを記載

javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

付箋・スティッキーズ本体のJavascriptは以下

上記と同様に<head>〜</head>内に記載してもいいし、別ファイルにして呼び込んでもいい。

<script type="text/javascript">
function stki(stID,wx,wy,ww,wh,co,bc,lc,zi,tc){
$(stID).css({
position: 'absolute',
top: wy, left: wx,
width: ww, height: wh,
color: co,
'background-color': bc,
'border': lc,
'z-index': zi
}).fadeIn('slow');
$(stID + ' .stittl').css({'background-color': tc}).fadeIn('slow');
$(stID + ' .stittl .sticlose').click(function(){$(stID).fadeOut('slow');});
$(stID + ' .stittl').mousedown(function(e){
var mx = e.pageX; var my = e.pageY;
$(document).on('mousemove', function(e) {
wx += e.pageX - mx; wy += e.pageY - my;
$(stID).css({top: wy, left: wx});
mx = e.pageX; my = e.pageY;
return false;
}).one('mouseup', function(e){
$(document).off('mousemove');
});
return false;
});
}
</script>

最小限必要なスタイルシートcssは以下

別ファイルにして呼び込んでもいい。

<style>
.stittl {
padding: 1px 3px;
font-size: 13px;
cursor: move;
}
.sticlose {
float: left;
cursor: pointer;
}
.stimain {
padding:3px;
}
</style>

実際の付箋・スティッキーズは以下

<body>〜</body>のどこに記載しても構わない

ポイントはid=”stickies1″

後ほどid名で呼び出すから、id名を変えればいくつでも設置可能。

HTML

<div id="stickies1">
<div class="stittl"><div class="sticlose">□</div>&nbsp;</div>
<div class="stimain">
ここが画面に表示されるテキストになる
</div>
</div>

上記 の代わりに文字を入れるとタイトル部分に表示される。

付箋・スティッキーズの呼び出しJavascriptは以下

<body>〜</body>のどこに記載しても構わない

<script type="text/javascript">
$(function() {
stki('#stickies1',100,100,300,200,'#666','#fff','1px solid #ccc',12,'#eee');
});
</script>

上記により付箋・スティッキーズ本体を表示させている。

変数は以下の通り

stki(id名,表示位置（左から）,表示位置（上から）,ウィンドウ幅,ウィンドウ高さ,文字色,本体背景色,ボーダー色,z-index,タイトル背景色);

個別のid名で自由な位置、サイズ、色で複数設置が可能。

初期表示をdisplay:none;にしておいてクリックで呼び出したり、スライドインなどのエフェクトで遊ぶのもいいだろう。

クリッカプルマップ対応Jqueryのみでツールチップ

2012年6月24日

·

master

ツールチップのJavascriptは数多くあるが、クリッカプルマップに対応したものが以外に少ない。

下のサンプルでは、他のJavascriptファイルを必要としないシンプルなTooltipでありながら以下の機能を備える。

表示時のフェードインおよび速度の設定が可能。
表示時の半透明（透明度）が設定可能。
マウス座標に対する表示位置が設定可能。
画像を使わずツールチップの角丸が設定可能。
文字サイズフォントの設定が自由。

スクリプトは以下の通り。

Jquery他、ファイルのダウンロードは不要。使いたいページの<body>内にスクリプトをそのまま丸ごとコピーするだけで簡単に実装できる。

【スクリプト】

JAVASCRIPT

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" >
$(function(){
$('area.tooltip').mouseover(function(e){
$('div#' + e.target.id).css({opacity:0, display:'block'});
$('div#' + e.target.id).fadeTo('normal', 0.5);
});
$('area.tooltip').mousemove(function(e){
$('div#' + e.target.id).css('left', e.pageX + 20);
$('div#' + e.target.id).css('top', e.pageY - 50);
});
$('area.tooltip').mouseout(function(e){
$('div#' + e.target.id).css({display:'none'});
});
});
</script>

CSS

<style>
.tipText {
position: absolute;
padding: 10px;
background-color: #ffffff;
border:1px solid #ccc;
border-width:0px 1px 1px 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.tipText b {
font-size:20px;
}
</style>

HTML

<img src="bgt.gif" width="234" height="60" border="0" usemap="#Map" style="margin-left: 0px;" />

<map name="Map">
  <area shape="circle" coords="208,28,20" href="javascript:void(0);" onClick="copen(1);" id="tip1" class="tooltip" />
  <area shape="rect" coords="17,28,166,50" href="javascript:void(0);" onClick="copen(2);" id="tip2" class="tooltip" />
</map>

<div id="tip1" class="tipText" style="display:none;"><b>王様</b><br />(さらに容量が拡大されました)</div>
<div id="tip2" class="tipText" style="display:none;"><b>ハッスルサーバー</b><br />(おすすめのサーバーです)</div>

【設定（カスタマイズ）】

フェードイン・透明度

$(‘div#’ + e.target.id).fadeTo(‘normal’, 0.5);

速度は、”fast”、”normal”、”slow”、または完了までの時間をミリ秒

透明度は、0から1。薄いと読み辛くなるから0.5以上が好ましい

表示位置

$(‘div#’ + e.target.id).css(‘left’, e.pageX + 20);

$(‘div#’ + e.target.id).css(‘top’, e.pageY – 50);

上記ではマウスの位置右側20ピクセル離れた位置、上に50ピクセル上がった位置が基点となる。

背景色

background-color: #ffffff;

背景色を濃くした場合は文字色を白にするといい（color: #ffffff;を追加）

影

border:1px solid #ccc;

border-width:0px 1px 1px 0px;

この指定で右側と下側に１ピクセルの線を設定している。

角丸

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

古いブラウザは四角のまま

フォントサイズ

font-size:20px;

<b>以外の部分にサイズを指定したい場合はtipText内に指定する

.tipText {

〜

font-size:14px;

}

【指定方法】

クリッカプルマップ

クリッカプルマップのhrefはjavascript:void(0);とする

onClick=”copen(1);”

カッコ内の数字1から順に振っていく

id=”tip1″の数字も合わせる

この数字が表示される文字のIDに対応する

class=”tooltip”必須

ツールチップ

<div id=”tip1″ class=”tipText” style=”display:none;”><b>王様</b><br />(さらに容量が拡大されました)</div>

id=”tip1″の数字がクリッカプルマップに設定したIDの数字に対応する

class=”tipText”必須

style=”display:none;”で非表示にしておく

Firefoxのみに適用させるCSSを書く方法

2011年3月20日

·

master

FirefoxにはIEのように独自の実装擬似クラスがあるから、CSSに独自実装擬似クラス（例えば:-moz-any-link）を入れることにより、Firefoxだけに適用させるCSSを書くことができる。

方法は簡単

【例】

.tabbody {

margin-bottom: 4px;

}

の場合

Firefox2に適用させるCSSハック

.tabbody, x:-moz-any-link {

margin-bottom: 5px;

}

Firefox3に適用させるCSSハック

.tabbody, x:-moz-any-link, x:default {

margin-bottom: 5px;

}

両方に適用させたい時は、Firefox2に適用させるCSSハックを記載した後Firefox3に適用させるCSSハックを記載すればいい。

CSSスプライト（CSS Sprite）でサイトを高速化する方法

2009年10月28日

·

master

CSS Sprite・CSSスプライトとは、ページに表示される全部の画像をひとつにまとめて一枚の画像にしておき、表示する際にその一枚の画像から必要な部分のみをCSSで切り出して使うテクニック。
簡単な例として、メニュー等で画像を使い、ロールオーバーによる画像変更をする場合、ひと昔前であれば、通常時とマウスオーバー時の画像をそれぞれ用意し、Javascriptでプリロード、同様にJavascriptで画像を差し替える。最近では、通常時とマウスオーバー時の画像を一枚にまとめておき、CSS・スタイルシートを使って画像位置を変える。といった方法がよく使われてきていたが、これをさらに全面的に使うのがCSSスプライト（CSS Sprite）と呼ばれる方法。

確かに、サーバーへのリクエストが減るため軽量化されることが多いが、画像の作成、CSSの設定が面倒なのも事実。
そういった場合には、Sprite Creatorを使うといい。
http://www.floweringmind.com/sprite-creator/
で公開されているこのサービスは、1枚の画像から特定の画像を取り出すCSSを作成するためのツールで、画像をアップロートして切り出したい画像部分を選択すると、それに対応したCSSが自動生成される。

さらに、既存の画像ファイルをCSS Sprite・CSSスプライト化したい場合には、画像をまとめてくれるCSS Sprite Generatorを使う。
http://ja.spritegen.website-performance.org/
使っている画像をまとめてzip圧縮してアップロードすると、１枚の画像にしてくれる上に、CSS SpriteのCSSも自動的に生成してくれる。様々な設定が可能で、クラス名につけるCSS接頭語も設定できるので、既存のサイトのCSSスプライトにも便利だろう。