ドットインストール：実践！ウェブサイトを作ろう#13~#15
ドットインストールさんで今日もウェブサイト作りを学んでいきましょう。
具体的な話になって、ぐんぐんテンションが上がっております！
ちなみに前回のレッスンはこちらです。
#13 利用者の声欄を作っていこう
さて、続きは「利用者の声」の欄を作って行きます。
このように、アイコンと名前、テキストが３つ横並びになっていますね。
これをマークアップしていきます。
まずは、ひとつひとつの塊を「user」というdivにまとめます。
<section>
<h2>利用者の声</h2>
<div class="countainer">
<div class="user">
</div>
</div>
</section>
この、
<div class="user">
</div>
の中に、画像アイコンや名前、テキストを入れていきます。
まずは画像。
<img src="img/icon1.jpg"
width="100"height="100"alt="利用者A">
幅と高さが100pxの画像ですね。
次に、名前とテキストです。
名前はh3タグで。テキストはpタグで囲います。
<h3>利用者A</h3>
<p>すごいよ。すごいよ。すごいよ。すごいよ。すごいよ。すごいよ。すごいよ。</p>
（ごめんなさい、「すごいよ」の数は動画と異なります）
つなげるとこうなります。
<section>
<h2>利用者の声</h2>
<div class="countainer">
<div class="user">
<img src="img/icon1.jpg"
width="100"height="100"alt="利用者A">
<h3>利用者A</h3>
<p>すごいよ。すごいよ。すごいよ。すごいよ。すごいよ。すごいよ。すごいよ。</p>
</div>
</div>
</section>
これを３つ作ります。
コピペして「利用者A」「利用者B」「利用者C」の分も作ります。
icon1の、数字の部分を2と3にして。
ブラウザで確認すると、このようになっています。
ちゃんと、全員分のアイコンと名前、テキストが入っていますね。
目標はこんな感じなので、これからスタイルをあてていきましょう。
まずは画像をまるくして、白いボーダーをつけましょう。
.user img{
border-radius:50%;
border:10px solid #fff;
}
画像がまるくなって、白の枠線がついていますね。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
boeder-radiusについてCSS3の#09で学習しています。
こちらの記事では、実際に使ってみています＾皿＾
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
次はユーザー。背景色を白にします。
.user{
background:#fff;
}
次に、ユーザーのお名前にスタイルをあてます。h3にしているのでこのように。
.user h3{
text-aline:center;
}
文字を中央揃えにしました。
はい、お名前が中央揃えになり、背景が白になりました！
横向きに並べるのは次回みたいです＾皿＾
#14 要素を横並びにしてみよう
さて、利用者を横並びにします。
「私の予想ではfliat:leftを使うね」
（ない知識を絞った結果）
さて、どうでしょうか？
この形を目指すんですよね。
現在、全体の幅を820pxにしているので
一つの幅を250pxにすると、3つで750px。
すると70pxのあまりができるので、そんな感じに作っていくようですよ。
先ほど背景色を指定した.userに、幅も指定していきます。
余白の計算をするのが大変なので、box-sizingプロパティを使います。
box-sizingプロパティをborder-boxにすると、paddingをwidthに含めることができます。
.user{
background:#fff;
width:250px;
box-sizing:border-box;
padding:0 40px 0;
}
余白は、とりあえず左右だけつけました。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
box-sizingについては、CSS3の#19で学習しています。
実践編として、CSSレイアウト入門の#08でも取り上げています。
とっても便利なので、ぜひとも覚えたいですね。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
さて、横並びにする方法ですが、動画中ではこんな説明が。
「floatを使ってもいいのですが、今回はflexboxを使いましょう」
「…」
冒頭の私の予想、見事に外れたり。
flexboxは初めて聞きましたね！ドキドキわくわくです！
どのようにするかというと、親要素の.voicesと.containerに
ディスプレイをつけます。
.voices .container{
display:flex;
}
へえ！
そして、余った余白を均等に配分したいので、
.voices .container{
display:flex;
justify-content:space-between;
}
justify-contentプロパティをspace-betweenにするのだそうです。
どちらも初めて見ました！
すると、横並びになりました！
すごいすごい！
次は、p要素の余白がどのくらいあるか調べてみましょう。
テキストのところで右クリックをして
「検証」を選択します。
色々出てくるのですが、右側の「computed」のところをクリックします。
すると、周囲の余白が14pxずつついているのがわかります。
全体の左右に40pxずつ余白をつけたので、下にも同じ幅の余白をつけるとバランスがよくなりますね。
40-14=26なので、
下にはさらに26pxの余白をつけましょう。
先ほど、仮に「0」としておいた下側の余白を26pxに変えます。
.user{
background:#fff;
width:250px;
box-sizing:border-box;
padding:0 40px 26px;
}
左右と下がそろって、いい感じになりましたね。
上の余白は、アイコンをずらしてからまた変えていきますが
このように「検証」の機能をつかって調べることができることは
ぜひ覚えておきたいですね！
今回は初めてのものもあったので、おさらい。
横並びにする方法。
- 横並びにするには「display:flex;」。
- 余白を均等に配分するには「justify-content:space-between;」。
- 余白を調べるには「検証」。
これらを使えるようになって行きたいと思います！
正直…、floatよりもわかりやすいんじゃない？気のせい？
#15 アイコンをずらして配置しよう
さて、目標とするサイトは、アイコンがなんだかかっこいい場所にあります。
上にずれていますよね！
今回はこのようにアイコンをずらしていきましょう。
アイコンの場所をずらすには、positionプロパティを使います。
まずは、「.user」のpositionプロパティをrelativeにします。
.user{
background:#fff;
width:250px;
box-sizing:border-box;
padding:0 40px 26px;
position:relative;
}
そして、画像「.user img」のほうにも。
こちらはabsoluteですね。
user img{
border-radius:50%;
border:10px solid #fff;
position:absolute;
left:0;
right:0;
margin:0 auto;
}
右と左を0に。marginを0とautoにすると、自動で左右に均等になります。
いいねいいね！これでOKなんじゃない？
と思ってブラウザを見ると
おおっと。
そうか、absoluteってそういうことだったよね…
でも、まあ、中央に配置されましたね！
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
positionプロパティに関しては、CSS入門編の#20でも学習しています。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
さて、画像の位置を動かしましょう。
上に半分だけはみ出るようにしたいと思います。
今、画像サイズが100pxで、ボーダーが上下に10pxずつついているので
合計で120pxの高さがありますね。
その半分は60pxです。
なので、上方向に60px動かしてみましょう。
.user img{
border-radius:50%;
border:10px solid #fff;
position:absolute;
left:0;
right:0;
margin:0 auto;
top:-60px;
}
上方向に動かしたいので、top:-60px;となります。
うん、きれいにいきましたね。
ただ、ユーザー名がアイコンにかぶってしまっていますね。
そのぶん、下げてみましょうか。
.user{
background:#fff;
width:250px;
box-sizing:border-box;
padding:60px 40px 26px;
position:relative;
}
仮に「0」としておいた上側のpaddingを試しに60pxにしてみました。
（先ほどのように「検証」機能を使ってもいいですね）
ふうむ。いいんですが、ちょっと狭い感じがします。
60pxのところを、65pxにしてみましょう。
.user{
background:#fff;
width:250px;
box-sizing:border-box;
padding:65px 40px 26px;
position:relative;
}
いい感じになりました。
また、アイコンをずらしたことにより、セクションのタイトルとの余白もせまくなってしまいました。
「利用者の声」というところとアイコンの間ですね。
voicesのh2のmargin-bottomを上書きする形になります。
.voices h2{
margin-bottom:150px;
}
これを書き足します。
150pxの根拠は、
もともとあった90pxの余白に、アイコンの半分の高さの60pxを足したものです。
余白があいて、見やすくなりました。
続きは次回です。
次回で「実践！ウェブサイトを作ろう」も終了になりますね。
どんどん覚えていきたいです！
