ProgateでHTML、CSSの中級道場をやってみた

ProgateでHTML,CSS　中級道場にチャレンジ！

Progateさんで勉強を始めて1週間ほど経ちました

最初はrubyを覚えたかったのですが
**「まずはHTML、CSSを操れるようにならねば！(ノД`)・゜・。」**と決意。
で、HTML,CSSの学習（「学習」コースと「道場」コースがあります）は
上級まで終了したので、力だめしのつもりでチャレンジしました。

##まずはコンテンツのレイアウトから
初級の道場では「ヘッダーを作成」が課題でした。
今回はトップページのメインコンテンツを作成します。

課題としては
・divタグをパーツで切り分ける
・文字に透過性をつける
・aタグをボタンのように表示させる
・パーツの間隔、余白などをきちんと調整する

私は「margin」と「padding」の使い分けが苦手です((+_+))
これは作って慣れるしかないかな～と思っています

##divタグをパーツで切り分ける
これはhtmlのソースを書いた後にCSSで調整しやすくするため、と考えています
今回の作成対象全体をtop-wrapperというクラスでくくる

<div class="top-wrapper">
　　　<div class="container">タイトルなどを記述するエリア</div>
     <div class="btn-wrapper">新規登録やSNSのボタンを載せるエリア</div>
</div>         

私は上記のようにくくりました
最初にここをきちんと決めておくとCSSで調整がしやすいです

##文字に透過性をつける
文字だけではなく「要素の透過」というようです
背景に画像など使用している場合は上に乗せる要素を透明にすると見栄えが良い！

この設定はCSSで行います

.top-wrapper p{
  color:white;
  opacity: 0.7; ←ここ　0.0（完全に透明）～1.0（完全に不透明）で指定
}

課題ではaタグで作成するボタンも透過させています

##＜a＞タグをボタンのように表示させる
私はこれもなかなか理解できませんでした

PHPの学習とかからHTMLに入るとどうしても
<input type=～ で送信ボタンにするイメージを持ってしまいます

もしくは画像(img)を表示したものにaタグでリンクを貼るとかですね

タイトルの方法を理解するためには「インライン要素」「ブロック要素」を知る
（　aタグは「インライン要素」、divやpタグは「ブロック要素」になります　）

2つの違いは
「インライン要素」：幅(width)、高さ(height)の指定ができない
　　　　　　　　　　横並びで表示
　　　　　　　　　　間隔(margin,padding)は左右のみ指定可能
「ブロック要素」 ：幅(width)、高さ(height)の指定が可能
　　　　　　　　　 縦並びで表示
　　　　　　　　　 間隔(margin,padding)は上下左右に指定可能
そして・・
上の2つのいいとこどりするのが「インラインブロック要素」です

そしてCSSでは「display」プロパティでインライン要素をブロック要素や
インラインブロックに変更することが可能なのです！

<a class="btn sign-up" href="#">新規登録はこちら</a>
<a class="btn facebook" href="#">Facebookで登録</a>
<a class="btn Twitter" href="#">Twitterで登録</a>

この3つのaタグには共通して「btn」というクラスを指定してます
なのでcssで3つまとめてインラインブロック要素に変更します

.btn {
  display:inline-block;　←ここでインラインブロックに変更
  padding: 8px 24px;　←インラインブロックになったので幅を調整できる！
  color: white;
}

これでボタンの形になりました！

##パーツの間隔、余白などをきちんと調整する
これはプレビュー画面を見ながら試行錯誤( ;∀;)

paddingで試す　⇒失敗　⇒marginで試す　⇒ビミョー・・

色がついた要素の調整は失敗するとわかりやすいのですが
外側の余白だったりすると目視では苦労しました・・

初級の道場ではかなり苦労したのを覚えています
Progateさんの判定は指定された文字を１文字まちがっても不合格になるので
タイプミスに気付かず、「何が違うんだ～！」と頭を抱えることも

さて、引き続き　次の課題にチャレンジします！