Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UI要素を動的に利用する

MiyakeMito
March 28, 2021
460

 UI要素を動的に利用する

UI要素を動的に利用する

MiyakeMito

March 28, 2021
Tweet

Transcript

  1. html > body > div:eq(0) > div:eq(1) > div:eq(0) >

    div:eq(1) > div > ul > li:eq(0) > a UI要素はこうなってる Webレコーダーで記録すると、こういう値になっている ・・・これ自分で作れそう??
  2. まずは、 HTMLを整形する Visual Studio Code がおすすめ https://azure.microsoft.com/ja- jp/products/visual-studio-code/ 推奨設定 表示

    - 外観 - サイドリンクバーを表示 +アウトラインを表示 +カーソルに追従 ▪サイドリンクバーで すべてを折りたたんで表示した後に、 対象のWebパーツの記載部分をクリック
  3. UI要素作成の3つのルール ① <html>(最上層) から、階層ごとにタグを記述しながら、 目的の部品までたどる ② 階層と階層は『 > 』で繋ぐ ③

    ひとつの階層に同一タグが複数ある場合は、 『:eq(添え字)』をつけて、 選択するタグが上から何番目に存在するかを指定する ※ 添え字は0からスタート ひとつめを指定する場合は『:eq(0)』不要
  4. html > body > div > div :eq(1) > div

    > div:eq(1) > div > ul > li > a 0 1 html > body > div > div:eq(1) > div > div:eq(1) > div > ul > li > a Yahoo!路線情報 「乗換案内」リンク
  5. 応用 というか本題? 添え字に変数を設定すると何かと便利! Yahoo!路線情報-乗換案内の検索結果 html > body > div >

    div:eq(1) > div:eq(1) > div > div > div:eq(1) > div > ul:eq(1) > li:eq( ) > dl > dd > ul > li:eq( ) %LoopIndex2% %LoopIndex1%