WordPress等を利用している場合に、コメントシステムとして大変人気のあるDISQUSというコメントシステムがあります。
詳しくは下記のサイトなどをご覧頂くとして、このDISQUSはPC向けだけでは無く、スマートフォンなどでも表示できるモバイルテーマが標準で附属しています。
しかしこのモバイルテーマ、なぜかPC向けと違い、FacebookやTwitterでログインする機能が省略されてしまっています。
かといってPC版のインターフェースをスマートフォンで利用しようとすると、コメント部分は普通に利用できるものの、ログインウィンドウが画面からはみ出してしまい、相当解像度の高いスマートフォンではないとログインに支障がでてしまいます。
DISQUSはAPIの管理画面から、独自にCSSを適用することが可能です。
そこで、PC向けのログインウィンドウをスマートフォンで見た際にも、綺麗に画面内に収まるようカスタムCSSを作成してみました。
IEを含めた最近のブラウザでは珍しくなくなったinline-block。
このinline-blockを利用する場合に発生する「隙間」を改善する方法です。
下記のようなHTMLを用意しました。
リストタグを使ったインラインブロックを実現しようとしています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>inline-block test</title>
</head>
<style>
.inline-block li {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #000;
line-height: 100px;
text-align: center;
}
</style>
<body>
<ul class="inline-block">
<li>ボックスA</li>
<li>ボックスB</li>
<li>ボックスC</li>
</ul>
</body>
</html>
これを実際にブラウザで表示してみると。
期待していたのと違い、各リストタグの間に2px程度のマージンが空いてしまっています。
これはリストタグとリストタグの間に存在する改行が半角スペースとして表示されてしまっているからです。
その証拠に、下記のように<li>タグの間のスペースを除去してみます。
<ul class="inline-block"> <li>ボックスA</li><li>ボックスB</li><li>ボックスC</li> </ul>
そうすると、期待通りの表示になりました。
この改行コードの問題は、実に簡単なCSSで解決することができます。
インラインブロックを囲むタグ（この場合は<ul>）と、インラインブロックにとして設定するタグ（この場合は<li>）に、下記のようなCSSを適用します。
.inline-block {
letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */
}
.inline-block li {
display: inline-block;
letter-spacing: normal; /* 文字間を通常に戻す */
width: 100px;
height: 100px;
border: 1px solid #000;
line-height: 100px;
text-align: center;
}
たったこれだけで、タグの間に改行があっても正しく表示できるようになります。
使い始めると便利なインラインブロック、無駄な隙間に悩んでいる方は是非お試しあれ。
CSSで複雑な表組みなどをデザインしている際、幅や高さをピクセル単位で細かく指定したいことがありますよね？
ただ、HTMLのstyle要素は記述が汚くなるから使いたくない、でもCSSでわざわざclassを作っているとCSSがごちゃごちゃしてしまう・・・。
そんな場合に、HTMLのclass要素を使って、簡単に幅と高さを指定できるJavaScriptを書いてみました。
wh.js
※jQueryを利用しますので、別途jQuery 1.3.2以上のバージョンをダウンロードしてください。
(function($) {
$(function() {
$('[class*=w_], [class*=h_]').each(function() {
var classes = $(this).attr('class').split(' ');
for (var i in classes) {
if (match = classes[i].match(/^([wh])_(\d+)(px|p)$/)) {
var key = '';
var value = '';
switch (match[1]) {
case 'w':
key = 'width';
break;
case 'h':
key = 'height';
break;
}
switch (match[3]) {
case 'p':
value = match[2] + '%';
break;
case 'px':
value = match[2] + 'px';
break;
}
$(this).removeClass(match[0]).css(key, value);
}
}
})
});
})(jQuery);
jqueryを利用しますので、本ライブラリを読み込ませる前にjqueryの1.3.2以上を読み込ませてください。
class指定に下記のような記述をしてください。
この場合、widthが100ピクセル、heightが200ピクセルの指定がされます。
また、パーセントでの記述も対応しています。
この場合、widthが100％、heightが33%の指定になります。
他のclassとの共存も問題ありませんので、比較的自由なデザインが可能になるかと思います。
CSSのroundedプロパティは、IEに対応していないという点はあれど、ボタンやボックスを簡単に角丸に装飾できて便利なプロパティです。
ただ、IEを除いたブラウザに対応させる際も、WebkitやMozilla向け、さらにはCSS3対応のプロパティを併記するとなると少々面倒に感じることがあります。
そこで、数値を入力するだけで実際のイメージを見ながら、各ブラウザ向けのroundedプロパティを簡単に取得できるサイトをご紹介します。
上記のサイトに角丸の半径をピクセル数で入力すると、それに対応したプロパティが自動的に出力されますので、それをコピーして利用すると簡単です。