【今日学んだこと】HTML CSS Webデザイン

HTML CSS Webデザイン

今日はWebデザインの勉強をしました。

今日の内容をまとめていきたいと思います。

 

★今日の内容

■YouTube動画を挿入する
○YouTube動画のコードを取得
まずはYouTubeのWebサイトから掲載したい動画を表示させる。動画の下にある「共有」ボタンをクリック。
表示されたパネルで「埋め込む」をクリックする。
「動画の埋め込み」として出てきたコードをコピーし、HTMLに貼り付ける。
動画の再生開始する位置を変更するには「開始位置」にチェックを入れ、何分何秒から開始したいかを入力。

 


■レスポンシブに対応させる
地図とSNSの部分をスマートフォンでも見やすいようにメディアクエリーを使って調整する。


○メディアクエリーで縦並びに
CSSのメディアクエリーを使って、スマートフォンサイズでは要素を縦並びにする。
Flexboxを使って横並びにしたので、「display: flex;」を指定したのと同じ要素に「flex-direction: column;」を追加。
幅も「100%」とし、画面いっぱいに要素が広がるようにする。

 


■OGPの設定をする
SNSで多くの人にWebサイトを見てもらうためにはコツもある。
シェアされたときに大きく見た目が変わるOGPの設定をする。


○OGPとは
OGPは「Open Graph Protocol」の略で、SNSでWebサイトがシェアされたときにWebページのタイトルや説明文、画像などの情報を正しく伝えるための仕組み。
OGPの設定があるのとないのとでは、見え方が大きく変わる。適切に設定することで、より多くのユーザーにWebサイトを見てもらいやすくなる。

 

○OGPの設定をする
OGPはHTMLファイルの「head」内に指定の<meta>タグを記述することで設定することができる。
◆主な設定項目
og:url・・・WebページのURL
og:type・・・ページの種類。websiteまたはarticleを指定
og:title・・・Webページのタイトル
og:description・・・Webページの説明文
og:image・・・シェアされた時に表示させたい画像のファイルパス

 

Facebookは画像サイズを横1200px、縦630pxを推奨している。事前にSNS上で表示したい画像を用意しておく。
OGPには他にも多くのオプション設定がある。必要であれば公式ドキュメントページを見ながらカスタマイズする。

 

○Facebookで確認する
きちんと設定できているかは実際にSNSに投稿してみれば分かるが、何度も投稿するのは気が引ける。
そんな時は公式の確認ツールを使うとよい。WebページのURLを入力し、「デバッグ」ボタンをクリックすると設定されている項目が表示される。
エラーがある場合はその箇所を指摘してくれる。
最初にチェックするときは「新しい情報を取得」ボタンをクリック。

 

○Twitterで確認する
Twitterでも同様に公式の確認ツールが用意されている。
WebページのURLを入力し、「Preview card」ボタンをクリック。
◆Twitterでのオプション設定
Twitter用にもオプション設定が用意されている。画像の表示方法のカスタマイズや、Twitterユーザー名の記載が可能。
必要であれば公式ドキュメントページを参考に設定する。

 


■外部メディアのカスタマイズ例
外部メディアでは決められたデザインがそのまま反映される。
カスタマイズ性は低いが、出来る範囲で自分好みのデザインに変更することもできる。

 

○Googleマップをカスタマイズする
Googleマップは比較的カスタマイズしやすい外部メディアです。
コードを触る必要もないので、クリックしながら手軽に始められる。
◆Googleマイマップの作成
まずはGoogleマイマップのページにアクセスする。
Googleアカウントにログインしていなければログインし、[新しい地図を作成]ボタンをクリックしてスタートする。
デフォルトでは「無題の地図」と書かれているので、そこをクリックしてタイトルや説明文を書く。[保存]をクリック。
続いて地図に表示させたい住所を入力し、検索する。するとその場所にマークがつく。
[地図に追加]をクリックすると場所が確定される。
◆アイコンを変更する
「スタイル」アイコンをクリックする。ここからアイコンの色や種類が選択できる。
スタイルをクリックするとカラーパレットや人気のアイコンが表示される。
スタイル内の「他のアイコン」ボタンをクリックすると、さらに多くのアイコンから選べるようになる。
アイコンを好みの画像に変更することもできる。他のアイコン内、左下の「カスタム アイコン」ボタンをクリックして表示させたい画像をアップロードする。
◆地図のスタイルを変更する
続いて地図全体の色を変更する。「基本地図」と書かれたところの下向き矢印をクリック。
「地図」「航空地図」「地形」「行政区域」「モノクロ都市」「シンプルな地図」「大陸(薄色)」「大陸(濃色)」「水域白表示」の9つのスタイルから選択できる。
◆地図を表示させる
デフォルトでは作成した地図が非公開設定になっている。誰でも閲覧できるよう公開範囲を変更する。
「共有」をクリックし、「アクセスできるユーザー」を変更する。
「リンクの共有」で、「オン - ウェブ上で一般公開」を選択し、保存する。
続いてHTMLの書きこむためのコードを取得する。マイマップのタイトルの右側にある3つの点をクリック。
「自分のサイトに埋め込む」をクリックすると埋め込みコードが表示される。これをHTMLファイルの表示させたい箇所に貼り付ければ完成。

 

 

以上です！