生涯、学習していきたい

2018年はプログラミング学習に凝っています。

ドットインストール:実践!ウェブサイトを作ろう#13~#15

 

ドットインストールさんで今日もウェブサイト作りを学んでいきましょう。

具体的な話になって、ぐんぐんテンションが上がっております!

f:id:ponnkichi:20180327083944p:plain

 

 

ちなみに前回のレッスンはこちらです。

 #13 利用者の声欄を作っていこう

さて、続きは「利用者の声」の欄を作って行きます。

f:id:ponnkichi:20180327085254p:plain

このように、アイコンと名前、テキストが3つ横並びになっていますね。

これをマークアップしていきます。

 

まずは、ひとつひとつの塊を「user」というdivにまとめます。

f:id:ponnkichi:20180327085421p:plain

<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>

 これを3つ作ります。

コピペして「利用者A」「利用者B」「利用者C」の分も作ります。

 

icon1の、数字の部分を2と3にして。

ブラウザで確認すると、このようになっています。

f:id:ponnkichi:20180327212853p:plain

ちゃんと、全員分のアイコンと名前、テキストが入っていますね。

 

目標はこんな感じなので、これからスタイルをあてていきましょう。

f:id:ponnkichi:20180327085254p:plain

 

まずは画像をまるくして、白いボーダーをつけましょう。

.user img{

border-radius:50%;

border:10px solid #fff;

}

 

f:id:ponnkichi:20180327213151p:plain

画像がまるくなって、白の枠線がついていますね。

 

*******************

boeder-radiusについてCSS3の#09で学習しています。

ponnkichi.hatenablog.com

こちらの記事では、実際に使ってみています^皿^

ponnkichi.hatenablog.com

 

 

*********************

次はユーザー。背景色を白にします。

.user{

background:#fff;

}

 

次に、ユーザーのお名前にスタイルをあてます。h3にしているのでこのように。

.user h3{

text-aline:center;

}

 文字を中央揃えにしました。

f:id:ponnkichi:20180327213600p:plain

はい、お名前が中央揃えになり、背景が白になりました!

 

 

横向きに並べるのは次回みたいです^皿^

 

#14 要素を横並びにしてみよう

さて、利用者を横並びにします。

f:id:ponnkichi:20171219214742p:plain

「私の予想ではfliat:leftを使うね」

(ない知識を絞った結果)

 

さて、どうでしょうか?

 

f:id:ponnkichi:20180327085254p:plain

この形を目指すんですよね。

 

現在、全体の幅を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で学習しています。

ponnkichi.hatenablog.com

実践編として、CSSレイアウト入門の#08でも取り上げています。

ponnkichi.hatenablog.com

とっても便利なので、ぜひとも覚えたいですね。

 

*********************

さて、横並びにする方法ですが、動画中ではこんな説明が。

「floatを使ってもいいのですが、今回はflexboxを使いましょう」

f:id:ponnkichi:20180202215313p:plain

 

「…」

 

 

 

冒頭の私の予想、見事に外れたり。

 

flexboxは初めて聞きましたね!ドキドキわくわくです!

 

どのようにするかというと、親要素の.voicesと.containerに

ディスプレイをつけます。

.voices .container{

display:flex;

 へえ!

そして、余った余白を均等に配分したいので、

 

 

.voices .container{

display:flex;

justify-content:space-between;

 justify-contentプロパティをspace-betweenにするのだそうです。

どちらも初めて見ました!

 

すると、横並びになりました!

f:id:ponnkichi:20180328081537p:plain

すごいすごい!

 

次は、p要素の余白がどのくらいあるか調べてみましょう。

テキストのところで右クリックをして

f:id:ponnkichi:20180328081712p:plain

「検証」を選択します。

f:id:ponnkichi:20180328081745p:plain

色々出てくるのですが、右側の「computed」のところをクリックします。

f:id:ponnkichi:20180328081835p:plain

すると、周囲の余白が14pxずつついているのがわかります。

 

全体の左右に40pxずつ余白をつけたので、下にも同じ幅の余白をつけるとバランスがよくなりますね。

40-14=26なので、

下にはさらに26pxの余白をつけましょう。

 

先ほど、仮に「0」としておいた下側の余白を26pxに変えます。

.user{

background:#fff;

width:250px;

box-sizing:border-box;

padding:0 40px 26px;

}

 

f:id:ponnkichi:20180328082200p:plain

左右と下がそろって、いい感じになりましたね。

 

上の余白は、アイコンをずらしてからまた変えていきますが

このように「検証」の機能をつかって調べることができることは

ぜひ覚えておきたいですね!

 

今回は初めてのものもあったので、おさらい。

横並びにする方法。
  • 横並びにするには「display:flex;」。
  • 余白を均等に配分するには「justify-content:space-between;」。
  • 余白を調べるには「検証」。
 
 これらを使えるようになって行きたいと思います!
 
正直…、floatよりもわかりやすいんじゃない?気のせい?
 

#15 アイコンをずらして配置しよう

さて、目標とするサイトは、アイコンがなんだかかっこいい場所にあります。

f:id:ponnkichi:20180327085254p:plain

上にずれていますよね!

今回はこのようにアイコンをずらしていきましょう。

アイコンの場所をずらすには、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なんじゃない?

と思ってブラウザを見ると

f:id:ponnkichi:20180328083415p:plain

おおっと。

そうか、absoluteってそういうことだったよね…

でも、まあ、中央に配置されましたね!

 

********************

positionプロパティに関しては、CSS入門編の#20でも学習しています。

ponnkichi.hatenablog.com

********************

さて、画像の位置を動かしましょう。

上に半分だけはみ出るようにしたいと思います。

今、画像サイズが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;となります。

f:id:ponnkichi:20180328083941p:plain

うん、きれいにいきましたね。

ただ、ユーザー名がアイコンにかぶってしまっていますね。

そのぶん、下げてみましょうか。

.user{

background:#fff;

width:250px;

box-sizing:border-box;

padding:60px 40px 26px;

position:relative;

}

 仮に「0」としておいた上側のpaddingを試しに60pxにしてみました。

(先ほどのように「検証」機能を使ってもいいですね)

f:id:ponnkichi:20180328084149p:plain

 

 ふうむ。いいんですが、ちょっと狭い感じがします。

60pxのところを、65pxにしてみましょう。

.user{

background:#fff;

width:250px;

box-sizing:border-box;

padding:65px 40px 26px;

position:relative;

}

 

f:id:ponnkichi:20180328084243p:plain

いい感じになりました。

 

また、アイコンをずらしたことにより、セクションのタイトルとの余白もせまくなってしまいました。

「利用者の声」というところとアイコンの間ですね。

voicesのh2のmargin-bottomを上書きする形になります。

.voices h2{

margin-bottom:150px;

}

 これを書き足します。

150pxの根拠は、

もともとあった90pxの余白に、アイコンの半分の高さの60pxを足したものです。

f:id:ponnkichi:20180328084615p:plain

余白があいて、見やすくなりました。

 

続きは次回です。

次回で「実践!ウェブサイトを作ろう」も終了になりますね。

どんどん覚えていきたいです!