jQueryのUIの例 - 並べ替え（ソート可能）
ソートされたリストまたはグリッドの要素を調整するために、マウスを使用します。
ソート可能な相互作用の詳細については、APIドキュメントを参照してくださいソート可能なウィジェットを（ウィジェットをソート可能） 。
デフォルトの機能
ソート可能な機能は、任意のDOM要素で有効になっています。 新しい場所の要素のリストに、マウスをクリックしてドラッグし、他の項目が自動的に調整されます。 デフォルトでは、ソート可能な各エントリは、共有draggable属性を。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUI並べ替え（ソート可能） - デフォルトの機能</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#sortable {リストスタイル型：なし;マージン：0;パディング：0;幅：60％;}
#sortable李{マージン：0 3px 3px 3px;パディング：0.4em;パディング左：1.5em;フォントサイズ：1.4em;高さ：18px;}
#sortable李スパン{位置：絶対;マージン左：-1.3em;}
</スタイル>
<スクリプト>
$（関数（）{
$（ "#sortable」）.sortable（）;
$（ "#sortable」）.disableSelection（）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<ULのID = "ソート可能な">
<李クラス= "UI-状態-デフォルト"> <スパンクラス= "UI-アイコンUI-アイコン-arrowthick-2-NS"> </ span>の項目1 </ LI>
<李クラス= "UI-状態-デフォルト"> <スパンクラス= "UI-アイコンUI-アイコン-arrowthick-2-NS"> </ span>の項目2ます。</ li>
<李クラス= "UI-状態-デフォルト"> <スパンクラス= "UI-アイコンUI-アイコン-arrowthick-2-NS"> </ span>の項目3ます。</ li>
<李クラス= "UI-状態-デフォルト"> <スパンクラス= "UI-アイコンUI-アイコン-arrowthick-2-NS"> </ span>の項目4ます。</ li>
<李クラス= "UI-状態-デフォルト"> <スパンクラス= "UI-アイコンUI-アイコン-arrowthick-2-NS"> </ span>の項目5ます。</ li>
<李クラス= "UI-状態-デフォルト"> <スパンクラス= "UI-アイコンUI-アイコン-arrowthick-2-NS"> </ span>の項目6ます。</ li>
<李クラス= "UI-状態-デフォルト"> <スパンクラス= "UI-アイコンUI-アイコン-arrowthick-2-NS"> </ span>の項目7ます。</ li>
</ UL>
</ BODY>
</ HTML>
接続リスト
connectWith別にソートされたリスト内の要素を配置するセレクタオプション、およびその逆を渡します。 最も簡単な方法は、CSSクラスのすべての関連グループのリストであり、その後、ソート可能な機能（例えば、にクラスを渡しconnectWith: '.myclass' ）。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUI並べ替え（ソート可能） - 接続リスト</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
＃Sortable1、＃のsortable2 {リストスタイル型：なし;マージン：0;パディング：0 0 2.5em;フロート：左;マージン右：10pxの;}
＃Sortable1李、＃のsortable2李{マージン：0 5pxの5pxの5pxの;パディング：5pxの;フォントサイズ：1.2em;幅：120ピクセル;}
</スタイル>
<スクリプト>
$（関数（）{
$（ "＃Sortable1、＃のsortable2」）.sortable（{
connectWith：「.connectedSortable "
。}）DisableSelection（）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<ULのID = "sortable1"クラス= "connectedSortable">
<李クラス= "UI-状態-デフォルト">項目1 </ LI>
<李クラス= "UI-状態-デフォルト">項目2ます。</ li>
<李クラス= "UI-状態-デフォルト">項目3ます。</ li>
<李クラス= "UI-状態-デフォルト">項目4ます。</ li>
<李クラス= "UI-状態-デフォルト">項目5ます。</ li>
</ UL>
<ULのID = "sortable2"クラス= "connectedSortable">
<李クラス= "UI-状態-ハイライト">項目1 </ LI>
<李クラス= "UI-状態-ハイライト">項目2ます。</ li>
<李クラス= "UI-状態-ハイライト">項目3ます。</ li>
<李クラス= "UI-状態-ハイライト">項目4ます。</ li>
<李クラス= "UI-状態-ハイライト">項目5ます。</ li>
</ UL>
</ BODY>
</ HTML>
接続リスト]タブ
適切な別にソートされたリスト内の要素のリストを置くためのタブ、およびその逆に、リスト項目の先頭を配置することによって。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUI並べ替え（ソート可能） - タブの接続リスト</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
＃Sortable1李、＃のsortable2李{マージン：0 5pxの5pxの5pxの;パディング：5pxの;フォントサイズ：1.2em;幅：120ピクセル;}
</スタイル>
<スクリプト>
$（関数（）{
$（ "＃Sortable1、＃のsortable2」）.sortable（）disableSelection（）;
変数$タブ=の$（ "#tabs」）.tabs（）;
VAR $ tab_items = $（ "UL：最初の李"、$タブ）{（.droppable
受け入れ：「.connectedSortable李」を、
hoverClass：「UI-状態ホバー」、
ドロップ：機能（イベント、UIを）{
変数$アイテム= $（この）。
var $一覧= $（$ item.find（「A」）.ATTR（ "HREF"））
.find（ ".connectedSortable"）;
ui.draggable.hide（「遅い」、関数（）{
$ Tabs.tabs（ "オプション"、 "アクティブ"、$のtab_items.index（$アイテム））;
$（この）.appendTo（$リスト）.SHOW（「遅いです」）。
}）;
}
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "タブ">
<UL>
<李> <a href="#tabs-1">ヌンクtinciduntする</a>ます。</ li>
<李> <a href="#tabs-2"> Proin悲しみする</a>ます。</ li>
</ UL>
<DIVのID = "タブ-1">
<ULのID = "sortable1"クラス= "connectedSortable UIヘルパー・リセット」>
<李クラス= "UI-状態-デフォルト">項目1 </ LI>
<李クラス= "UI-状態-デフォルト">項目2ます。</ li>
<李クラス= "UI-状態-デフォルト">項目3ます。</ li>
<李クラス= "UI-状態-デフォルト">項目4ます。</ li>
<李クラス= "UI-状態-デフォルト">項目5ます。</ li>
</ UL>
</ DIV>
<DIVのID = "タブ-2">
<ULのID = "sortable2"クラス= "connectedSortable UIヘルパー・リセット」>
<李クラス= "UI-状態-ハイライト">項目1 </ LI>
<李クラス= "UI-状態-ハイライト">項目2ます。</ li>
<李クラス= "UI-状態-ハイライト">項目3ます。</ li>
<李クラス= "UI-状態-ハイライト">項目4ます。</ li>
<李クラス= "UI-状態-ハイライト">項目5ます。</ li>
</ UL>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
遅延スタート
時間遅延及び偶発的ソートを防止する距離だけ遅延。 delayをミリ秒単位オプションは、ソートのドラッグを開始する前に設定する必要があります。 distanceピクセルオプションは、ソートのドラッグを開始する前に設定する必要があります。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUI並べ替え（ソート可能） - 遅延スタート</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
＃Sortable1、＃のsortable2 {リストスタイル型：なし;マージン：0;パディング：0;マージン底：15ピクセル;ズーム：1;}
＃Sortable1李、＃のsortable2李{マージン：0 5pxの5pxの5pxの;パディング：5pxの;フォントサイズ：1.2em;幅：95％;}
</スタイル>
<スクリプト>
$（関数（）{
$（ "＃Sortable1」）.sortable（{
遅延：300
}）;
$（ "＃Sortable2」）.sortable（{
距離：15
}）;
$（ "李"）.disableSelection（）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<H3クラス= "ドキュメント">時間遅延が300ms：</ H3>
<ULのID = "sortable1">
<李クラス= "UI-状態-デフォルト">項目1 </ LI>
<李クラス= "UI-状態-デフォルト">項目2ます。</ li>
<李クラス= "UI-状態-デフォルト">項目3ます。</ li>
<李クラス= "UI-状態-デフォルト">項目4ます。</ li>
</ UL>
<H3クラス= "ドキュメント">距離遅延15ピクセル：</ H3>
<ULのID = "sortable2">
<李クラス= "UI-状態-デフォルト">項目1 </ LI>
<李クラス= "UI-状態-デフォルト">項目2ます。</ li>
<李クラス= "UI-状態-デフォルト">項目3ます。</ li>
<李クラス= "UI-状態-デフォルト">項目4ます。</ li>
</ UL>
</ BODY>
</ HTML>
これは、グリッドとして表示されます
彼らは同じ寸法と浮遊ディスプレイとCSSを使用するようにソート可能なエントリは、グリッドとして表示されてみましょう。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIは（ソート可能）ソート - グリッドを表示する</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#sortable {リストスタイル型：なし;マージン：0;パディング：0;幅：450px;}
#sortable李{：;：1pxは;フロート：マージン、パディング3px 3px 0 3px左;幅：100ピクセル;高さ：90PX;フォントサイズ：4em;テキスト整列：センター;}
</スタイル>
<スクリプト>
$（関数（）{
$（ "#sortable」）.sortable（）;
$（ "#sortable」）.disableSelection（）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<ULのID = "ソート可能な">
<李クラス= "UI-状態-デフォルト"> 1 </ LI>
<李クラス= "UI-状態-デフォルト"> 2 </ LI>
<李クラス= "UI-状態-デフォルト"> 3 </ LI>
<李クラス= "UI-状態-デフォルト"> 4 </ LI>
<李クラス= "UI-状態-デフォルト"> 5 </ LI>
<李クラス= "UI-状態-デフォルト"> 6 </ LI>
<李クラス= "UI-状態-デフォルト"> 7 </ LI>
<李クラス= "UI-状態-デフォルト"> 8 </ LI>
<李クラス= "UI-状態-デフォルト"> 9 </ LI>
<李クラス= "UI-状態-デフォルト"> 10 </ LI>
<李クラス= "UI-状態-デフォルト"> 11 </ LI>
<李クラス= "UI-状態-デフォルト"> 12 </ LI>
</ UL>
</ BODY>
</ HTML>
プレースホルダを配置
新しい場所にソート可能な項目をドラッグすると、他のエントリは、エントリのために場所を空けるます。 掲載placeholderブランクビジュアルスタイルのクラスを定義するには、転送オプションを選択します。 ブール値はforcePlaceholderSizeプレースホルダのサイズを設定するオプション。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUI並べ替え（ソート可能） - 配置されたプレースホルダ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
#sortable {リストスタイル型：なし;マージン：0;パディング：0;幅：60％;}
#sortable李{マージン：0 5pxの5pxの5pxの;パディング：5pxの;フォントサイズ：1.2em;高さ：1.5em;}
HTML>ボディ#sortable李{高さ：1.5em;行の高さ：1.2em;}
.ui-状態のハイライト{高さ：1.5em;行の高さ：1.2em;}
</スタイル>
<スクリプト>
$（関数（）{
.sortable $（ "#sortable」）（{
プレースホルダ：「UI-状態-ハイライト」
}）;
$（ "#sortable」）.disableSelection（）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<ULのID = "ソート可能な">
<李クラス= "UI-状態-デフォルト">項目1 </ LI>
<李クラス= "UI-状態-デフォルト">項目2ます。</ li>
<李クラス= "UI-状態-デフォルト">項目3ます。</ li>
<李クラス= "UI-状態-デフォルト">項目4ます。</ li>
<李クラス= "UI-状態-デフォルト">項目5ます。</ li>
<李クラス= "UI-状態-デフォルト">項目6ます。</ li>
<李クラス= "UI-状態-デフォルト">項目7ます。</ li>
</ UL>
</ BODY>
</ HTML>
空のリストを処理
によって オプションが設定されているfalse別々の空のリストに配置されたエントリのすべてのリストを防ぐために、。 デフォルトでは、ソート可能なエントリが空のリストに入れることができます。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUI並べ替え（ソート可能） - 空のリストを処理する</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
＃Sortable1、＃のsortable2、＃のsortable3 {リストスタイル型：なし;マージン：0;パディング：0;フロート：左;マージン右を：10pxの;背景：#eee;パディング：5pxの;幅：143px;}
＃Sortable1李、＃のsortable2李、＃のsortable3李{マージン：5pxの;パディング：5pxの;フォントサイズ：1.2em;幅：120ピクセル;}
</スタイル>
<スクリプト>
$（関数（）{
.sortable $（ "Ul.droptrue」）（{
connectWith： "UL"
}）;
.sortable $（ "Ul.dropfalse」）（{
connectWith：「UL」、
dropOnEmpty：偽
}）;
$（ "＃Sortable1、＃のsortable2、＃のsortable3」）.disableSelection（）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<ULのID = "sortable1"クラス= "droptrue">
<李クラス= "UI-状態-デフォルトは">配置することができます.. </ LI>
<李クラス= "UI-状態-デフォルト"> ..空のリストます。</ li>
<李クラス= "UI-状態-デフォルト">項目3ます。</ li>
<李クラス= "UI-状態-デフォルト">項目4ます。</ li>
<李クラス= "UI-状態-デフォルト">項目5ます。</ li>
</ UL>
<ULのID = "sortable2"クラス= "dropfalse">
<李クラス= "UI-状態のハイライトは">に配置することはできません.. </ LI>
<李クラス= "UI-状態-ハイライト"> ..空のリストます。</ li>
<李クラス= "UI-状態-ハイライト">項目3ます。</ li>
<李クラス= "UI-状態-ハイライト">項目4ます。</ li>
<李クラス= "UI-状態-ハイライト">項目5ます。</ li>
</ UL>
<ULのID = "sortable3"クラス= "droptrue">
</ UL>
<br style="clear:both">
</ BODY>
</ HTML>
エントリを包含/除外
で指定されたitemsアイテムを並べ替えることができますjQueryのセレクタのオプションを渡します。 このオプションは、プロジェクトを注文することができない外であるが、彼らは有効なターゲットソート可能エントリではありません。
あなたは、ソートされた特定のエントリを防ぐためにしたい場合はcancel jQueryのセレクタを渡すオプションを選択します。 キャンセルのエントリは、ターゲット他のエントリをソートする依然として有効です。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIの並べ替え（ソート可能）が - 含める/エントリを除外する</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
＃Sortable1、＃のsortable2 {リストスタイル型：なし;マージン：0;パディング：0;ズーム：1;}
＃Sortable1李、＃のsortable2李{マージン：0 5pxの5pxの5pxの;パディング：3px;幅：90％;}
</スタイル>
<スクリプト>
$（関数（）{
$（ "＃Sortable1」）.sortable（{
アイテム：「李：ない（.ui-状態-無効）」
}）;
$（ "＃Sortable2」）.sortable（{
キャンセル：「.ui-状態-無効」
}）;
$（ "＃Sortable1李、＃のsortable2李」）.disableSelection（）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<H3クラス= "ドキュメント">ソート可能である項目を指定：</ H3>
<ULのID = "sortable1">
<李クラス= "UI-状態-デフォルト">項目1 </ LI>
<李クラス= "UIステートのデフォルトUI状態-無効">（私はソート可能またはドロップターゲットではないよ）</ LI>
<李クラス= "UIステートのデフォルトUI状態-無効">（私はソート可能またはドロップターゲットではないよ）</ LI>
<李クラス= "UI-状態-デフォルト">項目4ます。</ li>
</ UL>
<H3クラスは= "ドキュメント">（ただし、ドロップターゲットとして）注文をキャンセル：</ H3>
<ULのID = "sortable2">
<李クラス= "UI-状態-デフォルト">項目1 </ LI>
<李クラス= "UIステートのデフォルトUI状態-無効">（私はソート可能ではないです）</ LI>
<李クラス= "UIステートのデフォルトUI状態-無効">（私はソート可能ではないです）</ LI>
<李クラス= "UI-状態-デフォルト">項目4ます。</ li>
</ UL>
</ BODY>
</ HTML>
ポータルコンポーネント（ポートレット）
ソート可能としてポータルコンポーネント（スタイル付きのdiv）を有効にして、使用connectWithソート列間の通信を可能にするオプションを選択します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIは（ソート可能）ソート - ポータルコンポーネント（ポートレット）</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
体{
分幅：520px;
}
.column {
幅：170px;
フロート：左;
パディング底：100ピクセル;
}
.portlet {
マージン：0 1EMの1EM 0;
パディング：0.3em;
}
.portletヘッダ{
パディング：0.2em 0.3em;
マージン底：0.5em;
位置：相対;
}
.portlet-トグル{
位置：絶対;
トップ：50％;
右：0;
マージントップ：-8px。
}
.portlet-コンテンツ{
パディング：0.4em;
}
.portlet-プレースホルダ{
国境：1pxの破線の黒。
マージン：0 1EMの1EM 0;
高さ：は50px;
}
</スタイル>
<スクリプト>
$（関数（）{
$（ ".column」）.sortable（{
connectWith：「.column」、
ハンドル：「.portletヘッダ」、
キャンセル：「.portlet-トグル」、
プレースホルダ：「ポートレット・プレースホルダーUI-コーナーすべて」
}）;
$（ ".portlet」）
.addClass（「UIウィジェットUIウィジェットコンテンツのUIヘルパー-clearfix UI-コーナー-すべて」）
.find（「.portlet-ヘッダー」）
.addClass（「UIウィジェットヘッダUI-コーナー-すべて」）
.prepend（ "<スパンクラス= 'UIアイコンUI-アイコンminusthickポートレットトグル'> </ span>の"）;
$（ ".portlet-トグル"）.click（関数（）{
VARアイコン= $（この）。
icon.toggleClass（「UI-アイコン-minusthick UI-アイコン-plusthick "）;
icon.closest（「.portlet」）.find（「.portlet-コンテンツ」）.toggle（）;
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIV CLASS = "列">
<DIVクラス= "ポートレット">
<DIVクラスは=「ポートレット・ヘッダー "> </ div>の購読
<DIVクラス= "ポートレット・コンテンツ」> Loremのイプサムの悲しみはconsectetuer adipiscing ELIT </ div>の、AMET座ります
</ DIV>
<DIVクラス= "ポートレット">
<DIVクラス= "ポートレット・ヘッダー">ニュース</ DIV>
<DIVクラス= "ポートレット・コンテンツ」> Loremのイプサムの悲しみはconsectetuer adipiscing ELIT </ div>の、AMET座ります
</ DIV>
</ DIV>
<DIV CLASS = "列">
<DIVクラス= "ポートレット">
<DIVクラス= "ポートレット・ヘッダー">カート</ DIV>
<DIVクラス= "ポートレット・コンテンツ」> Loremのイプサムの悲しみはconsectetuer adipiscing ELIT </ div>の、AMET座ります
</ DIV>
</ DIV>
<DIV CLASS = "列">
<DIVクラス= "ポートレット">
<DIV CLASS = "ポートレット・ヘッダー">リンク</ DIV>
<DIVクラス= "ポートレット・コンテンツ」> Loremのイプサムの悲しみはconsectetuer adipiscing ELIT </ div>の、AMET座ります
</ DIV>
<DIVクラス= "ポートレット">
<DIVクラス= "ポートレット・ヘッダー">画像</ DIV>
<DIVクラス= "ポートレット・コンテンツ」> Loremのイプサムの悲しみはconsectetuer adipiscing ELIT </ div>の、AMET座ります
</ DIV>
</ DIV>
</ BODY>
</ HTML>