HTML編集がダメな場合とその理由

このステップでは、コンテキストメニューを使ったHTML編集で起こりうる不具合について説明します。
説明中に添付ファイルやリンク先の案内があった場合、↓Itemをご確認ください。

Learn Kaizen Video

Item

• オファー詳細ページ：練習用オファー②

jQueryの基本知識

このステップでは、jQueryをコーディングするための基本知識について図を用いて説明します。

Learn Kaizen Video

特定要素のidとクラスを編集

このステップでは、jQueryのメソッドを使い実際のページ要素のid名とクラス名を編集します。
説明中に添付ファイルやリンク先の案内があった場合、↓Item / ↓Codeをご確認ください。

Learn Kaizen Video

Item

• オファー詳細ページ：練習用オファー②

Code

このステップで使うコード：idとクラスを追加

$("h2").attr("id", "h2_title");
$("h3:contains('について')").attr("id", "about_cat");
$("h3:contains('の気を付けたい病気')").attr("id", "point_sick");
$("h3:contains('ペット用品を探す')").attr("id", "search_pet");
$("h3:contains('その他')").attr("id", "other");
$("h3:contains('を見た人はこの猫も見てます')").attr("id", "relation_cat");
$("div.wrap:contains('ウィキペディアより引用')").addClass("detail01");
$("#about_cat").parent("div").addClass("detail02");

要素の移動

このステップでは、jQueryのメソッドを使い実際のページ要素を移動します。
説明中に添付ファイルやリンク先の案内があった場合、↓Itemをご確認ください。

Learn Kaizen Video

Item

• jQuery公式：https://jquery.com/

要素の追加

このステップでは、jQueryのメソッドを使い実際のページに要素を追加します。
説明中に添付ファイルやリンク先の案内があった場合、↓Codeをご確認ください。

Learn Kaizen Video

Code

このステップで使うコード：HTML

<ul id="anchor">
<li><a href="#about_cat">このネコについて</a></li>
<li><a href="#point_sick">気を付けたい病気</a></li>
<li><a href="#search_pet">ペット用品を探す</a></li>
<li><a href="#relation_cat">他のネコを探す</a></li>
</ul>

要素の複製

このステップでは、jQueryのメソッドを使い実際のページ要素を複製します。
説明中に添付ファイルやリンク先の案内があった場合、↓Itemをご確認ください。

Learn Kaizen Video

要素を囲む

このステップでは、jQueryのメソッドを使い実際のページに親要素を追加します。
説明中に添付ファイルやリンク先の案内があった場合、↓Itemをご確認ください。

Learn Kaizen Video

Item

• jQueryリファレンス：wrap
• jQueryリファレンス：wrapInner

要素の属性値を編集

このステップでは、jQueryのメソッドを使い実際のページのHTML属性値を編集します。
説明中に添付ファイルやリンク先の案内があった場合、↓Itemをご確認ください。

Learn Kaizen Video

Item

• 画像ファイル：PageTop05.png

要素の削除

このステップでは、jQueryのメソッドを使い実際のページ要素を削除します。

Learn Kaizen Video