Webページ制作時において、<li>や<img>などのインライン要素に対して
HTMLソース上でタグ間を改行させると半角スペースほどの空白(余白)が発生してしまい
扱いに困ることがあったりするので、この空白をjQuery使って強引に削除する実験をしてみました。

jQueryでインライン要素をHTML内で改行すると発生する空白を削除する実験

まず単純に<li>をインライン要素として
下記の様にHTML上に記載すると・・・

◆HTML
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>

これをこのままブラウザで実行させると
下記の様に数字の間に半角スペースほどの空白が発生します。
※空白が分かりやすいように各数字にはCSSでボーダーをつけてあります。

この空白は<li>~</li>の後ろで改行させることで発生している現象なので
HTML上で改行をコメントアウトさせる方法で消すことも可能です。

◆HTML
<ul>
<li>1</li><!--
--><li>2</li><!--
--><li>3</li><!--
--><li>4</li><!--
--><li>5</li><!--
--><li>6</li><!--
--><li>7</li><!--
--><li>8</li><!--
--><li>9</li><!--
--><li>10</li>
</ul>

もしくは改行位置をタグの途中で行うやり方なども。。

◆HTML
<ul>
<li>1</li
><li>2</li
><li>3</li
><li>4</li
><li>5</li
><li>6</li
><li>7</li
><li>8</li
><li>9</li
><li>10</li>
</ul>

これらの方法で空白を削除させることもできますが
あまり見栄えが良いものではないと思っています。

そこでHTMLソースは<li>~</li>の後ろで改行させる形のままで
発生する空白をjQueryを使って削除してみます。

スクリプトは以下の様に。

◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
	var setElm = $('li');
	$(window).load(function(){
		setElm.each(function(){
			var self = $(this);
			$(this).parent().append(self);
		});
	});
});
</script>

これを実行させると以下の様に空白が消えた状態になります。

「<li>:jQueryでインライン要素をHTML内で改行すると発生する空白を削除する実験」サンプルを別枠で表示

構造としては<li>それぞれを一旦抜き出して
親要素<ul>に再度入れ直すことで改行を取っている状態にしています。

スクリプト5行目の

var setElm = $(‘li’); 実行させるインライン要素

が実行させる対象インライン要素になっています。

この方法では、対象要素が親要素と子要素の組み合わせになっていれば
<ul>と<li>の組み合わせでなくても実行可能になっています。

例えば<div>と<span>の組み合わせの場合。

◆HTML
<div class="setList">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
</div>

実行対象を以下の様に記述します。
※5行目の実行する対象要素以外の部分は変化ありません。

◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
	var setElm = $('.setList span');
	$(window).load(function(){
		setElm.each(function(){
			var self = $(this);
			$(this).parent().append(self);
		});
	});
});
</script>

これを実行させたパターン。
(見た目は変わりありません・・・)

「<span>:jQueryでインライン要素をHTML内で改行すると発生する空白を削除する実験」サンプルを別枠で表示

このインライン要素をHTML内で改行することで発生する空白の削除は
他にもCSSを使って「float」させる方法や
「display:inline-block」を適用させて削除する方法などなど
やり方は様々ありますが、いくつか削除方法を知っておくと
その時々の状況によって使い分けができ便利になるかと思っています。

jQueryでインライン要素を改行させた際の空白を削除する際にぜひ。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでインライン要素をHTML内で改行すると発生する空白を削除する実験

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner