実技 JavaScript（jQuery）実習①

前回の復習

じゃんけん

tools.hamaya2020.com

watashi = cnvRand[ Math.ceil(Math.random() * 3) ];
/*0から1未満の乱数*3を切り上げ

本日の訓練内容

じゃんけん

tools.hamaya2020.com

じゃんけん

tools.hamaya2020.com

• $…JavaScriptに命令する
• jQueryを</body>直前に書く（指定するhtml内のidが事前に書かれている必要がある。

じゃんけん

tools.hamaya2020.com

• $(this)

じゃんけん

tools.hamaya2020.com

RWD 対応のサイトを作りましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋

...

html-css.hamaya2020.com

L12.3 Query基本仕様

J203.

個別ライブラリの活用

動くWebデザインアイデア帳

ugokuweb.coco-factory.jp

WebParts-0 Webパーツについて

WebParts Web パーツ | HTML-CSS 入門講座 | 情報デザイン工房 濱屋

...

html-css.hamaya2020.com

P0.1 Webパーツについて

P0.1.1 Webパーツの概要

1. スライダー
2. ライトボックス
3. ウインドウ
   • 画面遷移
   • プログレスバー
   • モーダル
   • ポップアップ
4. スクロール
   • ページトップ
   • スクロールダウン
   • スクロールバー
   • スクロール効果
   • ヘッダ固定
   • ページ内リンク
5. メニュー
   • ハンバーガー
   • ドリルダウン
   • ドロップダウン
   • タブ
   • パンくずリスト
6. アコーディオン
7. ページネーション
8. テキスト装飾
   • ナビゲーション
   • 見出し
   • タイピング
   • ボタン
   • リスト
   • フローチャート
   • ニューステイカー
   • ツールチップ
   • フォーム
   • プログレスバー
9. シンタックスハイライト
10. 背景
    • 背景
    • アニメーション
11. 素材
    • アイコン
    • フォント

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

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

1. 個別ライブラリのCSSなど
   • CSSファイルへのlinkタグなど
2. パーツ装飾用のCSS
3. パーツ定義用のCSS

メモ