ドットインストール:レスポンシブウェブデザイン入門#07~#09
ドットインストールさんでレスポンシブWebデザインの作り方を学んでいます。
今回は#07~#09です。
前回の学習はこちらです。
#07 ニュース一覧を作っていこう
今回は、ニュースのセクションをつくっていきましょう。
ニュースのセクションも、前回のものと同じく
画像とテキストを並べていく感じになります。
なので、前回学んだfeaturesのところをコピペして作っていきましょう。
まずは「news」を書きます。
item以下はコピペをして作ると早いですね。
<section class="news">
<h2>News></h2>
<div class="container">
<div class="item">
<img src="img/news.jpg">
<p>hello.hello.hello.hello.hello.hello.hello.</p>
</div>
</div>
</section>
画像をnews用のものに変更するのを忘れずに!
そのあとに、featuresの時と同じように
item 以下をコピペして3つ同じものを作ります。
<section class="news">
<h2>News></h2>
<div class="container">
<div class="item">
<img src="img/news.jpg">
<p>hello.hello.hello.hello.hello.hello.hello.</p>
</div>
<div class="item">
<img src="img/news.jpg">
<p>hello.hello.hello.hello.hello.hello.hello.</p>
</div>
<div class="item">
<img src="img/news.jpg">
<p>hello.hello.hello.hello.hello.hello.hello.</p>
</div>
</div>
</section>
ブラウザで見てみましょう。
写真でお伝えするのが難しいのですが💦
画像とテキストが並んでいるパターンが3つ配置されていました。うまくいっています。
ただ、画像が左寄せになっていますね。
中央揃えにしましょう。
スタイルをあてていきます。
featureの下に書きましょう。
/*news*/
.news .item{
text-aline:center;
}
となりますね。
画像が中央揃えになりました。
ただ、テキストも一緒に中央揃えになってしまいましたね。
テキストは左寄せにしたいので
.news p {
text-aline:left;
}
このようにします。
はい、テキストは左揃えになりました。
item同士の余白をつけましょう。
前回のものを同じようにコピペしてみます。
前回のものはこんな感じでした。
features .item{
magin-bottom:60px;
}
.features .item:last-child{
magin-bottom:0;
}
下側に余白を60pxつけて、
一番下のものだけ余白をなしにしたのでしたね。
これをこのままnewsのところにも貼り付けて、
featuresになっているところをnewsに変えます。
news .item{
magin-bottom:60px;
}
.news .item:last-child{
magin-bottom:0;
}
このようにすれば、前回と同じようにちょうどいい余白がつきます。
今回の学習内容は、ほとんど前回の#06と同じでした。
しっかりと復習しておこうと思います。
#08 動画を埋め込んでみよう
#08では、「How to use」のところに動画を埋め込むことと、
フッターを作ることをやっていきます。
動画の埋め込み。
はてなブログだったら、ユーチューブの「埋め込み」というところをクリックしてコードをコピペするだけですが、果たして。
フッター
まずはマークアップです。
フッターは簡単なのでフッターからつくりましょう。
<footer>
<p>dotinstall.com</p>
</footer>
そしてスタイルをあてていきます。
/*footer*/
footer{
text-aine:center;
color:#ccc
padding:60px 0;
}
文字は中央揃え、文字色はグレー。
余白は上下に60pxです。
できました。あっというまですね!
動画の埋め込み
動画は、ユーチューブの動画を埋め込むのだそうです。
今回埋め込むのは、ドットインストールの動画だそうです^皿^
動画を埋め込むには、このような矢印の「共有」ボタンをクリックします。
共有ボタンを押すと、「埋め込みコード」が出てきますので開いて、
コードをコピーします。
そして、「how to use」のところにコピペします。
<section class="how to use">
<h2>How to use</h2>
<div class="container">
</div>
</section>
この、「container」のところに、先ほどのコードをコピペします。
<iframe>と書かれているところが、ユーチューブのコードになります。
<iframe width="560"height="315"
src="https://www.youtube.com/embed/gTqtCCu07c"frameborder="0"
allowfullscreeen></iframe>
入れるとこうなります。
<section class="how to use">
<h2>How to use</h2>
<div class="container">
<iframe width="560"height="315"
src="https://www.youtube.com/embed/gTqtCCu07c"frameborder="0"
allowfullscreeen></iframe>
</div>
</section>
はてなブログにはるときと同じような感じですね♪
この、iframeにスタイルをあてるとき、
全画面が表示されるようにスタイルを書くのですが
iframe{
width:100%;
height:auto;
}
幅が100%、高さは自動調整としても、なぜかうまくいかないのです。
ブラウザで見ると、このようになっています。
ちゃんと埋め込まれてはいるのですが、
なんだか高さが足りないですよね。
この調整は#09で行います。
#09 iframeの縦横比を保持してみよう
知りませんでした。動画を埋め込むのに縦横比が保持されないことを。
きっとはてなブログではそのあたりはうまく調整してくれているのでしょうね。
では、自分でサイトを作るときにはどうすればいいのかを学習しましょう。
動画を埋め込むときに、iframeではheightをautoにしてもうまく計算をしてくれません。
解決の方法は以下のとおり。
iframeに親要素を作り、
その親要素が動画の縦横比の16:9で伸縮するようにする。
先ほどのiframeを
親要素「iframe-wrapper」で囲みます。
<section class="how to use">
<h2>How to use</h2>
<div class="container">
<div class="iframe-wrapper">
<iframe width="560"height="315"
src="https://www.youtube.com/embed/gTqtCCu07c"frameborder="0"
allowfullscreeen></iframe>
</div>
</div>
</section>
赤字の部分が、親要素iframe-wrapperの部分です。
こちらにもスタイルをあてます。
CSSでは、padding-topかpadding-bottomを%で指定すると
それが、widthに対する比率になるという仕様があるそうなのです。
.iframe-wrapper{
padding-bottom:56.25%
height:0;
}
まずはheightを0にして、
padding-bottomを9/16の56.25%にします。
(動画のフレームが16:9なので)
このようにすると、16:9のまま伸縮してくれるのだそうです。
「??」
ここに、かわいそうなくらい理解していない人がいますが
気にせずに進みましょう。
理解しやすくするために、いちど背景をピンクにし
.iframe-wrapper{
padding-bottom:56.25%
height:0;
background:pink;
}
こちらのほうは非表示にしておきましょう。
iframe{
/*width:100%;
height:auto;*/
display:none;
}
(「コメント」って非常に便利なものですね)
ブラウザを見てみると、
ブラウザの幅を変えても、縦横比は変わらないことが確認できました。
これで、どんなブラウザで見てもちゃんと表示されますね!
では、ここに動画を配置してみましょう。
positionプロパティを使います。
.iframe-wrapper{
padding-bottom:56.25%
height:0;
position:relative;
}
そして、iframeのほうも。
.how-to-use iframe{
position:absolute;
width:100%;
heigth:100% ;
top:0;
left:0;
}
positionはabsoluteに。
幅と高さは100%で
ぴっちりくっつけるために、topとleftも0にします。
これで出来上がりです!
ブラウザを見ると、縦横比が正しく16:9で配置されていて、
さらにブラウザの幅を変えてみても
同じ比率のまま伸縮しています。
ちょっと難しかったのですが、
親要素を設定してその上に乗るようにする、という考え方は
floatと似ているなあと思いました。
clear:both;とかclearfixを使うのでしたよね。
CSSレイアウト入門の#07で学習しました。
また、なんども出てくるposition プロパティに関しては
CSS入門編の#20で学習しています。
いい加減に覚えなくては!💦
もうすぐHTMLやCSSの学習が終わってしまいます(-_-;;)