質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

736閲覧

Twitterカードを再現したい

makkuro

総合スコア57

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/05/01 06:26

#やりたいこと
Twitterに投稿すると表示される、以下のようなTwitterカードを任意の画像で再現してみたいです。

twitter card

#やってみたこと
####Twitterカードをいろいろ試してみた
まず、

  • 正方形の画像
  • 横長の画像
  • 縦長の画像

のそれぞれについて、どのようなレイアウトになるのかを調べました。

まず正方形の画像です。(色をつけなかったので見づらいです。ごめんなさい)
正方形の画像
TwitterCard正方形

次に横長の画像です。
横長の画像
TwitterCard横長

最後に縦長の画像です。
縦長の画像
TwitterCard縦長

どうやら、

  • いっぱいいっぱいに表示して、はみ出たらカット
  • 上下と左右は、中央に合わせる

ということらしいです。

####CSSで書いてみた

精一杯の力でCSSを書きました。

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5<style> 6.twitter-card{ 7 border: solid 1px #DDD; 8 border-radius: 12px; 9 width: 425px; 10 height: 310px; 11 margin: 0 auto; 12 margin-top: 50px; 13 overflow: hidden; 14 background-color: white; 15} 16.twitter-card-picture-frame{ 17 width: 100%; 18 height: 72%; 19 overflow: hidden; 20} 21.twitter-card-picture{ 22 width: 100%; 23 height: auto; 24} 25.twitter-card-picture > img{ 26 width: 100%; 27 height: 100%; 28} 29</style> 30 </head> 31 <body> 32 <div class="twitter-card"> 33 <div class="twitter-card-picture-frame"> 34 <div class="twitter-card-picture"> 35 <!--任意の画像--><img src="12345678.gif"> 36 </div> 37 </div> 38 </div> 39 </body> 40</html>

これが私の限界です。
これだと比率がいい感じの画像ならかなりそれっぽくなりますが、横長や縦長の画像を入れると

  • 横長の場合: 横幅に合わされて全体が表示される
  • 縦長の場合: 横幅に合わされて上部の一部だけが表示される

という感じになってしまいます。

#教えていただきたいこと

CSS、JavaScriptでもなんでも使っていいので、これを再現する方法が知りたいです。
JavaScriptを使う場合、できればjQueryを使わないでほしいです。

よろしくお願いします

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

Twitterっぽくしたいということなので、Twitterがどう実装しているのか参考にしてみる、というのはどうでしょうか。

イメージ説明
Twitterでは、

  • 画像の表示: background-image
  • 画像のフチが切れようとも枠いっぱいに描画する: background-size: cover

で実現しているようです。

css

1.twitter-card-picture-frame { 2 width: 100%; 3 height: 72%; 4 overflow: hidden; 5 background-size: cover; 6 /* ここから下は必要に応じて記述 */ 7 background-position: center center; 8 background-repeat: no-repeat; 9}

html

1<div class="twitter-card"> 2 <div class="twitter-card-picture-frame" 3 style="background-image: url('12345678.gif');"> 4 </div> 5</div>

投稿2019/05/01 06:45

thyda.eiqau

総合スコア2982

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

makkuro

2019/05/01 07:11

完璧です 私の求めていた答えでした! ありがとうございました
guest

0

間違えていたらすいません。
ツイッターカードはcssで指定するものではなく、<meta name="twitter:card" content="summary_large_image" />などで指定する仕様だったと思います。

試しに下記の<head>...</head>内に書いてみてはいかがでしょうか、、

<meta name="twitter:card" content="カード種類" /> /*①*/ <meta name="twitter:site" content="@ユーザー名" /> /*②*/ <meta property="og:url" content="記事のURL" /> /*③*/ <meta property="og:title" content="記事のタイトル" /> /*④*/ <meta property="og:description" content="記事の要約(ディスクリプション)" /> /*⑤*/ <meta property="og:image" content="画像のURL" /> /*⑥*/

・【2019年版】Twitterカードとは?使い方と設定方法まとめ
https://saruwakakun.com/html-css/reference/twitter-card

投稿2019/05/01 06:34

wataame

総合スコア302

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

makkuro

2019/05/01 07:13

回答ありがとうございます 私の書き方が悪かったのですが、Twitterカードの見た目を再現したかっただけでした 丁寧に回答していただいてありがとうございました
wataame

2019/05/01 07:14

こちらこそちゃんと理解できずに回答してしました、、上記の回答とても参考になりました! (ありがとうございます。)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問