どうも7noteです。レスポンシブサイトを作成する時の画像サイズに注意！ レスポンシブのサイトを作成する時、 スマートフォンで表示される際は200pxの画像は400pxの画像を用意しなければならない！ 倍のサイズの画像を用意する理由 スマートフォンの表示画角はpxでいうと、横幅が約320px～420pxくらいのものが一般的です。 機種 大きさ（横幅） iphone5,SE 320px Galaxy S5 360px iphone6,7,8,X 375px iphone8+ 414px つまり、iphone8+に幅いっぱいの画像を表示させようと思うと、画像は828px以上の画像を用意するべきです。 なぜ倍ものサイズがいるのか。それは スマートフォンはRetinaディスプレイだからです。 つまり、 Retinaディスプレイでは高画質に見せるため、2倍のpx数を扱うことができるようになっている スマートフォンに対応させるためにはこのRetinaディスプレイに対応させないといけないということになります。なので本来は300pxあれば済む画像でも、綺麗にキメ細やかに再現させるために倍の600pxの画像が必要になります。 デザイン会社からデータなどをもらうと、スマホサイズのデータが倍の750～850pxくらいで作られているのを見ることができます。 CSSの書き方 スマートフォン側 スマホ側はpxで指定してしまうと、違うデバイスで見たときにはみ出るなどのイレギュラーが出てしまうので、%で指定することが一般的だと思います。 img { width: 100%; } これで、読み込む画像のサイズを倍のサイズで作成しておけば、自動的に倍サイズの画像を幅いっぱいに綺麗に見せることができます。 パソコン側 逆にパソコン側の方が画像サイズが少し小さい場合が多いです。そのため、スマホ用に書き出した画像と画角（縦横比）が同じであれば、本来の画像サイズより少し小さいpxを指定して配置します。 img { width: 550px; /*画像はもともと828pxの大きさがある*/ } この時に注意していただきたいのは、 元の画像サイズよりおおきい数字を指定してはいけない事。 画像よりおおきいサイズをCSSで指定してしまうと、無理やり引き伸ばした画像になってしまいます。 画像がぼやけてしまう原因になるのでやらないように注意してください！ まとめ 画像の書き出しはWEBサイトを制作する上で必須スキルになります。 1枚の画像を上手く使いまわすことで、余計な画像の読み込みが不要になりますし、修正・管理も行いやすくなります。 おそまつ！ （コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）
レスポンシブのサイトを作成する時、 スマートフォンで表示される際は200pxの画像は400pxの画像を用意しなければならない！
スマートフォンの表示画角はpxでいうと、横幅が約320px～420pxくらいのものが一般的です。
つまり、iphone8+に幅いっぱいの画像を表示させようと思うと、画像は828px以上の画像を用意するべきです。
なぜ倍ものサイズがいるのか。それは スマートフォンはRetinaディスプレイだからです。
つまり、 Retinaディスプレイでは高画質に見せるため、2倍のpx数を扱うことができるようになっている
スマートフォンに対応させるためにはこのRetinaディスプレイに対応させないといけないということになります。なので本来は300pxあれば済む画像でも、綺麗にキメ細やかに再現させるために倍の600pxの画像が必要になります。
デザイン会社からデータなどをもらうと、スマホサイズのデータが倍の750～850pxくらいで作られているのを見ることができます。
スマホ側はpxで指定してしまうと、違うデバイスで見たときにはみ出るなどのイレギュラーが出てしまうので、%で指定することが一般的だと思います。
img { width: 100%; }
これで、読み込む画像のサイズを倍のサイズで作成しておけば、自動的に倍サイズの画像を幅いっぱいに綺麗に見せることができます。
逆にパソコン側の方が画像サイズが少し小さい場合が多いです。そのため、スマホ用に書き出した画像と画角（縦横比）が同じであれば、本来の画像サイズより少し小さいpxを指定して配置します。
img { width: 550px; /*画像はもともと828pxの大きさがある*/ }
この時に注意していただきたいのは、
元の画像サイズよりおおきい数字を指定してはいけない事。
画像よりおおきいサイズをCSSで指定してしまうと、無理やり引き伸ばした画像になってしまいます。 画像がぼやけてしまう原因になるのでやらないように注意してください！
画像の書き出しはWEBサイトを制作する上で必須スキルになります。 1枚の画像を上手く使いまわすことで、余計な画像の読み込みが不要になりますし、修正・管理も行いやすくなります。
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）
概要 いざSNS埋め込み作業が発生した時用の、忘備録 YouTube 動画の評価が並んでいる列の共有を押す 埋め込む を選択 動画の埋め込み というタイトルのつけられたコードをコピーしてhtmlに貼り付ければ完了 Twitter 以下に詳しく書いてある https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview ツイートボタンの形はカスタマイズしたいことが多いので、カスタマイズできるボタンを出せるようにする 雛形は以下の通り <a class="twitter-share-button" href="https://twitter.com/intent/tweet"> Tweet</a> これでスタイルを自由に定義できるボタンが作れる。class名も自由にできる ?text=Hello%20world このように URI パラメータの text を設定することで、出力する文章を設定することができる 他、data 属性を追加することで、色々なパラメータが設定可能 詳しくはこちらを参照 Facebook いいねボタン シェアボタン フォローボタン フォローボタンは2018年に廃止された Pinterest こちら GoogleMap 目的地を開き、共有 ボタンを押す 地図を埋め込む タブを選択し、HTMLをコピー をクリック、HTMLに貼り付けて完了
いざSNS埋め込み作業が発生した時用の、忘備録
動画の評価が並んでいる列の共有を押す
共有
埋め込む を選択
埋め込む
動画の埋め込み というタイトルのつけられたコードをコピーしてhtmlに貼り付ければ完了
以下に詳しく書いてある https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview
ツイートボタンの形はカスタマイズしたいことが多いので、カスタマイズできるボタンを出せるようにする 雛形は以下の通り
<a class="twitter-share-button" href="https://twitter.com/intent/tweet"> Tweet</a>
これでスタイルを自由に定義できるボタンが作れる。class名も自由にできる
?text=Hello%20world このように URI パラメータの text を設定することで、出力する文章を設定することができる
?text=Hello%20world
他、data 属性を追加することで、色々なパラメータが設定可能 詳しくはこちらを参照
こちら
目的地を開き、共有 ボタンを押す
地図を埋め込む タブを選択し、HTMLをコピー をクリック、HTMLに貼り付けて完了
地図を埋め込む
HTMLをコピー
学習で学んだ内容のアウトプットとして作成しました。 HHTMLとCSSの関係性 ○HTML:ウェブサイトに表示される情報を記載する言語です。〇〇.htmlという名前のファイルに記述します（例：test.html） ○CSS：HTMLに装飾を加えるための言語です。〇〇.cssという名前のファイルに記述します（例：style.css） ○拡張子：拡張子は、ファイルに書かれる言語の種類を識別するためにファイル末尾につける文字列です。例えばhtmlのファイルを作成する場合は〇〇.htmlとなり、CSSの場合は〇〇.cssとなります。このように、言語ごとに拡張子が異なります。
学習で学んだ内容のアウトプットとして作成しました。
○HTML:ウェブサイトに表示される情報を記載する言語です。〇〇.htmlという名前のファイルに記述します（例：test.html） ○CSS：HTMLに装飾を加えるための言語です。〇〇.cssという名前のファイルに記述します（例：style.css） ○拡張子：拡張子は、ファイルに書かれる言語の種類を識別するためにファイル末尾につける文字列です。例えばhtmlのファイルを作成する場合は〇〇.htmlとなり、CSSの場合は〇〇.cssとなります。このように、言語ごとに拡張子が異なります。
