Vueで複数の添付ファイルをアップロードする実装例
序文この記事では主に、Vue プロジェクトでの添付ファイルアップロード機能の実装を記録します。これにより、単一/複数の添付ファイルのアップロードを実現し、ファイル形式を識別して異なるアイコンで機能を表示し、編集できるかどうかを制御できます。内容は簡潔で分かりやすいので、必要なときにすぐに取り出すことができます。 完全なコードについてはここをクリックしてください コアコード
<div class="アップロード-flie-btn">
<div class="btn-tips" @click="openFileSelect" v-show="editFlag">添付ファイルをアップロード</div>
<入力
スタイル="表示: なし"
タイプ="ファイル"
ref="ファイル入力"
multiple="複数"
@change="アップロードファイル"
/>
</div>
オープンファイル選択() {
// dispatchEvent は指定されたイベント ターゲットにイベントをディスパッチします。this.$refs.fileInput.dispatchEvent(new MouseEvent('click'));
}
// 複数の添付ファイルをアップロードする async uploadFile() {
_this = this とします。
this.loading = true;
// アップロードされたファイルを取得します。アップロードされるファイルの数を制限したい場合は、 // let files = [...this.$refs.fileInput.files].splice(0,limit); とすることができます。
// ここで、ファイル数が制限を超えたことを示すプロンプトを表示することもできます。let files = [...this.$refs.fileInput.files];
if (!ファイル || !ファイルの長さ) {
戻る;
}
// バックエンドインターフェースアドレス let url = `url`;
// バックエンドインターフェースをまとめてリクエストする Promise.all(
files.slice(0, files.length).map((ファイル) => {
定数データ = 新しい FormData();
data.append('ファイル', ファイル);
request.post(url, data, { を返します。
ヘッダー: {
'コンテンツタイプ': 'multipart/form-data',
},
});
}）私
).then((res) => {
_this.loading = false;
_this.$refs.fileInput.value = null;
})
.catch((エラー) => {
コンソールログ(エラー);
});
}
ファイルはコードの一部を示していますこの部分では、Word、Excel、PPT、PDF、画像、および txt 形式のファイルの表示を処理する vux コンポーネント ライブラリを使用します。その他の種類のファイルは「その他」として表示されます。また、iconfont にあるベクター グラフィックを自分で変更することもできます。トラバースされたデータ フィールドは、独自のデータ形式に応じて変更できます。
<スワイプアウト v-if="files.length">
<template v-for="(item,index) ファイル内">
<スワイプアウトアイテム v-bind:key="item.fileUrl" :disabled="!editFlag">
<div スロット="右メニュー">
<swipeout-button @click.native="deleteItem(item.fileUrl, index)" type="warn">削除</swipeout-button>
</div>
<div スロット="コンテンツ" クラス="デモコンテンツ vux-1px-t">
<div class="ファイルアイテム">
<a :href="item.url" rel="external nofollow" :download="item.fileName" class="file-look">
<!-- 単語 -->
<div
v-if="item.fileName.indexOf('.doc') > 0 || item.fileName.indexOf('.docx') > 0"
クラス="ファイルアイコン"
>
<svg
1601351611486 より
クラス="アイコン"
ビューボックス="0 0 1024 1024"
バージョン="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1737"
幅="200"
高さ="200"
>
<パス
d="M1024 298.666667V85.333333c0-25.6-17.066667-42.666667-42.666667-42.666666H298.666667c-25.6 0-42.666667 17.066667-42.666667 42.666666v213.333334l384 85.333333 384-85.333333z"
塗りつぶし="#41A5EE"
p-id="1738"
/>
<パス
d="M1024 298.666667H256v213.333333l405.333333 85.333333 362.666667-85.333333z"
塗りつぶし="#2B7CD3"
p-id="1739"
/>
<path d="M1024 512H256v213.333333l384 64 384-64z" fill="#185ABD" p-id="1740" />
<パス
d="M1024 725.333333H256v213.333334c0 25.6 17.066667 42.666667 42.666667 42.666666h682.666666c25.6 0 42.666667-17.066667 42.666667-42.666666v-213.333334z"
塗りつぶし="#103F91"
p-id="1741"
/>
<パス
d="M588.8 256H256v597.333333h324.266667c29.866667 0 59.733333-29.866667 59.733333-59.733333V307.2c0-29.866667-21.333333-51.2-51.2-51.2z"
不透明度=".5"
p-id="1742"
/>
<パス
d="M546.133333 810.666667H51.2C21.333333 810.666667 0 789.333333 0 759.466667V264.533333C0 234.666667 21.333333 213.333333 51.2 213.333333h499.2c25.6 0 46.933333 21.333333 46.933333 51.2v499.2c0 25.6-21.333333 46.933333-51.2 46.933334z"
塗りつぶし="#185ABD"
p-id="1743"
/>
<パス
d="M435.2 682.666667H371.2L298.666667 448 226.133333 682.666667H162.133333L93.866667 341.333333h59.733333l46.933333 238.933334 72.533334-230.4h51.2l68.266666 230.4L443.733333 341.333333h59.733334l-68.266667 341.333334z"
塗りつぶし="#FFFFFF"
p-id="1744"
/>
</svg>
</div>
<!-- エクセル -->
<div
v-else-if="item.fileName.indexOf('.xls') > 0 || item.fileName.indexOf('.xlsx') > 0"
クラス="ファイルアイコン"
>
<svg
1602124050240 より
クラス="アイコン"
ビューボックス="0 0 1024 1024"
バージョン= "1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1102"
幅="200"
高さ="200"
>
<パス
d="M682.666667 42.666667H298.666667c-25.6 0-42.666667 17.066667-42.666667 42.666666v213.333334l426.666667 213.333333 170.666666 64 170.666667-64V298.666667l-341.333333-256z"
塗りつぶし="#21A366"
p-id="1103"
/>
<パス
d="M256 298.666667h426.666667v213.333333H256z"
塗りつぶし="#107C41"
p-id="1104"
/>
<パス
d="M1024 85.333333v213.333334h-341.333333V42.666667h298.666666c21.333333 0 42.666667 21.333333 42.666667 42.666666z"
塗りつぶし="#33C481"
p-id="1105"
/>
<パス
d="M682.666667 512H256v426.666667c0 25.6 17.066667 42.666667 42.666667 42.666666h682.666666c25.6 0 42.666667-17.066667 42.666667-42.666666v-213.333334l-341.333333-213.333333z"
塗りつぶし="#185C37"
p-id="1106"
/>
<パス
d="M588.8 256H256v597.333333h324.266667c29.866667 0 59.733333-29.866667 59.733333-59.733333V307.2c0-29.866667-21.333333-51.2-51.2-51.2z"
不透明度=".5"
p-id="1107"
/>
<パス
d="M546.133333 810.666667H51.2C21.333333 810.666667 0 789.333333 0 759.466667V264.533333C0 234.666667 21.333333 213.333333 51.2 213.333333h499.2c25.6 0 46.933333 21.333333 46.933333 51.2v499.2c0 25.6-21.333333 46.933333-51.2 46.933334z"
塗りつぶし="#107C41"
p-id="1108"
/>
<パス
d="M145.066667 682.666667L256 512 153.6 341.333333h81.066667l55.466666 106.666667c8.533333 12.8 8.533333 21.333333 12.8 25.6l12.8-25.6L375.466667 341.333333h76.8l-102.4 170.666667 106.666666 170.666667h-85.333333l-64-119.466667c0-4.266667-4.266667-8.533333-8.533333-17.066667 0 4.266667-4.266667 8.533333-8.533334 17.066667L226.133333 682.666667H145.066667z"
塗りつぶし="#FFFFFF"
p-id="1109"
/>
<パス
d="M682.666667 512h341.333333v213.333333h-341.333333z"
塗りつぶし="#107C41"
p-id="1110"
/>
</svg>
</div>
<!-- ppt -->
<div
v-else-if="item.fileName.indexOf('.ppt') > 0 || item.fileName.indexOf('.pptx') > 0"
クラス="ファイルアイコン"
>
<svg
1602124175604 より
クラス="アイコン"
ビューボックス="0 0 1024 1024"
バージョン= "1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1258"
幅="200"
高さ="200"
>
<パス
d="M968.704 135.168h-430.08v752.64h430.08c15.36 0 26.624-12.288 26.624-26.624V162.816c0-15.36-11.264-27.648-26.624-27.648z"
塗りつぶし="#FF8A65"
p-id="1259"
/>
<パス
d="M512 646.144h376.832v53.248H512z m0 107.52h376.832v54.272H512z m161.792-483.328c-89.088 0-161.792 72.704-161.792 161.792C512 521.216 584.704 593.92 673.792 593.92s161.792-72.704 161.792-161.792H673.792V270.336z"
塗りつぶし="#FBE9E7"
p-id="1260"
/>
<パス
d="M727.04 216.064v161.792h161.792c0-89.088-72.704-161.792-161.792-161.792z"
塗りつぶし="#FBE9E7"
p-id="1261"
/>
<パス
d="M592.896 996.352L28.672 888.832V135.168L592.896 27.648z"
塗りつぶし="#E64A19"
p-id="1262"
/>
<パス
D = "M319.488 327.68H192.512V368.64H78.848V569.344H40.96C44.032 0 78.848-11.264 104.448-34.816 25.6-22.528 366.592 409.6 327.68 319.488 327.68Z M-14.336 178.176H-33.792V391.168H33.792C43.008 0 64.512 18.432 64.512 56.32 0
塗りつぶし="#FFFFFF"
p-id="1263"
/>
</svg>
</div>
<!-- pdf -->
<div v-else-if="item.fileName.indexOf('.pdf') > 0" class="ファイルアイコン">
<svg
1602124241991 より
クラス="アイコン"
ビューボックス="0 0 1024 1024"
バージョン="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1536"
幅="200"
高さ="200"
>
<パス
D = "M877.874285 926.464244A48.742278 48.742278 0 1-48.793478 48.793478H146.432914A48.742278 48.74278 0 4838A48.742278 48.742278 0 0 1 146.432914 0.00256H418.814953A48.742278 48.742278 233564 21.657546 14.182364 34.611114v613.886465z "
塗りつぶし="#EBECF0"
p-id="1537"
/>
<パス
D = "M877.874285 926.464244V48.793478A48.742278 48.742278 0 0 1-48.793478 2278V-48.793478A48.742278 48.742278 0 0 0 48.793478 48.793478H682.647893A48.742278 48.742278 0 0
塗りつぶし="#C1C7D0"
p-id="1538"
/>
<パス
d="M0.15488 536.372419H975.358842v243.813791a48.742278 48.742278 0 0 1-48.742279 48.742278H48.897158a48.742278 48.742278 0 0 1-48.742278-48.742278v-243.813791z"
塗りつぶし="#FF5630"
p-id="1539"
/>
<パス
d="M97.639436 536.372419V438.836663L0.15488 536.372419h97.484556z m780.234849 0l0.972798-97.535756 97.023757 97.535756h-97.996555z"
塗りつぶし="#DE350B"
p-id="1540"
/>
<パス
d="M243.96867 585.165897h84.838188c15.513561-0.767998 30.668723 4.863988 41.932695 15.564761 10.803173 10.854373 16.639958 25.702336 16.07676 40.959898 0.511999 15.308762-5.324787 30.105525-16.07676 40.959897-11.673571 11.059172-27.340732 16.895958-43.417491 16.12796h-48.742278v76.543809h-34.611114v-190.156325z m32.665518 81.919795h43.878291a42.444694 42.444694 0 0 0 25.855935-6.348784 23.91034 23.91034 0 0 0 7.782381-19.96795c0-16.639958-10.905573-24.883138-32.665519-24.883138h-44.851088v51.199872z m134.092465-79.001402h77.004608c22.374344-0.972798 43.92949 8.396779 58.521453 25.343936 15.462361 19.302352 23.244742 43.571091 21.964745 68.24943 1.023997 24.934338-6.297584 49.510276-20.991947 69.734225a71.679821 71.679821 0 0 1-59.494251 28.774329H410.726653v-192.10192z m32.665519 158.924402h44.339089a43.417491 43.417491 0 0 0 36.095909-17.049557c9.420776-13.875165 13.823965-30.566324 12.697569-47.308682a70.707023 70.707023 0 0 0-13.670366-48.742278 48.742278 48.742278 0 0 0-37.529506-16.588758h-41.983895v129.689275z m288.152879-128.204479h-100.914948v45.311887h100.914948v31.231922h-100.914948v81.919795h-32.665518v-190.156325h133.631666v31.692721z"
塗りつぶし="#FFFFFF"
p-id="1541"
/>
<パス
d="M877.874285 312.577779v6.809583h-263.83294a48.742278 48.742278 0 0 1-48.742278-48.742279V0.00256a48.742278 48.742278 0 0 1 34.611113 14.131165l264.293739 263.83294c8.959978 9.215977 13.823965 21.708746 13.670366 34.611114z"
塗りつぶし="#C1C7D0"
p-id="1542"
/>
</svg>
</div>
<!-- 画像 -->
<div
v-else-if="item.fileName.indexOf('.jpg') > 0 || item.fileName.indexOf('.jpeg') > 0 || item.fileName.indexOf('.png') > 0"
クラス="ファイルアイコン"
>
<svg
1602124262555 より
クラス="アイコン"
ビューボックス="0 0 1024 1024"
バージョン="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1680"
幅="200"
高さ="200"
>
<パス
D = "M901.565663 926.72A48.617739 48.617739 0 0 1-48.61774 48.662261H170.429663A48.61739 48.6173990 8.617739 48.617739 0 0 1 170.429663 0H418.860521A49.641739 49.641739 0 0 1 34.816 14.336L263.479653 263.7022261A48.973991348.971348.971348.9791348.9391348.9313 -0.534261 613.910261z "
塗りつぶし="#EBECF0"
p-id="1681"
/>
<パス
d="M901.565663 926.72v48.617739a48.617739 48.617739 0 0 1-48.61774 48.617739H170.429663a48.617739 48.617739 0 0 1-48.61774-48.617739v-48.617739a48.617739 48.617739 0 0 0 48.61774 48.617739h682.51826a48.617739 48.617739 0 0 0 48.61774-48.617739z"
塗りつぶし="#C1C7D0"
p-id="1682"
/>
<パス
d="M24.042184 536.576h975.382261v243.712a48.617739 48.617739 0 0 1-48.662261 48.662261H72.659923A48.617739 48.617739 0 0 1 24.042184 780.288v-243.712z"
塗りつぶし="#3EB7FC"
p-id="1683"
/>
<パス
d="M121.856445 536.576V439.296L24.576445 536.576z m779.798261 0l1.024-97.28 97.28 97.28z"
塗りつぶし="#2F9CCC"
p-id="1684"
/>
<パス
d="M905.216445 312.32v6.633739h-264.192a48.617739 48.617739 0 0 1-48.662261-48.617739V0a49.641739 49.641739 0 0 1 34.816 14.336l263.479653 263.702261a48.484174 48.484174 0 0 1 14.336 34.326261z"
塗りつぶし="#C1C7D0"
p-id="1685"
/>
<パス
D = "M354.259923 700.905739A87.930435 87.930435 0 0 1-17.808695 2V-38.912A38.466783 38.466783 0 0 0 24.576 8.192C19.990261 0 29.696-14.870261 29.696-45.056V-116.201739H41.494261Z "
塗りつぶし="#FFFFFF"
p-id="1686"
/>
<パス
d="M438.806706 709.097739v67.584h-41.494261v-193.536h66.56q72.214261 0 72.214261 61.44a57.388522 57.388522 0 0 1-22.038261 47.638261 80.940522 80.940522 0 0 1-54.761739 17.408h-20.48z m0-93.495652v62.330435h17.808696c24.041739 0 36.329739-10.774261 36.329739-31.744s-11.798261-30.72-35.84-30.72z"
塗りつぶし="#FFFFFF"
p-id="1687"
/>
<パス
D = "M723.968445 763.859478A138.729739 138.729739 0 1-69.632 16.384 100.886261 100.886261 98.704696 98.704696 0 0 1 29.206261-74.21774 106.852174 106.852174 0 1 77.289739-28.672 158.764522 158.764522220 107.163826 0 0 0-54.761739-13.356522 60.549565 60.549565 0 0-45.545739 18.432 66.248348 66.248348 0 0-17.408 47.59374 55.162435 55.162435 0 0 0 43.008 16.91826 58.813217 58.813217 0 0 0 26.713044-5.12V-40.158608H-38.912V-33.30261HH-339611796117961796179617961796
塗りつぶし="#FFFFFF"
p-id="1688"
/>
</svg>
</div>
<!-- txt -->
<div v-else-if="item.fileName.indexOf('.txt') > 0" class="ファイルアイコン">
<svg
1602124341675 より
クラス="アイコン"
ビューボックス="0 0 1024 1024"
バージョン="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="4641"
幅= "200"
高さ="200"
>
<パス
d="M901.632 926.72c0 27.136-22.016 48.64-48.64 48.64H170.496c-27.136 0-48.64-22.016-48.64-48.64V48.64C121.856 22.016 143.36 0 170.496 0h418.816c12.8 0 25.6 5.12 34.816 14.336l263.68 263.68c9.216 9.216 14.336 21.504 14.336 34.816l-0.512 613.888z"
塗りつぶし="#EBECF0"
p-id="4642"
/>
<パス
d="M901.632 926.72v48.64c0 27.136-22.016 48.64-48.64 48.64H170.496c-27.136 0-48.64-22.016-48.64-48.64V926.72c0 27.136 22.016 48.64 48.64 48.64h682.496c27.136 0 48.64-22.016 48.64-48.64z"
塗りつぶし="#C1C7D0"
p-id="4643"
/>
<パス
d="M24.064 536.576h975.36v243.712c0 27.136-22.016 48.64-48.64 48.64H72.704c-27.136 0-48.64-22.016-48.64-48.64v-243.712z"
塗りつぶし="#0A84E8"
p-id="4644"
/>
<パス
d="M121.856 536.576v-97.28l-97.28 97.28h97.28z m779.776 0l1.024-97.28 97.28 97.28h-98.304z"
塗りつぶし="#005584"
p-id="4645"
/>
<パス
d="M901.632 312.32v6.656h-263.68c-27.136 0-48.64-22.016-48.64-48.64V0c12.8 0 25.6 5.12 34.816 14.336l264.192 263.68c8.704 9.216 13.824 21.504 13.312 34.304z"
塗りつぶし="#C1C7D0"
p-id="4646"
/>
<パス
d = "M389.12 589.312V27.648H324.608V16984H291.84V-16984H227.328V-27.648H389.12ZM466.432 589.312L46.592 69.6392-46.592-692-6992-69.592-69.592-69.592-69.592-69.592-69.592-69.592 6 95.232 71.168 101.888H-39.424L-50.688-76.288-50.688 76.288H-39.424L70.656-101.888-66.048-95.232H38.4ZM798.20827.2088.208.208.27.27.27.27.27. 984H701.44V-169.984H-64.512V-27.648H161.28Z ""
塗りつぶし="#FFFFFF"
p-id="4647"
/>
</svg>
</div>
<!-- その他 -->
<div v-else class="ファイルアイコン">
<svg
1602124370240 より
クラス="アイコン"
ビューボックス="0 0 1024 1024"
バージョン= "1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="6067"
幅="200"
高さ="200"
>
<パス
d="M688.6 2H120.8c-17.1 0-27.9 12.9-27.9 35.7V1001c0 6.2 14 19.6 27.9 19.6h782.4c17.1 0 27.9-12.9 27.9-19.6V238.3c0-12.9-3.6-16-3.6-19.7L698.9 8.7c0-6.7-3.6-6.7-10.3-6.7z m0 0"
塗りつぶし="#E7EFF8"
p-id="6068"
/>
<パス
d="M93 1010.2c0 5.7 4.7 10.3 10.3 10.3h817.3c5.7 0 10.3-4.7 10.3-10.3V819.6H93v190.6z"
塗りつぶし="#9FA0A3"
p-id="6069"
/>
<パス
D = "M340.8 915.4C0-10.1 3.5-18.5 10.5-25.3 7-6.8 15.8-10.1 26.2-10.1 10.4 0 19.2 3.3 26.5 10 7.2 6.7 10.8 6-10.10.5-15.3-10.5-25.5Z M128.5 0C0-10.2 3.5-18.7 10.5-25.4 7-6.7 15.8-10 26.2-10 10.4 0 19.2 3.4 26.4 10.1 7.2 6.8 10.7 15.2 10.7 25.3 3 0-18.9-3.4-26-10.1S-10.5-15.3-10.5-25.5Z M128.1 0C0-10.4 3.5-18.8 10.5-25.5S15.8-9.9 26.4-9.9C10.7 0 19.6 3.4 26.7 10.1 7.1 6.8 10.6 .8-27 9.8-10.3 0-18.9-3.5-26-10.4S-10.5-15.3-10.5-25z "
塗りつぶし="#FFFFFF"
p-id="6070"
/>
<パス
D = "M533.7 484.6H-66.8V-23.8C0-18 3.3-33.4 9.9-46.2 6.6-12.7 17.6-25.5 33.1-38.3 17.9-14.7 .4-21.3-11.1-37.7-11.1-31.7 0-61.2 11.8-88.6 35.4V-77.9C30.2-16.9 62.5-25.3 96.9-25.3 53.6-8.8 16.4-23.9 33.2-45.3 50.6-18.1 14.3-29.6 25.6-34.5 33.8-5 8.2-7.5 18-7.5 29.5V17.4Z M-33.2 36.9C12.8 0 23.8 4.1 32.9 9.6S513.3 606 500.5 606C-13 0-24-4.2-32.9-12.5-8.9-8.3-13.4-18.2-13.4-29.5 0-11.6 4.5-21.6 13.4-30 9-8.3 20-12.5 32.9-12.5z "
塗りつぶし="#9FA0A3"
p-id="6071"
/>
</svg>
</div>
<div class="ファイル名">{{item.fileName}}</div>
</a>
</div>
</div>
</スワイプアウトアイテム>
</テンプレート>
</スワイプアウト>
上記は、Vue での複数添付ファイルアップロードの実装例の詳細内容です。Vue の複数添付ファイルアップロードの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Dockerのデフォルトネットワークセグメントの正しい変更手順
推薦する
Linux でパスワードを入力せずに sudo コマンドを実行する方法
sudo コマンドを使用すると、信頼できるユーザーは別のユーザー (デフォルトでは root ユーザ...
Mysql を 5.7 にアップグレードした後のグループ クエリの問題を解決する
問題を見つける最近MySQLをMySQL 5.7にアップグレードした後、次のようなクエリでグループ化...
Taobao の商品画像切り替え効果を実現する JavaScript
JavaScriptの服装アルバム切り替え効果（Taobao商品画像切り替えに似ています）、参考ま...
CSS トップに戻る コード例
最近のウェブサイトのほとんどはページが長く、4 画面または 5 画面の長さのものもあれば、2 画面ま...
iptables の再起動後に Docker の iptables ルールの完全なプロセスが失われる
原因と結果1. ansibleコマンドを使用してジャンプサーバー上のマシンBをテストすると、次のエラ...
VS2019 が mysql8.0 データベースに接続する方法 (画像とテキスト付き)
1. まず、VS2019とMySQLデータベースを準備します。どちらも公式サイトからダウンロードで...
Win10にnginxをインストールする方法
会社から、負荷を実装するためにnginxをベースにFordプロジェクトのWebServiceサーバー...
Docker 大規模プロジェクトのコンテナ化変革
仮想化とコンテナ化は、クラウドベースのプロジェクトでは避けられない 2 つの問題です。仮想化は純粋な...
HTML チュートリアル: よく使われる HTML タグのコレクション (5)
導入された HTML タグは、必ずしも XHTML 仕様に完全に準拠しているわけではありません。実際...
HTML ページの先頭に戻るいくつかの実装の概要
最近、ウェブサイトを開発する際にトップに戻るボタンを作成する必要がありますが、私は主にバックエンドの...
Vueはカウントダウン機能を実装する
この記事の例では、カウントダウン機能を実装するためのVueの具体的なコードを参考までに共有しています...
ウェブページのテキストデザインは、服を着た賢い女の子のようであるべきだ
<br />「この世に醜い女性はいない、あるのは怠惰な女性だけだ」これは女性の美のバイブ...
マインスイーパゲームを実装するための jQuery プラグイン (1)
この記事では、jQueryプラグインを使用したマインスイーパゲームの最初の記事の具体的なコードを参考...
Web ページのスクロール バーが右側に設定されているのはなぜですか?
私たちが毎日使っているブラウザや Word 文書のスクロール バーはなぜ右側にあるのでしょうか。多く...
ウェブページでコンテンツを引用するためによく使われるHTMLタグをマスターする
長い引用には blockquote を、短い引用には q を、参考文献には cite を使用します。...