fontawesomeを使ってスキル一覧の作成【プログラミング日記~ポートフォリオ⑦~】#8

11991 ワード
初心者 CSS 日記 HTML HTML テキストリンク

スキル一覧、連絡先を作ろう

今回はスライドの3,4枚目に当たるスキル一覧と連絡先を作ります‼

index.html
 <!-- スキル -->
      <div class="container third">
        <h2 id="skill" class="section-title">スキル</h2>
        <div class="skills">
          <div class="skill">
            <i class="fab fa-html5"></i>
            <h3>HTML<br> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></h3>
            <p>テキスト</p>
          </div>
          <div class="skill">
            <i class="fab fa-css3-alt"></i>
            <h3>CSS<br> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></h3>
            <p>テキスト</p>
          </div>
          <div class="skill">
            <i class="fab fa-js-square"></i>
            <h3>JavaScript<br> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></h3>
            <p>テキスト</p>
          </div>
          <div class="skill ">
            <i class="fab fa-wordpress"></i>
            <h3>WordPress<br> <i class="fas fa-star"></i></h3>
            <p>テキスト</p>
          </div>
          <div class="skill">
            <i class="fab fa-node"></i>
            <h3>Node.js<br> <i class="fas fa-star"></i><i class="fas fa-star"></i></h3>
            <p>テキスト</p>
          </div>
          <div class="skill">
            <i class="fas fa-database fab"></i>
            <h3>MYSQL<br> <i class="fas fa-star"></i><i class="fas fa-star"></i></h3>
            <p>テキスト</p>
          </div>
        </div> 
      </div>
      <!-- 連絡先 -->
      <div class="container forth">
        <h2 id="contact" class="section-title">CONTACT</h2>
        <div class="contact-means">
          <a href="https://twitter.com/papapape1031"><i class="fab fa-twitter"></i></a>
        </div>
      </div>
    </div>
style.css
/* スキル */
.third{
  background-color: #1d809f;
  height: 150vh;
  color: white;
 }
.skill{
  float: left;
  width: 33%;
  margin-bottom: 15px;
  padding-top: 80px;
}
.skill .fab{
  height: 180px;
  width: 200px;
  background-color: white;
  border-radius: 50%;
  font-size: 150px;
  color: #1d809f;
  padding-top: 20px;
}
.skill h3 .fas{
  color: gold;
}
.skill h3{
  margin: 10px 0 0 0 ;
}
.skill p{
  padding: 0 30px;
  font-size: 16px;
  margin: 0 0 15px 0 ;
}
/* 連絡先 */
.forth{
  background-color: aliceblue;
  height: 25vh;
}
.forth .section-title{
  padding-top: 0px;
}
.fa-twitter{
  font-size: 50px;
}

工夫したこと、苦労したこと

font awesomeの星を5つ並べるとhtmlのコードがとんでもないことになるが簡素化する方法とかあるのかな？
スキルのロゴを丸の中央にもっていくのにまたpadding-topで少しずつ調整する方法になってしまった。padding-topの20px分はwidth:200pxに対してheight:180pxでバランスをとった

実際に完成したモノがこちら！


おわりに

やっと完成した!!!と喜んでいたらレスポンシブ化してませんでした泣
時代はレスポンシブ化やで！！！
次回、レスポンシブ化してポートフォリオ編終了！(予定)