こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、CSSでDrag And Dropのスタイリングを学びました。
demoは「こちら」で確認できます。
ワークスペース
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
JavaScript版
HTML & JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Drag N Drop</title> </head> <body> <div class="empty"> <div class="fill" draggable="true"></div> </div> <div class="empty"></div> <div class="empty"></div> <div class="empty"></div> <div class="empty"></div> <script src="script.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
// 要素を取得する const fill = document.querySelector('.fill') const empties = document.querySelectorAll('.empty') // Dragイベント function dragStart() { // cssで装飾するためクラスをつける this.className += ' hold' // ドラッグ元の画像が消えるように制御 setTimeout(() => this.className = ' invisible', 0) } function dragEnd() { // fillクラスをつける this.className = 'fill' } function dragOver(e) { // デフォルトの動作をキャンセル e.preventDefault() } function dragEnter(e) { // デフォルトの動作をキャンセル e.preventDefault() // hoveredクラスをつける this.className += ' hovered' } function dragLeave() { // emptyクラスをつける this.className = 'empty' } function dragDrop() { // emptyクラスをつける this.className = 'empty' // fill要素を追加 this.append(fill) } // イベントを登録 fill.addEventListener('dragstart', dragStart) fill.addEventListener('dragend', dragEnd) for (const empty of empties) { empty.addEventListener('dragover', dragOver) empty.addEventListener('dragenter', dragEnter) empty.addEventListener('dragleave', dragLeave) empty.addEventListener('drop', dragDrop) } |
現在は、何も表示されていません。
スタイリング
CSSでスタイリングしていきましょう。項目のbodyやemptyは、HTML要素です。
全体の設定
|
1 2 3 4 5 |
* { /* ボックスサイズを算出 paddingとborderをwidthとheightに含める */ box-sizing: border-box; } |
bodyの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
body { background-color: steelblue; /* flexアイテム */ display: flex; /* flex重点にアイテムを配置 */ align-items: center; /* flext横軸中央にアイテムを配置 */ justify-content: center; /* ビューポート100%の高さ */ height: 100vh; /* スクロールを削除 */ overflow: hidden; margin: 0; } |
emptyの設定
|
1 2 3 4 5 6 7 |
.empty { border: solid 3px black; background: white; margin: 10px; height: 150px; width: 150px; } |
fillの設定
|
1 2 3 4 5 6 |
.fill { background-image: url("https://source.unsplash.com/random/150x150"); height: 145px; width: 145px; cursor: pointer; } |
Drag And Dropの設定
ここは、スクショが撮れませんでした。実際に、Drag And Dropをして確認ください。
|
1 2 3 4 5 6 7 8 9 10 |
.hold { border: solid 5px #ccc; } .hovered { background-color: #333; border-color: white; /* ボーダーの枠線のスタイル */ border-style: dashed; } |
メディアクエリの設定
|
1 2 3 4 5 6 7 |
/* 800px以下の場合 */ @media (max-width: 800px) { body { /* flexアイテムを積み重ねるように配置 */ flex-direction: column; } } |
これで完成です。
おわりに
CSSのスタイリングはやはり面白いと思います。
画面開発も仕事の内なので、ここで学んだ知識をフル活用中です^^
もっとかっこいいWebページを作れるようになりたい。
それでは、また！
CSSまとめ
CSSソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
* { /* ボックスサイズを算出 paddingとborderをwidthとheightに含める */ box-sizing: border-box; } body { background-color: steelblue; /* flexアイテム */ display: flex; /* flex重点にアイテムを配置 */ align-items: center; /* flext横軸中央にアイテムを配置 */ justify-content: center; /* ビューポート100%の高さ */ height: 100vh; /* スクロールを削除 */ overflow: hidden; margin: 0; } .empty { border: solid 3px black; background: white; margin: 10px; height: 150px; width: 150px; } .fill { background-image: url("https://source.unsplash.com/random/150x150"); height: 145px; width: 145px; cursor: pointer; } .hold { border: solid 5px #ccc; } .hovered { background-color: #333; border-color: white; /* ボーダーの枠線のスタイル */ border-style: dashed; } /* 800px以下の場合 */ @media (max-width: 800px) { body { /* flexアイテムを積み重ねるように配置 */ flex-direction: column; } } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。