レスポンシブ・デザイン -Youtube iframe

1. Youtubu iframeのレスポンシブ対応

1.) HTML : YouTubeから取得したiframeを div で囲う。

<div class="frame-wrapper__video">
<iframe src="https://www.youtube.com/hoge/hogehogehogehogehoge" frameborder="0" allowfullscreen></iframe>
</div>

2. CSS
.frame-wrapper__video {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
margin-bottom: 50px;
}

.frame-wrapper__video iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

***基本はこちら。　面倒なので、Bootstrapで対応してるけど。

（前提）
PCは[ 1000px前後 ]でWebサイトをつくる
スマートフォンは[ 750px ]でWebサイトをつくる：iPhone7のサイズ

1. 表示領域の設定

1) header内でmeta内でviewportを設定する。
<head>

<meta name="viewport" content="width=device-width,initial-scale=1">
</head>

2) Media Quearyを設定する。

/* ウィンドウ幅が0〜750pxの場合に適用するCSS */
@media screen and ( max-width:479px ) {
p
{ color: #f00 ; /* 赤色 */ }
}

Note)古いブラウザ(Ie8以下)は、メディアクエリ(@media...{})を認識できません。認識できないというのは、括弧内のCSSが無視されてしまう。

2. Sample Script

1) HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>レスポンシブ</title>

<meta name="viewport" content="width=device-width,initial-scale=1">

<link href="./responsive.css" rel="stylesheet">
</head>
<body>



<div class="header">
<h1 class="logo-wrapper">
<img src="./logo.png" alt="ロゴ画像" class="logo">
</h1>
</div>



<div class="wrapper">


<div class="main">
<h1>記事タイトル</h1>
<p>記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記
事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本
文記事本文記事本文記事本文</p>
<p>記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文
記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文</p>
</div>



<div class="side">


<div class="newlist">
<h2>新着記事</h2>
<ul>
<li>記事タイトル1</li>
<li>記事タイトル2</li>
<li>記事タイトル3</li>
</ul>
</div>


<div class="author">
<h2>著者紹介</h2>
<p><img src="./author.png"></p>
<p>このブログの著者の説明です。こんにちは。こんばんは。</p>
</div>

</div>


</div> 


<div class="footer">
<p>Copyright © -2019</p>
<p>All Rights Reserved.</p>
<p>http://mossymob.net</p>
</div>


</body>
</html>

2) CSS
メディアクエリ(@media...{})は、PC画面、又は、スマホ画面のどちらかに設定すればよい。
以下のケースは、スマホ画面用にメディアクエリを設定。

/* 全体(デスクトップPCとスマホ)に適用するCSS */
.wrapper
{
  width: 1000px ;
  margin: 0 auto ; /* 左右に[auto]を指定することで、真ん中に寄る */
  padding: 0 ;  /* 上下左右の余白を0にしておく */
overflow: hidden ;  /* main/sideのfloatを解除する */

}
/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{
.wrapper
  {
  width: auto ;
  padding: 0 10px ;  /* 左右の余白 */
   }

}
/* 全体(デスクトップPCとスマホ)に適用するCSS */
.main
{
  width: 618px ;
  padding: 20px ;       /* 上下左右に20pxの余白 */
  border: 1px solid rgba(0,0,0,.1) ;  /* 枠線 */
  float: left ;  /* 左に寄せる */
}
.side
{
  width: 320px ;
  float: right ;  /* 右に寄せる */
}
/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{
.main
{
  width: auto ;
  padding: 0 ;  /* 余白 */
  border: none ;  /* 枠線 */
  float: none ;  /* floatを無効する */
}
.side
{
  width: auto ;
  float: none ;  /* floatを無効する */
}
}
/* ボディ */
body
{
margin: 0 ; /* スペース */
padding: 0 ; /* 余白 */
font-size: 15px ; /* 文字サイズ */
line-height: 1.618 ; /* 行の高さ */ }
p
{
color: #00f ; /* 青色 */
}
/* スマホだけに適用するCSS */
@media screen and ( max-width:750px ) {
/* ボディ */
body
{ font-size: 13px ; /* 文字サイズ */ }
p
{
  color: #f00 ; /* 赤色 */
}
}

/* ヘッダー */
.header
{
border-bottom: 3px solid #888 ; /* 枠線 */
text-align: center ; /* テキスト、画像の真ん中寄せ */
padding: 1em 0 ; /* 上下の余白 */
margin-bottom: 2em ; /* 他のブロックとのスペース */
background: #e8e8e8 ; /* 背景色(確認用) */ }

/* ロゴ画像を囲む[h1] */
.logo-wrapper
{
margin: 0 ; /* スペース */
padding: 0 ; /* 余白 */
line-height: 1 ; /* 行の高さ */ }
/* ロゴ画像 */
.logo
{
width: 400px ; /* 横幅 */
height: auto ; /* 高さ */ }
/* スマホだけに適用するCSS */
@media screen and ( max-width:750px ) {
/* ロゴ画像 */
.logo
{
width: 150px ; /* 横幅 */ }
}
/* フッター */
.footer
{
border-top: 3px solid #888 ;  /* 枠線 */
text-align: center ;    /* テキスト、画像の真ん中寄せ */
margin-top: 2em ;     /* 他のブロックとのスペース */
padding: 1em 0 ;     /* 上下の余白 */
background: #e8e8e8 ;
}

プログラムを独学する時のメモページ

☆☆ 新着記事 ☆☆

2018年7月31日火曜日

レスポンシブ・デザイン -Youtube iframe

0 件のコメント:

コメントを投稿

このブログを検索