INSPIRE TECH » Webデザイン http://inspire-tech.jp 株式会社インスパイアデザインのプログラマーである家富正幸が、デザインやシステム開発、ソーシャルメディアや最近のトレンドなど、Webに関する様々な情報を発信しているブログです。 Fri, 29 Jan 2016 05:25:58 +0000 ja hourly 1 https://wordpress.org/?v=3.8.41 inline-blockを並べた場合に発生する「隙間」を消去するCSS http://inspire-tech.jp/2011/06/inline_block_spaces/?utm_source=rss&utm_medium=rss&utm_campaign=inline_block_spaces http://inspire-tech.jp/2011/06/inline_block_spaces/#comments Fri, 17 Jun 2011 08:44:59 +0000 http://inspire-tech.jp/?p=246 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でなんとかなる

この改行コードの問題は、実に簡単な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;
}

たったこれだけで、タグの間に改行があっても正しく表示できるようになります。
使い始めると便利なインラインブロック、無駄な隙間に悩んでいる方は是非お試しあれ。

]]> http://inspire-tech.jp/2011/06/inline_block_spaces/feed/ 10 CSSのroundedプロパティを簡単に設定する http://inspire-tech.jp/2010/08/generate_rounded_property_of_css/?utm_source=rss&utm_medium=rss&utm_campaign=generate_rounded_property_of_css http://inspire-tech.jp/2010/08/generate_rounded_property_of_css/#comments Fri, 27 Aug 2010 04:38:40 +0000 http://inspire-tech.jp/?p=29 CSSのroundedプロパティは、IEに対応していないという点はあれど、ボタンやボックスを簡単に角丸に装飾できて便利なプロパティです。

ただ、IEを除いたブラウザに対応させる際も、WebkitやMozilla向け、さらにはCSS3対応のプロパティを併記するとなると少々面倒に感じることがあります。

そこで、数値を入力するだけで実際のイメージを見ながら、各ブラウザ向けのroundedプロパティを簡単に取得できるサイトをご紹介します。

http://border-radius.com/

上記のサイトに角丸の半径をピクセル数で入力すると、それに対応したプロパティが自動的に出力されますので、それをコピーして利用すると簡単です。

]]> http://inspire-tech.jp/2010/08/generate_rounded_property_of_css/feed/ 11 ウェブサイトのモックアップを簡単に作成できるAirアプリ http://inspire-tech.jp/2010/08/create_mockup_with_adobe_air_application/?utm_source=rss&utm_medium=rss&utm_campaign=create_mockup_with_adobe_air_application http://inspire-tech.jp/2010/08/create_mockup_with_adobe_air_application/#comments Fri, 27 Aug 2010 04:35:30 +0000 http://inspire-tech.jp/?p=13 ウェブサイトを顧客に提案する場合、今までエクセルでモックアップ（ワイヤーフレーム）を作って提案していたのですが、世の中にはちゃんとその目的で作られたアプリケーションがあるようで。

いろいろと探してみたところ、下記のアプリケーションにたどり着きました。

Balsamiq Mockups

http://www.balsamiq.com/

特徴としては下記の通り。

  • Airアプリなので、WindowsでもMacでも動作する（AdobeのAirが動作すればOK）
  • 手書き風のコミカルな画像なので親しみやすい
  • インターフェースは英語だが日本語も問題無く利用可能（システムフォントが利用できる）
  • iPodやiPhoneのモックもあるので、iOS用のアプリ開発にも利用できる
  • 価格が安い（79ドル）

ダウンロードしてから7日間は評価期間なので、是非利用してみてください。

]]> http://inspire-tech.jp/2010/08/create_mockup_with_adobe_air_application/feed/ 1