初級と比べると新たに教わる内容は少なくなっています。
半分近くは初級編の範囲の復習なので、初級道場コースがサクサク進めばそこまで詰まらないと思います。
そこそこ周回したら、道場編に進みましょう。
html/css 学習コース 中級編で学べる事
・背景画像の表示（ループ防止）
・要素を中央に寄せる
・ちょっとだけ透かせる
・文字間隔の指定
・1つのタグ内に2つ以上のクラスを指定
・ボタンなどの角を丸くする
・カーソルが乗った時やクリックしたときに変化をつける
・アイコンを出現させる
・色の新たな記述方法
・ボタンに影をつけたりへこませる
・スクロールしてもヘッダーが上に固定できるようにする
ざっとあげただけでも結構ありますね。頑張っていきましょう。
html/css 学習コース 中級編 攻略
1. 目標物を確認しよう
「確認して次へ」を押しましょう（棒
2. 全体のレイアウトを作ろう
デュアルディスプレイ（２画面）であれば1枚目のスライドを片画面いっぱいに出しておくと良いです。
1枚目のスライドはレッスン目標物の最も外側の設計図になるので、これを意識せずに反復すると学習効果が薄れます。
3. トップ部分のレイアウトを作ろう
background-image:url(画像URL);
【効果】
背景画像を表示する
background-size:cover;
【効果】
背景画像のループがなくなり、画面いっぱいに1枚が表示されるようになる
width:~px;
margin:0 auto;
【効果】
class全体を中央に寄せる。必ずwidthとセットで指定する
新しい記述が多く登場しますが、書き方のノリはこれまでと同じです。
4. 透明度、文字の間隔を調整しよう
【効果】透明度を指定する（0~1)
【効果】文字間隔を指定する
letter-spacing はここでちょろっと出てくるだけで、道場コースに行ったとき忘れがちなのでしっかり覚えておきましょう。
5. ボタンを作ろう
【効果】複数クラスを指定できる
【効果】インラインブロック要素にする。超頻出。
2周目以降は <a href=”#” class=”btn”></a> まで作ってから3つに複製した方が楽です。”#”はなくても正解できます。
display:inline-block; は概念的な話が絡むので理解するのに時間がかかります。というか学習モードでは無理だと思います。
道場コースでは自力でコードを書くことになるのでそこで本格的に学べばOKです。
6. レイアウトを整えよう
【効果】丸みを帯びせることができる
読み方はラディアス「レイディアス」。
ドットインストールで習うのですが、border-radius:50%; border:~px solid 色; で円が作れたりします。
【効果】カーソルが乗った時のCSSを指定できる。超頻出。
序盤はセレクタ名と:hover の間に半角を空けるミスが起こりやすいです。注意しましょう。
序盤めっちゃ間違えまくりでした汗
【効果】テキストを中央に寄せる。超頻出。
超頻出ばっかですが、本当に超頻出なので仕方ない
7. アイコンを使おう
【効果】アイコンが表示される
faはFont Awesomeの略です。
faのmargin-right:5px;は道場コースにも出てくるのですが、仕様書に記載がない鬼畜仕様です（）
8. ヘッダーのレイアウトを作ろう
【効果】色の記述方法のひとつ。最後の数字は透過度を示す。
opacityはセレクタ全体を透過させ、rgbaはその行内で指定された範囲のみ透過させます。
9. ログインリンクを作ろう
新しい記述はありません。
手順に沿ってもくもくと書いていきましょう。
rgbaなどの細かい値はコピペでOKです（後で鬼のように練習しますから）。
10. ログインリンクを完成させよう
【効果】hoverした際の変化にかかる時間を指定できる。allは範囲（暫くallしか出て来ません）
【効果】行の高さを決める
今回の「ログイン」という文字がまさにそうですね。
a をブロック要素にするくだりは「そんなもんかー」くらいで大丈夫です。displayで指定しましょう。
後で嫌というほど(ry
11. レッスン一覧のレイアウトを作ろう
【効果】文字の太さを決める。normal(普通)、bold(太い）の2種類だけ暗記
12.レッスンを並べよう
【効果】親要素に対してどれくらいの割合の幅（高さ）か指定する
最後のスライドが鬼大事です。各クラスの範囲が描かれています。これをすっ飛ばして記述しても頭に入らないので、今どこを記述してるか意識しつつ進めてくださいね。
URLは１つを４つにコピペして、文末だけ編集戦法でOKです。注意点としてjQuaryのみQが大文字な点に気をつけてください。
lessons の中に以下のような塊が４つ作られればOKです。
<div class=”lesson-icon”>
<img src=”https://prog-8.com/images/html/advanced/html.png” alt=”” />
<p></p>
</div>
<p class=”txt-contents”>
</p>
</div>
余談ですが、学習コースでは txt-contents ですが道場コース回答では text-contents になっています。
学習コースの癖でhtmlではtxt-contentsで書いたのに、CSSではtext-contents と書いてごっちゃになるのはプロゲートあるあるかもしれません。
道場編初回はそこでつまづきました
13. レイアウトを整えよう
【効果】要素を重ねて表示する。サイト全体左上を基準とする。
【効果】親要素に指定する。子要素の基準位置が親要素左上になる。
今は「アイコンにrelative、文字にabsoluteを指定する」くらいの認識でOKです。
残りはこれまでの復習です。
14. メッセージ部分のレイアウトを作ろう
新たな記述はありません。手順通りに打っていきましょう。
1枚目のスライドはメッセージ部分の設計図なのでがん見しといてくださいね。
15. 立体的なボタンを作ろう
【効果】横方向、縦方向に影をつける
横方向を0pxにして、縦方向にのみ若干つけることで押される前のボタンぽい影ができます。
【効果】カーソルを持って行ったときにカーソルが指ボタンに変化する
cursorはデフォルトで各々定義されています。
aタグ：pointer（リンクボタンにもっていくと指になりますよね）
16. クリック時に変化をつけよう
【効果】要素がクリックされているときのＣＳＳを記述できる
これを使うとボタンをクリックしたとき「影が消えて、影の高さ分ボタンが下がる」ように指定できれば、へこませる演出ができます。
日本語で書くとこんな感じです。
影が消える
影の高さ分ボタンが下がる
}
【効果】指定されたＣＳＳを打ち消す
【効果】要素を本来の位置からずらす
これらの記述があればボタンをへこませることができますね。
hoverと同様に:activeもクラスタ名との間にスペースは空けない点に注意してください。
今回は手順があるので間違えようがないですが位置ずらしの記述の意味は「本来の位置『から』ずらす」です。『へ』ではないので注意してください。
positon:relative;top:10px; left:10px; ならば「上から10px 左から10px ずらす」の意味です。
つまり「下に10px、右に10pxずらす」となります。
17. フッターを作ろう
新しい記述は特にありません。これまでの復習です。
footer にはピリオド不要なところだけ注意です。
18. ヘッダーを固定しよう
position:fixed;
top:0;
z-index:10;
【効果】
ヘッダーが固定され、下にスクロールするとヘッダーが一番上の層に来るようになる
position:fixed; で要素を画面上に固定し、top:0;でデフォルトの左端に位置を指定して、z-index:10; で要素の重なり順序を一番上にします。
意味はそこそこにこの3行は丸暗記レベルでＯＫです。
これにて中級 学習コース修了です！お疲れさまでしたー。
