★前回の記事
ピースの選択エリアを作成します。ドラッグアンドドロップでピースを選択できるようにします。 jQuery-UIのDraggableとDroppableを使用します。
使用するbootstrapのコンポーネントは以下のようにContainerとAlertとCardを使用します。
使うピースと使わないピースの配置
ピースを選択する画面を作成しましょう。まずはピースを置く枠を作成します。cardコンポーネントを使用します。
text-center
でテキストを中央寄せしています(参考: Text · Bootstrap)。
my-4
やmy-2
はマージンの設定です(参考:
Spacing · Bootstrap)。
index.html
<!-- 前略 --> <body> <nav class="navbar navbar-expand-md navbar-light shadow-sm mb-5"> <img class="navbar-brand" src="img/logo/Primary_logo_on_transparent_400x63.png" /> </nav> <!-- <h1>Hello, world!</h1> は削除 --> <!-- 追加ここから --> <div class="container"> <div class="alert alert-warning text-center my-4"> つかうピースを ドラッグアンドドロップで したのわくに いれてから スタートボタンをおしてね </div> <div id="unused-piece" class="card text-center my-2"> <div id="unused-piece-droppable" class="card-body"> </div> </div><!-- end of card for unused-piece --> <div id="used-piece" class="card text-center border-warning my-2"> <div id="used-piece-droppable" class="card-body"> </div> <div class="card-footer"> つかうピース </div> </div><!-- end of card for used-piece --> </div><!-- end of container --> <!-- 追加ここまで --> <!-- 後略 -->
ピースを配置していきます。ピース番号1, 2, ,9, 5, 10のピースは使うピースに配置しておきましょう。
各ピースには、draggable-piece
というクラス名を付与しています。これはドラッグ対象を指定するために使用されます。data-piece-id
の属性も付与します。これは、どのピースが選択されたかを判断するために使用されます。
index.html
<!-- 前略 --> <body> <nav class="navbar navbar-expand-md navbar-light shadow-sm mb-5"> <img class="navbar-brand" src="img/logo/Primary_logo_on_transparent_400x63.png" /> </nav> <div class="container"> <div id="unused-piece" class="card text-center my-2"> <div id="unused-piece-droppable" class="card-body"> <!-- 追加ここから --> <span id="piece_0" class="draggable-piece m-2 p-0" data-piece-id="0"> <img src="img/piece/piece_0_1.png" width="25px" /> </span> <span id="piece_3" class="draggable-piece m-2 p-0" data-piece-id="3"> <img src="img/piece/piece_3_5.png" width="50px" /> </span> <span id="piece_4" class="draggable-piece m-2 p-0" data-piece-id="4"> <img src="img/piece/piece_4_2.png" width="75px" /> </span> <span id="piece_6" class="draggable-piece m-2 p-0" data-piece-id="6"> <img src="img/piece/piece_6_1.png" width="50px" /> </span> <span id="piece_7" class="draggable-piece m-2 p-0" data-piece-id="7"> <img src="img/piece/piece_7_0.png" width="75px" /> </span> <span id="piece_8" class="draggable-piece m-2 p-0" data-piece-id="8"> <img src="img/piece/piece_8_0.png" width="75px" /> </span> <span id="piece_11" class="draggable-piece m-2 p-0" data-piece-id="11"> <img src="img/piece/piece_11_0.png" width="75px" /> </span> <!-- 追加ここまで --> </div> </div><!-- end of card for unused-piece --> <div id="used-piece" class="card text-center border-warning my-2"> <div id="used-piece-droppable" class="card-body"> <!-- 追加ここから --> <span id="piece_1" class="draggable-piece m-2 p-0" data-piece-id="1"> <img src="img/piece/piece_1_5.png" width="50px" /> </span> <span id="piece_2" class="draggable-piece m-2 p-0" data-piece-id="2"> <img src="img/piece/piece_2_5.png" width="50px" /> </span> <span id="piece_9" class="draggable-piece m-2 p-0" data-piece-id="9"> <img src="img/piece/piece_9_0.png" width="75px" /> </span> <span id="piece_5" class="draggable-piece m-2 p-0" data-piece-id="5"> <img src="img/piece/piece_5_3.png" width="50px" /> </span> <span id="piece_10" class="draggable-piece m-2 p-0" data-piece-id="10"> <img src="img/piece/piece_10_0.png" width="75px" /> </span> <!-- 追加ここまで --> </div> <div class="card-footer"> つかうピース </div> </div><!-- end of card for used-piece --> <!-- 後略 -->
使うピースの背景色を変更します。
css/main.css
#used-piece-droppable { background-color: #fff8e1; }
ここまでの実行結果
ここまでの実行結果です。 枠の中にピースが表示されました。
矢印の描画
上から下にピースを移動させるということがわかりやすいように、使用しないピースのcardから使用するピースのcardへ矢印を描きます。
【CSS】CSSのみで三角と矢印を作る方法 - bagelee(ベーグリー) のページを参考にし、CSSで矢印を描画します。
使わないピースと使うピースのcardの間に矢印を配置します。htmlに追記します。mx-auto
でページの中央に表示されるようにしています。
index.html
<!-- 前略 --> <body> <!-- 中略 --> </div> </div><!-- end of card for unused-piece --> <!-- 追加ここから --> <div class="arrow-down mx-auto"> </div> <!-- 追加ここまで --> <div id="used-piece" class="card text-center border-warning my-2"> <div id="used-piece-droppable" class="card-body"> <!-- 後略 -->
CSSのみで三角と矢印を作る方法ページの内容を参考に、以下の内容を追加します。
css/main.css
.arrow-down { width: 0; height: 0; border-left: 80px solid transparent; border-right: 80px solid transparent; border-top: 30px solid #ffc107; }
実行結果
実行結果です。使うピースと使わないピースの間に矢印が表示されました。
以上でピースの選択エリアの、見た目の部分が完成しました。
★次回の記事
★目次