けんた
WEBページにスライドを載せる方法
新型コロナウイルスに関係する内容の可能性がある記事です。
新型コロナウイルス感染症やコロナワクチンについては、必ず1次情報として厚生労働省首相官邸のウェブサイトなど公的機関で発表されている発生状況やQ&A、相談窓口の情報もご確認ください。※非常時のため、すべての関連記事に本注意書きを一時的に出しています。
見出し画像

WEBページにスライドを載せる方法

けんた

こんにちは、けんたです。

いかがお過ごしですか?

今日は、あいにくの雨。

コロナウイルスと相まって、お家ライフを謳歌していることと思います。

今まで技術のアウトプットをしてこなかったので、このマガジンという形でしたいと思います。

主に、フロントエンドのアウトプットいたします。

今回の記事の目次です。


Google Slidesのスライドを埋め込む方法

ここからは実際に画像を使って解説いたします。

スライドは、個人的な自己紹介スライドです(笑)

埋め込みたいファイルを表示>スライドの上にあるメニューバーのファイルタブ>ウェブに公開

画像1

モーダルウィンドウ(画面中央にでている白い枠の名前)>リンクタブが標準で選択されているのでその右側の埋め込むタブを押下

画像2

この画面がでてきたら、ラストスパート。

1.スライドのサイズでWEB表示時のサイズ指定。

2.スライドの自動表示(スライドショーみたいに自動でページが遷移するあれ)

3.でてきたコードをコピペして終わり。

以下に、テンプレートを載せておきます。

<body> ~ </body>のカッコの部分を書き換えればあなたのスライドを載せることができます。

画像3

お疲れ様でした。

これで、あなたのサイトにスライドを埋め込むことができました!

どういった仕組みで実現できているのか、簡単な紹介は下記で説明!

生成されたコードの解説

おつかれまでした。

ここでは、先程単にコピペしたコードを読み解きたいと思います。

まず先程のコードです。

<iframe src="URL"?
start=false&loop=false&delayms=5000" 
frameborder="0" 
width="480" 
height="299" 
allowfullscreen="true"
mozallowfullscreen="true" 
webkitallowfullscreen="true">
</iframe>

ここでは、APIのリクエストオプション(start=false,loop=false ....)の解説ではなく、HTMLのどんな仕組みを利用しているのかを簡単に解説します。

一番外側のタグ、iframe

これは、inline-frameの略です。

HTMLの勉強をしている方はご存知の、ブロック要素、インライン要素のインラインです。

ブロック要素 = 横幅いっぱいに表示される要素。

インライン要素 = 要素の大きさでサイズが変わる要素。

詳しく知りたい方は、ここで詳しく説明されています。


まとめます。

Google SlidesのスライドをWEBに載せる場合、インライン要素のフレームの中にスライドを展開することで実現可能。

例えばですが、スライドの脇にYoutubeの動画を埋め込むことだってできます。

画像4

デザインなんて無いですが。。。


1000文字超えてきたので、今日はこの辺で。

ゆるく賢くなりましょう。






この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
けんた
IT系の専門学校に通っており、現在就活中のけんたです。 社会問題の解決者でいたいです。 ボトムアップで社会を豊かにしたいです。