メモ（HTML、CSS）その1

基本的な知識は元々あったが、Progateをやってみて、初めて知った事などをメモ。その2があるかは分からない。

メモ：問い合わせフォーム。

<div class="contact-form">
<h3 class="section-title">お問い合わせ</h3>

<p>メールアドレス（必須）</p>
<input>

<p>お問い合わせ内容（必須）</p>
<textarea></textarea>        
<p>※必須項目は必ずご入力ください</p>
        
<input class="contact-submit" type="submit" value="送信">
        
</div>

input,textarea{
  width:400px;
  margin-top:10px;
  margin-bottom:30px;
  padding:20px;
  font-size:18px;
  border:1px solid #dee7ec;
}

.contact-submit{
  background-color:#dee7ec;
  color:#889eab;
}

メモ：font-awesomeについて

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
<a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>

.fa {
  margin-right: 5px;
}

メモ：知らなかったCSSいろいろ

.top-wrapper h1 {
  opacity: 0.7;　/*・・・・・知らんかった*/
  font-size: 45px;
  letter-spacing: 5px;
}

.btn {
  padding: 8px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8;　/*・・・・・知らんかった*/
  border-radius: 4px;　/*・・・・・知らんかった*/
}

.btn:hover {
  opacity: 1;
}

header {
  height: 65px;
  width: 100%;
  background-color: rgba(34, 49, 52, 0.9);
  position:fixed;　/*・・・・・知らんかった*/
  top:0;　/*・・・・・知らんかった*/
  z-index:10;　/*・・・・・知らんかった*/
}

.header-right {
  float: right;
  background-color: rgba(255, 255, 255, 0.3);
  transition: all 0.5s;　/*・・・・・知らんかった*/
}

/* 
transitionを使うとアニメーションをつけることができます。
「変化の対象」や、「変化にかかる時間」などを指定できます。
「変化の対象」にはcolorなどのプロパティを指定しますが、allを指定すると全てのプロパティに適用出来ます。
transitionは多くの場合hoverと組み合わせて使います。
 */


.lesson-icon p {
  position: absolute;　/*・・・・・知らんかった*/
  top: 90px;　/*・・・・・知らんかった*/
  width: 100%;
  color: white;
}

.message {
  padding: 15px 40px;
  background-color: #5dca88;
  box-shadow: 0 7px #1a7940;　/*・・・・・知らんかった*/
}

.message:active {
  position: relative;　/*・・・・・知らんかった*/
  top: 7px;　/*・・・・・知らんかった*/
  box-shadow: none;　/*・・・・・知らんかった*/
}