メモ（HTML & CSS 中級　道場レッスン） - BNBのプログラミング勉強記録

手こずった箇所、ミスった箇所など。

ブロック要素を左右に並べ、右は右に寄せる

<footer>
  <div>
    Progate
  </div>
  <ul>
    <li>
      会社概要
    </li>
    <li>
      採用
    </li>
    <li>
      お問い合わせ
    </li>        
  </ul>
</footer>

footer div{
  float:left;
}

footer ul{
  float:right;
}

忘れていたCSS要素

background-size: cover;・・・1枚の画像で表示範囲を埋め尽くすように画像の大きさが拡大縮小
display:inline-block・・・例：Aタグをボタンにするときに便利。デフォルトはインラインのため、width,height,margin/paddingのleft/right指定ができない。
なんか、cssでheightを指定しないと背景色が適用されない。仕様なんだろうけど、バグでは・・
a:activeで、リンクをクリックした時の動作になる。
影作るやつがうざい。慣れか？（box-shadow:0 7px #1a7940;）

最終的に作ったやつ（恥ずいけど、ええわ）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Progate</title>
  <!-- ここでFont Awesomeを読み込んでください -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
  <!-- ここにコードを書いていきましょう -->
  
  
  
  <!-- 上部コンテナ -->
  
  <div class="container_top">
 
    <header>
      <img src="https://prog-8.com/images/html/advanced/main_logo.png">
      <a href="#">ログイン</a>
    </header>

    <h1>
      <p>LEARN TO CODE.</p>
      <p>LEARN TO BE CREATIVE.</p>
    </h1>
    
    <div class="explanation">
      <p>Progateはオンラインプログラミング学習サービスです。</p>
      <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
    </div>
    
    <div class="container_register">
      
        <a href="#" class="register">
          新規登録はこちら
        </a>
      
      <p>or</p>
      
        <a href="#" class="facebook">
          <span class="fa fa-facebook"></span>
          Facebookで登録
        </a>
        
        <a href="#" class="twitter">
          <span class="fa fa-twitter"></span>     
          Twitterで登録
        </a>
        
    </div>  
    
  </div>






  <!-- 中段 -->
  
  <div class="container_middle">
      
    <div class="message">
      <h2>Learn Where to Get Started!</h2>
    </div>
    
    <div class="lessons">
   
      <div class="lesson">
        <img src="https://prog-8.com/images/html/advanced/html.png" />
        <div class="lesson-title">HTML & CSS</div>
        <div class="lesson-caption">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</div>
      </div>
      
      <div class="lesson">
        <img src="https://prog-8.com/images/html/advanced/jQuery.png" />
        <div class="lesson-title">jQuery</div>
        <div class="lesson-caption">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</div>
      </div>
      
      <div class="lesson">
        <img src="https://prog-8.com/images/html/advanced/ruby.png" />
        <div class="lesson-title">Ruby</div>
        <div class="lesson-caption">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</div>
      </div>
      
      <div class="lesson">
        <img src="https://prog-8.com/images/html/advanced/php.png" />
        <div class="lesson-title">PHP</div>
        <div class="lesson-caption">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</div>
      </div>
      
    </div>  
    
  </div>
  
  
  




  
  <!-- 下部コンテナ -->
  
  <div class="container_bottom">
 
    <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
    <h3>Let's learn to code, learn to be creative!</h3>
    
    <div class="botton">
      <a href="">さっそく開発する</a>
    </div>

   </div>
   
   
   
   
   
   
   <!-- フッター -->
   
   <footer>
     <div class="footer-logo">
      <img src="https://prog-8.com/images/html/advanced/footer_logo.png" />
      <p>Learn to Code, Learn to be Creative.</p>
     </div>
   </footer>
  
</body>
</html>

/* CSSのリセット（消さないでください） */
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

/* ここからCSSを書いていきましょう */




/* 全体 */
body{
  
  color:white;
}





/* 上部（ヘッダー〜でかい画像） */

.container_top{
  background-image:url("https://prog-8.com/images/html/advanced/top.png");
  background-size: cover;
  padding:180px 0 100px 0;
}

h1{
  text-align:center;
  font-size:45px;
  letter-spacing:5px;
  opacity:0.7;
}

.explanation{
  text-align:center;
  color:white;
  opacity:0.7;
}

.container_register{
  text-align:center;
  margin-top:30px;
}

.container_register p{
  margin:15px 0;
}

.container_register a{
  color:white;
  padding:8px 24px;
  border-radius:4px;
  opacity:0.8;
  display:inline-block;
}

.container_register a:hover{
  opacity:1;
}

.fa{
  margin-right:5px;
}

.register{
  background-color:#239b76;
}

.facebook{
  background-color:#3b5998;
  margin-right:15px;
}

.twitter{
  background-color:#55acee;
}


header{
  background-color:rgba(34, 49, 52, 0.9);
  padding:0px 40px;
  position:fixed;
  top:0px;
  z-index:1;
  width:100%;

}

header a{
  color:white;
  display:block;
  background-color:rgba(255, 255, 255, 0.3);
  float:right;
  margin-right:100px;
  padding:20px;
}

header a:hover{
  background-color:rgba(255, 255, 255, 0.5);
}

header img{
  width:124px;
  margin:20px;
}









/* 中段 */

.container_middle{
  background-color:#f7f7f7;
  height:580px;
  text-align:center;
}

.message{
    padding:80px 0 50px 0;
}

.message h2{
    color:#5f5d60;
    font-weight:normal;
}

.lessons{
  width:1170px;
  margin:0px auto;
}

.lesson{
  width:25%;
  float:left;
}


.lesson-title{
  color:white;
  position:relative;
  top:-110px;
}

.lesson-caption{
  font-size:13px;
  color:#b3aeb5;
  width:80%;
  margin:0px auto;
}






/* 下部 */

.container_bottom{
  text-align:center;
  margin-top:80px;
}

.container_bottom h2{
  color:#5f5d60;
  font-weight:normal;
}

.container_bottom h3{
  color:#5f5d60;
}

.botton{
    margin:50px 0 80px 0;
}

.botton a{
  color:white;
  display:inline-block;
  padding:15px 40px;
  background-color:#5dca88;
  box-shadow:0 7px #1a7940;
  border-radius:4px;
  opacity:0.8;
}

.botton a:hover{
  opacity:1;
}

.botton a:active{
  box-shadow:none;
  position:relative;
  top:7px;
}






/* フッター */

footer{
  padding:30px 0;
  border-top:1px solid #eee;
}

.footer-logo{
  width:1170px;
  margin:0 auto;
}

.footer-logo img{
  width:124px;
}

.footer-logo p{
  color:#b3aeb5;
  font-size:12px;
}