Tweet｜ ｜ ｜ ｜

[ 1分で読めて簡単導入できます]

画像にテキストを回り込ませると、通常テキストは四角に区切られたエリア単位となります。
円や変な形状の画像のすぐ側に沿って回り込ませたい・・・そんなあなたに
jQueryプラグインのjQSlickWrapです。

使用方法
jQSlickWrapからjquery.slickwrap.jsをjQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.slickwrap.js"></script>
<script type="text/javascript">
$(function(){
$('.class名').slickWrap();
});
</script>

上記を記述したら画像とテキストを以下のようにします。
<img class="class名" src="image.png" />
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

最後にCSSで画像を好きな方に寄せてください。
<style>
.class名{
float:left;
padding:10px;
}
</style>

※HTML 5の【canvas】を使用しているのでIE6,7では・・・。
画像の側にテキストを回り込ませるJavaScript「jQSlickWrap」サンプル

記事作成：2009年11月25日