エンジニアステップ

初心者エンジニア(1年目~3年目くらい)のための技術ブログ

【DAY6】AdobeXDからテーブルとGoogleMap埋め込みコーディング【#30DAYSトライアル2nd】

こんにちは、アルパカです

#30DAYSトライアル2ndの復習&解説記事です。

個人的につまずいた箇所、調べた箇所を中心に書いています。

» 参考:Webコーダーとして仕事できるようになる30日まとめ

 

【DAY6課題】AdobeXDからテーブルとGoogleMap埋め込みコーディング

DAY6の課題は「AdobeXDからテーブルとGoogleMap埋め込みコーディング」です。

 

AdobeXDからテーブルのコーディング

AdobeXDからテーブルのコーディングについては、はにわまんさんの記事と、既存知識を組み合わせればできますね。

 

【復習】擬似クラス「:first-child」「:nth-child()」

DAY2で学んだ擬似クラス「:first-child」「:nth-child()」を使いましたね。

www.engineer-step.com

 

擬似クラス(Pseudo-classes)は、要素の特定状態に関して、スタイルを指定できます。

実は擬似クラスって何十個もあります

developer.mozilla.org

 

「兄弟要素グループのスタイルを指定できる」擬似クラスがnth-child()でしたね。

 

nth-childの使い方の例は以下の通り

:nth-child(-n+3)
兄弟要素のグループの中で最初の3つの要素を表します。 [=-0+3, -1+3, -2+3]

引用元::nth-child() - CSS: カスケーディングスタイルシート | MDN

p:nth-child(n+8):nth-child(-n+15)
兄弟要素のグループの中で8~15番目の <p> 要素を表します。

引用元::nth-child() - CSS: カスケーディングスタイルシート | MDN

上記例「nth-child(n+8):nth-child(-n+15)」の様に、マイナスを使って指定することもできるようです。

 

nth-childでマイナスを使うとどうなるか

例えばnth-child(n+2):nth-child(-n+3)と書くと、2番目と3番目の要素に対してだけスタイルを指定できるようになります。

考え方としては、

  • 「n」に0,1,2,…と入るとする
  • その時に「:nth-child(n+2)」と「:nth-child(-n+3)」の両方で現れた数が対象

という感じです。

 

実際見てみると、

  • n=0 → 2 (0+2)」3 (-0+3)」
  • n=1 → 3 (1+2)」2 (-1+3)」
  • n=2 → 「4 (2+2)」「1 (-2+3)」
  • n=3 → 「5 (3+2)」「0 (-3+3)」
  • n=4 → 「6 (4+2)」「-1 (-4+3)」

 といった感じで、両方で現れている数は、「2」と「3」だけということが分かります。

 

【おまけ】2番目以降の要素を指定したい時はnth-child(n+2)で出来る

おまけです。

2番目以降の要素全てを指定したい時は、nth-child(n+2)でできますね。

  • n=0→「2 (0+2)」
  • n=1→「3 (0+2)」

といった感じです。

 

AdobeXDからGoogleMap埋め込みコーディング

AdobeXDからGoogleMap埋め込みコーディングです。

はにわまんさんの記事通りにやればOKでして、もはや語ることがあまりないですねw

※画面いっぱいに広がって困る人は、max-widthを使えばいいはず(灬╹ω╹灬)

 

iframe(インラインフレーム)とは?

そもそもiframe(インラインフレーム)とは何か?

  • Inline FRAMEの略語
  • ページ内に領域を設けて、そこに別ページ(別URLのコンテンツ)を設置する仕組み

のことです。

自分で作ったページの中に、別のページ(他者のサイト)を表示させる事ができる…ってイメージですね。

 

GoogleMapは有料じゃなかった?

ちなみにGoogleMapが有料になる?みたいな話題が2018年にありました。

詳しくは下記の記事を読めば分かりますが、Googleマップのサイトから埋め込んでいるiframeの地図はOKなようです。

webtan.impress.co.jp

 

ちなみにGoogleのサービスはよく利用規約が変わったり、サービス終了したりします。

今後変更される可能性もありますので、WEB制作をする場合はGoogleの発表はチェックしておいたほうが良さそうですね。

» 参考:「Google+」だけじゃない! これまでに終了したグーグルの17のサービス | BUSINESS INSIDER JAPAN

 

 

以上「AdobeXDからテーブルとGoogleMap埋め込みコーディング」というお話でした。

www.engineer-step.com