ドットインストール：実践！ウェブサイトを作ろう#10~#12
ドットインストールさんでウェブサイトの作り方を学んでいます。
今回は実践！ウェブサイトを作ろうの#10~#12を学習していきましょう。
前回からの続きです。
前回の記事はこちらになります。
#10 sectionのスタイルを整えよう
見出しのスタイル
前回でセクションの大枠を作ったので、
次はセクションの見出しにスタイルをつけていきましょう。
font-sizeを26pxにして見やすくします。
そして、text-aline:center;にしてテキストを中央揃えにしましょう。
section h2{
font-size:26px;
text-aline:center;
margin:0 0 90px;
font-weight:normal;
}
下だけにmarginがついているのでこの形に。
フォントは太字にしたりしないで、そのままです。
ブラウザで見ると、このようになりました、
中央揃えで、すっきりしていますね。
サブタイトルをつける
さて、目標の形を見てみると、
h2にはサブタイトルがついているのがわかります。
見出しが「利用者の声」で
サブタイトルが「User Voices」ですね。
サブタイトルがついているのは、「call-to-action」以外のセクションなので
このようにスタイルをあてます。
h2の後の擬似要素です。
section:not(.call-to-action)h2:after{
content:'- title -';
display:block;
font-size:18px;
color:#aaa;
padding-top:10px;
}
擬似要素のafterのあとにはcontent プロパティが必ず必要なのでしたね。
displayはブロックに。
フォントサイズはh2より小さめの18px、
文字の色はグレー。
上側に10pxの余白をつけています。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
contentプロパティ、擬似要素については、CSS入門編の#07でも学習しています。
擬似要素に関しては、CSSレイアウト入門の#07でも取り上げています。
さあ、サブタイトルが上手く入っているか見てみましょう。
-title-が入っていますね！
では、具体的に入れていきましょう。
先ほどのcontentプロパティはコメントにして反映されないようにして、
/* content:'- title -'; */
それぞれのセクションで、contentプロパティを設定していきましょう。
/* features*/
/* voices */
コメントを書いて、何を書いたか忘れないようにします。
（これ、個人的にすごく大事なポイントのような気がします…！）
/* features*/
.features h2:after{
content:'-Features-';
}
そして、featuresのアフター要素のcontentプロパティを
「-Features-」にします。
同じように、voicesも
/* voices */
.voices h2:after{
content:'-User Voices-';
}
これで、「利用者の声」のサブタイトルが「User Voices」になります。
ブラウザで確認すると、こうなっています。
サブタイトルがちゃんとつきましたね。
擬似要素や擬似クラスは意味がわからなくて避けてきましたが
避けている場合じゃないなあと危機感を感じておりますとも！
#11 特徴紹介欄のマークアップをしよう
次は、特徴紹介欄のマークアップをします。
特徴紹介欄は、このように画像と見出しと紹介文が書いてあるものが３つあります。
それぞれが行で表現されているので、行に指定をしていきます。
<section>
<h2>Dotinstall Paneの特徴</h2>
<div class="container">
<div class="row">
<div>
</div>
</section>
そして、イメージを入れて行きましょう。
<img src="img/feature1.png"
width="420" height="270"alt="Dotinstall Pane"
class="shadow">
幅は420px、高さは270pxの大きさの画像です。
alt属性は「Dotinstall Pane」。
以前作ったshadowクラスも入れます。
shadowの指定は、実践！ウェブサイトを作ろうの#08で行っています。
これをrowクラスの中に入れます。
<section>
<h2>Dotinstall Paneの特徴</h2>
<div class="container">
<div class="row">
<img src="img/feature1.png"
width="420" height="270"alt="Dotinstall Pane"
class="shadow">
<div>
</div>
</section>
次に、見出しとテキストです。
「desc」というクラスをつけて、divにまとめましょう。
imgタグの下に作ります。
<div class="desc">
<h3>すごい特徴があるよ！</h3>
<p>すごいよ。すごいよ。すごいよ。すごいよ。すごいよ。すごいよ。すごいよ。</p>
</div>
こんな感じになりますね。
ほめまくっていますね＾皿＾
こんな感じのかたまりを3つ作ります。
row以下をコピペしましょう。
画像はfeature1、featur2、feature3と名前を変えるのを忘れずに。
ブラウザで見るとこのようになっています。
こんな感じのものが３つになっています。
画像に影もついていますね！
#11 要素を左右に振り分けてみよう
先ほどの段階では、まだ見出し、テキスト、画像が縦に並んでいますね。
これを画像の部分と見出し・テキストの部分をそれぞれ左右に振り分けましょう。
このような形にしていきます。
全体の幅が820pxで、画像の幅が420pxなので
右側には400pxが余っている状態です。
テキストの入るdescの幅を、360pxにしてみましょう。
.desc{
width:360px;
}
そして、左右に振り分けるためにHTMLのほうにも書いて行きましょう。
テキストを右にしたいところはpull-right 。
<div class="desc pull-right">
<h3>すごい特徴があるよ！</h3>
<p>すごいよ。すごいよ。すごいよ。すごいよ。すごいよ。すごいよ。すごいよ。</p>
</div>
左にしたいところはpull-leftを指定します。
<div class="desc pull-left">
<h3>すごい特徴があるよ！</h3>
<p>すごいよ。すごいよ。すごいよ。すごいよ。すごいよ。すごいよ。すごいよ。</p>
</div>
pull-right。これは初めて見たような気がするぞ？！
順番的には、テキストが右、左、右の順番にきます。
pull-right、pull-left、pull-rightの順番になりますね。
それでは、スタイルをあてましょう。
pull-right{
float:right;
padding-left:40px;
}
同じように、pull-leftにもスタイルを。
pull-left{
float:left;
padding-right:40px;
}
そして、floatを使ったので、
親要素のrowにoverflow:hidden;を設定しましょう。
.row{
overflow:hidden;
}
＊＊＊＊＊＊＊＊＊＊＊＊＊＊
overflow:hidden;の話は、CSSレイアウト入門の#07でも学習しています。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
次は、h3のスタイルを書いて行きましょう。
.features h3{
font-size:24px;
}
フォントのサイズを24pxにしました。
それでは、ブラウザを見てみましょう。
左右に振り分けられましたね！
ただ、間がみっしりとつまっているので
rowの間に余白を入れたいところです。
.row{
overflow:hidden;
margin-bottom:90px;
}
rowの下に、90pxの余白を入れました。
無事に、間があきました。
スクロールして下のほうを見ると、
sectionのmargin-bottomと合わさって、
ちょっと間延びした感じになってしまっています。
そこで、rowの最後に関してはmargin-bottomを0にしましょう。
.row:last-child{
maegin-bottom:0;
}
うん、いい感じに狭まりましたね。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
last-childなどの擬似クラスについては、CSS3の#06で学習しています。
かわいそうなくらい理解できていないのですが、何回も出て来ているので
観念して覚えようと思います…。
続きも楽しみです！
