TwitterがXに変更になり、仕様が変わっているところがあるかも知れません。
必要な方へ、Xのヘルプセンターページへのリンクを載せておきます。
Facebookを知っていれば、Twitterも知っている人が多いでしょう。
国や自治体もFacebookやTwitterを、広報ツールとして活用しています。
Facebookとの大きな違いは、匿名制での利用ができると言う点でしょう。
また、気軽にいつでも、どこでも利用できるスマートフォンとの相性もピッタリ合って、若年層を中心に世界で3億人以上もの人が利用するサービスです。
リアルな友人やビジネスの関係同士以外にも、共通の趣味や嗜好を持つ見知らぬ人と、コミュニケーションをとり、多くの「仲間」を見つけたり、探したりすることができるのも大きな特徴です。
もう一つ大きな特徴として「リアルタイムな情報の受発信」が挙げられます。
企業や店舗の最新情報や、周囲で起きていることが、いつでも・どこでも受発信できる便利さも魅力の一つです。
「Twitterのアカウントはあるけど使ったことがない」といった人も少なくありませんので、Twitterの特徴を紹介しておきます。
- 匿名で使えるサービスで、利用目的ごとに複数のアカウント（名前）を使って、利用することができます。
- 興味・関心度の高い最新の情報を、リアルタイムで受け取る利用者が多いため、ボジネスで活用する企業や店舗も増えています。
- リアルな友達や、面識のない共通の趣味・嗜好を持ったユーザー同士でコミュニティができやすく、情報交換や情報共有ができます。
- 興味・関心のある情報を発信するユーザーを「フォロー」することで、自分のタイムライン上で閲覧することができます。
情報の発信は「ツイート（つぶやき）」と呼ばれ、140文字以内で気軽に投稿ができるのも、匿名制のサービスならではの機能です。- 興味・関心の高いツイートには「いいね」「リツイート」「リプライ」で、情報を共有することができます。
- 「リツイート」は相手のツイートを共有して自分のツイートで発信できます。
- 「リプライ」は相手のツイートに返信することができます。
TwitterやInstagramの匿名制サービスは、スマートフォンユーザーを中心に、興味・関心度の高い情報に注目が集まります。有益で信頼の高い情報は、共有・拡散されやすくそのスピードも速いのが特徴です。
Googleマップ
Googleマップをレスポンシブで表示するTips
GoogleマップをHTMLに埋め込んで表示するのは簡単ですが、レスポンシブで表示させるのには少し手を加えないといけません。
特に、地図の縦横比を維持しながらとなると大変ですので、よく使われているTipsを紹介しておきます。
地図の埋め込みは、<div>とid名で囲んでおきましょう。
<p>地図</p>は仮の地図なので削除して、以下のように地図を埋め込みます。
<div id="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d558.2357641231084!2d139.69668802559602!3d35.6915011000415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd6981dce11%3A0x4c93aeebef13825d!2z5p2x5Lqs44Oi44O844OJ5a2m5ZyS!5e0!3m2!1sja!2sjp!4v1648313883247!5m2!1sja!2sjp" width="400" height="200" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>セレクタ「#access-container > p」は、地図を埋め込む前の仮のボックスなので削除しておきます。
代わりに以下のコードを、スマートフォン側の方へ記述しておきましょう。
#map {
position: relative;
width: 100%;
padding-top: 75%;
}
#map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}5行目のpadding-topは、ボックスの高さの役割になっています。
padding-top:75%は、height ÷ width x 100で計算した値で、縦横比になります。
（幅４：高さ3の比率の場合、3÷4×100=75%）
16:9の縦横比の場合、9÷16×100=56.25%など、padding-topで幅100%に対して高さを変えることができます。
縦横比を指定した親ボックスに、子要素の<iframe>が幅・高さ100%で表示されます。
positionは位置調整で使っているので、そのままコピーして使えばOKです。
Chap22-4では、猫カフェページにGoogleマップを表示する手順を紹介しています。