HTML-CSS 入門講座

HTML-CSS 入門講座

WebParts-0
Web パーツ(WebParts)について

目次

P0.1 Web パーツ(WebParts)について

P0.1.1 Web パーツ(WebParts)の概要

  • Web パーツ(WebParts)は、Web サイト開発時に使用可能な Web パーツを部品としてサンプルを掲載しています。
  • Web パーツ(WebParts)の各章の概要は、以下の通りです。
(1) WebParts-1 スライダー

スライダーは、複数枚の画像を次々と切り替えて表示する機能です。クロスフェードで切り替わるものや上下や左右にスライドして切り替わるものや回転など複雑な動きをするものなど様々な表示形式があります。スライドショーとかカルーセルとも呼ばれます。

(2) WebParts-2 ライトボックス

ライトボックスは、サムネイル画像をクリックさせて拡大画像を表示させる機能です。ギャラリーとも呼ばれます。

(3) WebParts-3 ウィンドウ

ウィンドウは、表示されているページに被さるように表示される画面の機能です。

画面遷移
画面の切り替え時に画面に被さるように表示されるウィンドウです。画面遷移が完了するとメイン画面が表示されます。
プログレスバー
ページの読み込みや処理などの進捗を表すウィンドウです。画面遷移が完了するとメイン画面が表示されます。
モーダル
画面に被さるようにして表示されるウィンドウです。モーダルウィンドウ内で指定された操作を完了またはキャンセルするまで他のウィンドウを操作できません。
ポップアップ
画面に被さるようにして表示されるウィンドウです。ポップアップしていても他のウィンドウの操作をすることができます。
(4) WebParts-4 スクロール

スクロールは、ページのスクロールを即したりスクロール操作を容易に行えるようにする機能です。

ページトップ
ページのトップにスクロールするボタンです。
スクロールダウン
スクロール操作を即するガイダンスです。
スクロールバー
ページ内のスクロール位置を示すプログレスバーです。
スクロール効果
スクロール時に表示される項目の表示効果です。
ヘッダ固定
スクロール時に固定表示されるヘッダ形状です。
ページ内リンク
ページの途中へのリンク機能です。
(5) WebParts-5 メニュー

メニューは、Web サイトに格納されているコンテンツを表示するためのナビゲーション情報です。すべてのページに共通に設定されている主要ページへのリンク情報をグローバルナビゲーションと呼びます。

ハンバーガー
三本線で表示されるメニューです。三本線をクリックするとメニューが表示されます。
ドリルダウン
メニュー項目をクリックすると折りたたんであるサブメニューを表示する形状のメニューです。
ドロップダウン
メニュー項目にマウスオーバーすると直下にサブメニュー項目が表示される形状のメニューです。
タブ
タブをクリックするとコンテンツが切り替わる形状のメニューです。
パンくずリスト
表示しているページの位置を簡易的に表示したリンクリストです。
(6) WebParts-6 アコーディオン

アコーディオンは、コンテンツの折りたたみを行える機能です。見出し領域をクリックすることでコンテンツの開閉が行えます。

(7) WebParts-7 ページネーション

ページネーションは、ページ内のコンテンツを分割する機能です。コンテンツが多いページを分割することで表示速度の向上や読み易いページを実施します。

(8) WebParts-8 テキスト装飾

テキスト装飾は、テキストに対する各種の装飾です。

ナビゲーション
項目にマウスオーバーすると線や色などが変化します。
見出し
見出し項目の装飾です。
タイピング
テキストのタイプライター風表示です。
ボタン
ボタンの装飾です。
リスト
リスト形態の装飾です。
フローチャート
フローチャートの装飾です。
ニュースティッカー
お知らせなどのアニメーション表示です。
ツールチップ
マウスオーバー時に表示される補足説明などの枠です。
フォーム
入力フォームなどで使用するパーツです。
プログレスバー
進捗状況表示などで使用するパーツです。
(9) WebParts-9 シンタックスハイライト

シンタックスハイライトは、ソースコードを構文規則に従って色分けして表示する機能です。

(10) WebParts-10 背景

背景は、ページや部分領域の背景装飾です。

背景
ページや部分領域の背景です。
アニメーション
イラストなどをスライドやフェードさせます。
(11) WebParts-11 素材

素材は、あらかじめ用意されている素材です。

アイコン
アイコン(ピクトグラム)素材です。
フォント
フォント素材です。
(12) WebParts-12 その他

その他のパーツです。

時計
時計パーツです。
フォーム
各種の定型フォームです。

P0.2 Web Web パーツの利用方法

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 名も変更してください。

P0.3 Web パーツサンプル

WebParts-1
スライダー

P1.2 スライダー
P1.2.1 bxSlider-1

説明ページ リロード 別画面で表示

P1.2 スライダー
P1.2.2 bxSlider-2

説明ページ リロード 別画面で表示

P1.2 スライダー
P1.2.3 bxSlider-3

説明ページ リロード 別画面で表示

P1.2 スライダー
P1.2.4 slick-1

説明ページ リロード 別画面で表示

P1.2 スライダー
P1.2.5 slick-2

説明ページ リロード 別画面で表示

P1.2 スライダー
P1.2.6 slick-3

説明ページ リロード 別画面で表示

P1.2 スライダー
P1.2.7 slick-4

説明ページ リロード 別画面で表示

P1.2 スライダー
P1.2.8 crossfade-1

説明ページ リロード 別画面で表示

P1.2 スライダー
P1.2.9 swiper-1

説明ページ リロード 別画面で表示

P1.2 スライダー
P1.2.10 swiper-2

説明ページ リロード 別画面で表示

P1.2 スライダー
P1.2.11 swiper-3

説明ページ リロード 別画面で表示

P1.2 スライダー
P1.2.12 swiper-4

説明ページ リロード 別画面で表示

WebParts-2
ライトボックス

P2.2 ライトボックス
P2.2.1 Colorbox-1

説明ページ リロード 別画面で表示

P2.2 ライトボックス
P2.2.2 lightbox-1

説明ページ リロード 別画面で表示

WebParts-3
ウィンドウ

P3.2 画面遷移
P3.2.1 画面遷移-1

説明ページ リロード 別画面で表示

P3.2 画面遷移
P3.2.2 画面遷移-2

説明ページ リロード 別画面で表示

P3.2 画面遷移
P3.2.3 画面遷移-3

説明ページ リロード 別画面で表示

P3.3 ローディング
P2.3.1 ローディング-1

説明ページ リロード 別画面で表示

P3.3 ローディング
P3.3.2 ローディング-2

説明ページ リロード 別画面で表示

P3.4 モーダル
P3.4.1 Modaal-1

説明ページ リロード 別画面で表示

P3.4 モーダル
P3.4.2 Modaal-2

説明ページ リロード 別画面で表示

WebParts-4
スクロール

P4.2 ページトップ
P4.2.1 JavaScript-1

説明ページ リロード 別画面で表示

P4.2 ページトップ
P4.2.2 jQuery-1

説明ページ リロード 別画面で表示

P4.2 ページトップ
P4.2.3 jQuery-2

説明ページ リロード 別画面で表示

P4.2 ページトップ
P4.2.4 jQuery-3(歩く肉球)

説明ページ リロード 別画面で表示

P4.2 ページトップ
P4.2.5 jQuery-4(ロケット)

説明ページ リロード 別画面で表示

P4.3 スクロールダウン
P4.3.1 動く丸

説明ページ リロード 別画面で表示

P4.3 スクロールダウン
P4.3.2 動く矢印

説明ページ リロード 別画面で表示

P4.4 スクロールバー
P4.4.1 Scrollgress-1

説明ページ リロード 別画面で表示

P4.5 スクロール効果
P4.5.1 項目アニメーション表示

説明ページ リロード 別画面で表示

P4.6 ヘッダー固定
P4.6.1 ヘッダー固定

説明ページ リロード 別画面で表示

P4.7 ページ内リンク
P4.7.1 ページ内リンク

説明ページ リロード 別画面で表示

P4.7 ページ内リンク
P4.7.2 ヘッダー固定

説明ページ リロード 別画面で表示

WebParts-5
メニュー

P5.2 ハンバーガー
P5.2.1 ハンバーガー

説明ページ リロード 別画面で表示

P5.3 ドリルダウン
P5.3.1 ドリルダウン

説明ページ リロード 別画面で表示

P5.4 ドロップダウン
P4.4.1 ドロップダウン

説明ページ リロード 別画面で表示

P5.4 ドロップダウン
P5.4.2 ドリルダウン併用

説明ページ リロード 別画面で表示

P5.5 タブ
P5.5.1 タブ

説明ページ リロード 別画面で表示

P5.6 パンくずリスト
P5.6.1 パンくずリスト

説明ページ リロード 別画面で表示

WebParts-6
アコーディオン

P6.2 アコーディオン
P6.2.1 detailsタグ

説明ページ リロード 別画面で表示

P6.2 アコーディオン
P6.2.2 jQuery-1

説明ページ リロード 別画面で表示

P6.2 アコーディオン
P6.2.3 jQuery(1ヶ所表示)

説明ページ リロード 別画面で表示

WebParts-7
ページネーション

P7.2 ページネーション
P4.2.1 自動後続表示

説明ページ リロード 別画面で表示

P7.2 ページネーション
P7.2.2 確認後続表示

説明ページ リロード 別画面で表示

WebParts-8
テキスト装飾

P8.2 ナビゲーション
P8.2.1 下線

説明ページ リロード 別画面で表示

P8.2 ナビゲーション
P8.2.2 伸びる背景

説明ページ リロード 別画面で表示

P8.2 ナビゲーション
P8.2.3 上下の線

説明ページ リロード 別画面で表示

P8.2 ナビゲーション
P8.2.4 四方を囲む

説明ページ リロード 別画面で表示

P8.3 見出し
P8.3.1 見出し

説明ページ リロード 別画面で表示

P8.3 見出し
P8.3.2 フレーム

説明ページ リロード 別画面で表示

P8.3 見出し
P8.3.3 リボン

説明ページ リロード 別画面で表示

P8.4 タイピング
P8.4.1 iTyped-1

説明ページ リロード 別画面で表示

P8.4 タイピング
P8.4.2 iTyped-2

説明ページ リロード 別画面で表示

P8.4 タイピング
P8.4.3 t.js

説明ページ リロード 別画面で表示

P8.5 ボタン
P8.5.1 波打つ

説明ページ リロード 別画面で表示

P8.5 ボタン
P8.5.2 背景が左右に別かれる

説明ページ リロード 別画面で表示

P8.5 ボタン
P8.5.3 拡大アニメーション

説明ページ リロード 別画面で表示

P8.6 リスト
P8.6.1 フォルダ/ファイル表示

説明ページ リロード 別画面で表示

P8.6 リスト
P8.6.2 カウントアップテキスト-1

説明ページ リロード 別画面で表示

P8.6 リスト
P8.6.3 カウントアップテキスト-2

説明ページ リロード 別画面で表示

P8.6 リスト
P8.6.4 リストテキスト-1

説明ページ リロード 別画面で表示

P8.7 フローチャート
P8.7.1 横方向チャート

説明ページ リロード 別画面で表示

P8.7 フローチャート
P8.7.2 縦方向チャート-1

説明ページ リロード 別画面で表示

P8.7 フローチャート
P8.7.3 縦方向チャート-2

説明ページ リロード 別画面で表示

P8.7 フローチャート
P8.7.4 縦方向チャート-3

説明ページ リロード 別画面で表示

P8.8 ニュースティッカー
P8.8.1 simpleTicker.js

説明ページ リロード 別画面で表示

P8.9 ツールチップ
P8.9.1 ツールチップ-1

説明ページ リロード 別画面で表示

P8.9 ツールチップ
P8.9.2 ツールチップ-2

説明ページ リロード 別画面で表示

P8.9 ツールチップ
P8.9.3 Tippy.js-1

説明ページ リロード 別画面で表示

P8.10 フォーム
P8.10.1 checkbox-1

説明ページ リロード 別画面で表示

P8.10 フォーム
P8.10.2 radio-1

説明ページ リロード 別画面で表示

P8.11 プログレスバー
P8.11.1 プログレスバー-1

説明ページ リロード 別画面で表示

WebParts-9
シンタックスハイライト

P9.2 シンタックスハイライト
P9.2.1 highlight(基本形)

説明ページ リロード 別画面で表示

P9.2 シンタックスハイライト
P9.2.2 highlight(種別付)

説明ページ リロード 別画面で表示

P9.2 シンタックスハイライト
P9.2.3 highlight(折り込み)

説明ページ リロード 別画面で表示

P9.2 シンタックスハイライト
P9.2.4 Prism(基本形)

説明ページ リロード 別画面で表示

P9.2 シンタックスハイライト
P9.2.5 Prism(種別付)

説明ページ リロード 別画面で表示

P9.2 シンタックスハイライト
P9.2.6 Prism(折り込み)

説明ページ リロード 別画面で表示

P9.2 シンタックスハイライト
P9.2.7 Prism(色変更)

説明ページ リロード 別画面で表示

WebParts-10
背景

P10.2 背景
P10.2.1 ノート風

説明ページ リロード 別画面で表示

P10.2 背景
P10.2.2 回る背景

説明ページ リロード 別画面で表示

P10.2 背景
P10.2.3 繰り返し背景

説明ページ リロード 別画面で表示

P10.3 アニメーション
P10.3.1 星空

説明ページ リロード 別画面で表示

P10.3 アニメーション
P10.3.2 海中散歩

説明ページ リロード 別画面で表示

WebParts-11
素材

P11.2 アイコン
P11.2.1 Font Awesome v5

説明ページ リロード 別画面で表示

P11.2 アイコン
P11.2.2 Font Awesome v6

説明ページ リロード 別画面で表示

P11.3 フォント
P11.3.1 Google Fonts

説明ページ リロード 別画面で表示

WebParts-12
その他

P12.2 時計
P12.2.1 アナログ時計-1

説明ページ リロード 別画面で表示

P12.2 時計
P12.2.2 アナログ時計-2

説明ページ リロード 別画面で表示

P12.2 時計
P12.2.3 アナログ時計-3

説明ページ リロード 別画面で表示

P12.2 時計
P12.2.4 アナログ時計-4

説明ページ リロード 別画面で表示

P12.2 時計
P12.2.5 デジタル時計-1

説明ページ リロード 別画面で表示

P12.2 時計
P12.2.6 デジタル時計-2

説明ページ リロード 別画面で表示

P12.2 時計
P12.2.7 デジタル時計-3

説明ページ リロード 別画面で表示

P12.3 フォーム
P12.3.1 お問合せフォーム-1

説明ページ リロード 別画面で表示

P12.3 フォーム
P12.3.2 絞り込み検索フォーム-1

説明ページ リロード 別画面で表示

P12.3 フォーム
P12.3.3 絞り込み検索フォーム-2

説明ページ リロード 別画面で表示

P0.4 Web パーツ(WebParts)の記載内容

P0.4.1 Web パーツ(WebParts)の記載内容

ロケット本体
PAGE
TOP
ロケット炎