プロフィール画面の作成【プログラミング日記~ポートフォリオ⑤~】#6

#自己紹介画面を作ろう
今回はワイヤーフレームの2枚目に当たる自己紹介の部分を作っていきます

index.html

<div class="main">
      <div class="container first">  
         <h2 id="profile" class="section-title">自己紹介</h2>
        <div class="profile">
            <img src="image/profile.jpg" height="250px" width="250px">
            <ul>
              <li>名前:ぱぱぱぺ</li>
              <li>出身:埼玉県***市</li>
              <li>趣味:大相撲観戦</li>
              <li class="message">ひとこと:<br>プログラミング歴は浅いですが、<br>コミュニケーションを大切に迅速丁寧な仕事を心がけます！</li>
            </ul>
            </div>
</div>

style.css

/* 共通 */
.container{
  height: 100vh;
  padding: 80px 50px 0 50px;
  text-align: center;
}
.section-title{
  padding-top: 130px;
  font-size: 3rem;
}
/* 自己紹介 */
.first{
  background-color:rgb(239, 243, 239, 0.959);
}
.profile{
  width: 80%;
  padding: 0 300px;
}
.profile img{
  border: 5px solid black;
  border-radius: 50%;
  float: left;
}
.profile ul{
  float: left;
}
.profile li{
 line-height: 60px; 
 text-align: left;
}
.profile .message{
  line-height: 36px;
}

###工夫したこと、苦労したこと
#####html
①共通の部分にcontainerとsection-titleを追加したことでコンテンツ同士の統一感が出るはず、、、

#####css
①ヘッダーのlistから飛んできたときにいい感じの位置になるように調整した
②一言だけ別にclass付けして行間を詰めて読みやすくした

#そして完成したものがこちら！

うーーーん、これまたシンプル(笑)
まぁポートフォリオとしての健康で最低限の役割を果たしているので生存権違反にはならないはず。。。

#おわりに
今回は自己紹介ページ作りました～
趣味の欄にも書きましたが大相撲めっちゃ好きなんです、小学生の時から見続けているので相撲に関するサイトでも作りたいなぁ