P0.2.1 Web パーツの利用方法
Web パーツを使用する場合は、以下の確認を行って使用してください。
「使用機能」欄を確認してパーツ組み込み時に使用する機能を確認してください。
- JavaScript の使用有無を確認してください。JavaScript を使用する場合は、サンプルソースコードの SCRIPT 欄を参考に記述を行ってください。
- jQuery の使用有無を確認してください。jQuery を使用する場合は、jQuery 本体の読み込みを行うと同時に SCRIPT 欄を参考に処理の記述を行ってください。jQuery 本体の読み込みは、ダウンロードして自サイト内に配置する方法と CDN を使用する方法がありますが、どちらの方法でも大丈夫です。複数のパーツを組み込む場合に jQuery 本体の読み込みが重複しないように注意してください。
- 個別ライブラリィの使用有無を確認してください。個別ライブラリィを使用する場合は、個別ライブラリィ本体の読み込みを行うと同時に SCRIPT 欄を参考に処理の記述を行ってください。個別ライブラリィにはサンプルで提示した以外にも多くの機能を持っているものがありますので公式サイトや参考サイトなどを参照して使用方法を確認してください。
Web パーツを使用する場合は、ソースコード表示を行って「ファイル配置」を参考にしながら開発用のフォルダに必要ファイルを配置(コピー)後に「実装手順」を確認しながら以下の手順を参考にしてコードを記述してください。
パーツ利用方法
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>□□□□□のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!--
(1) 個別ライブラリィのCSSなど
・個別ライブラリィの固有CSSなどがある場合は、CSSファイルへのlinkタグなどが掲載されますのでコピーしてください。
-->
<!-- ▼▼▼ CSS(ここから)(※1) ▼▼▼ -->
<!-- 個別ライブラリィのlinkタグなど -->
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
.wrapper {
max-width: 760px;
margin: 0 auto;
}
/*
(2) パーツ装飾用のCSS
・パーツの装飾を行うCSSが掲載されます。
・このサンプルでは、HTMLファイル内にCSSの記述を行っていますが、一般的には外部CSSファイル(style.css など)にコピーしてください。
・複数のサンプルが掲載されている場合は、対象となるパーツのCSSをコピーしてください。
・HTML部分のid名やclass名が変更になった場合は、この部分のid名やclass名も変更してください。
*/
/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* □□□□□の設定 */
h1 {
padding: 10px;
margin-bottom: 20px;
font-size: 1.6em;
background: steelblue;
color: #fff;
text-align: center;
}
h2 {
font-size: 1.4em;
padding: 10px;
color: #333;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!--
(3) パーツ定義用のHTML
・パーツの定義を行うHTMLが掲載されます。
・複数のサンプルが掲載されている場合は、対象となるパーツのHTMLをコピーしてください。
・サンプルに指定されているid名やclass名を変更する場合は、CSSやSCRIPTとの関連性の整合をとるようにしてください。
-->
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
<!-- □□□□□の定義 -->
<div class="wrapper">
<h1>□□□□□のサンプル</h1>
<!-- □□□□□のサンプル-01(□□□□□) -->
<h2>□□□□□のサンプル-01(□□□□□)</h2>
</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>
<!--
(4) パーツ定義用のSCRIPT
・パーツの定義を行うSCRIPTが掲載されます。
・パーツ定義用のSCRIPTがない場合は、この部分は不要です。
・HTML部分のid名やclass名が変更になった場合は、この部分のid名やclass名も変更してください。
-->
<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- □□□□□の制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script>
/* JavaScriptやjQueryの処理 */
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->
</body>
</html>
(1) 個別ライブラリィの CSS など
- 個別ライブラリィの固有 CSS など(※1)がある場合は、CSS ファイルへの link タグなどが掲載されますのでコピーしてください。
(2) パーツ装飾用の CSS
- パーツの装飾を行う CSS(※2)が掲載されます。
- このサンプルでは、HTML ファイル内に CSS の記述を行っていますが、一般的には外部 CSS ファイル(style.css など)にコピーしてください。
- 複数のサンプルが掲載されている場合は、対象となるパーツの CSS をコピーしてください。
- HTML 部分の id 名や class 名が変更になった場合は、この部分の id 名や class 名も変更してください。
(3) パーツ定義用の HTML
- パーツの定義を行う HTML(※3)が掲載されます。
- 複数のサンプルが掲載されている場合は、対象となるパーツの HTML をコピーしてください。
- サンプルに指定されている id 名や class 名を変更する場合は、CSS や SCRIPT との関連性の整合をとるようにしてください。
(4) パーツ定義用の SCRIPT
- パーツの定義を行う SCRIPT(※4)が掲載されます。
- パーツ定義用の SCRIPT がない場合は、この部分は不要です。
- HTML 部分の id 名や class 名が変更になった場合は、この部分の id 名や class 名も変更してください。