ビデオ: [Learn Dreamweaver CS6] 05 可変グリッドレイアウト 2024
ユーザーが画面要素の位置を変更して、見やすくしたり操作したりする必要が生じることがあります。 CSS3では、ユーザーが項目を移動できる環境を作成するには、コードの大量書き出しを行う必要はありません。実際、必要なのはdraggable（）という単一のメソッドだけです。
次のコードは、この例でドラッグ可能な段落を作成するためのメソッドを示しています。 （この例のコードは、ダウンロード可能なコードのChapter 06InteractionsフォルダのDragContent。HTMLで完全に見つかります）。
$（function（）{$（ "#MoveMe"）; draggable（）;}）;
このコードは、特定のページ機能で作業するのではなく、jQuery環境を拡張するjQueryの無名関数を実際に作成するため、興味深いものです。
この呼び出しの焦点は、MoveMeというIDを持つ段落（
タグ）です。そのメンバーにアクセスし、draggable（）を呼び出して移動させるだけです。ダウンロード可能な例を試してみると、段落をページ上の任意の場所に移動できます。
<！ - 2 - >可動ボックスを作成するには、この例はカスタムスタイルに依存しています。スタイルは境界線を作成し、テキストのための十分な余裕を持たせ、テキストを水平方向と垂直方向の両方にセンタリングします。この例で使用されるスタイルは次のとおりです。
#MoveMe {border：solid;幅：200px;高さ：5em; text-align：center; line-height：5em;}
多くの開発者は
タグ内でテキストを垂直にセンタリングする際に問題を経験します。このタスクを実行するには、いくつかの方法があります。ただし、プラットフォームとブラウザの一貫性のある方法でジョブを実行する最も簡単な方法の1つは、例に示すように線高さのスタイルを使用することです。
<！トリックは、高さと線の高さのスタイルを同じ値に設定することですが、テキストは常に中央に表示されます。
