【無料公開】自分だけのポートフォリオ作ろう！『Section1の作り方』 【part2】
レオナです！
前回のパート１、ヘッダーは作れましたか？
みなさんのデザインも見てみたいので、ぜひハッシュタグ「＃れおチャレ」をつけてツイートしてください！アレンジ作品楽しみです！
さて！前回の最後に突如現れた問題、、（笑）
.global-nav li a:visited { color: #E2A2BF ; }
何を実装したかったのか、わかりましたか？？
正解は、、、
（参考）https://fukuro-press.com/wordpress-customize-link-color/
「訪問済のリンクの色を変える！」でした！
リンクを設定する際にぜひ参考にして見てください＾＾
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
それでは、早速コーディングしていきましょう！
今回のセクションでご用意頂きたい画像はコチラ↓
・プロフィール画像１枚：400×400px
https://firestorage.jp/download/ccf559d7da3b437ee928fd5ca3fa1c5ea6e088f1
今回はsection１の自己紹介をコーディングしていきます。
◎HTMLコーディング
<section class="section1">
<h2>ABOUT ME</h2>
<div class="flexbox">
<div class="section1-item1">
<img src="images/top_face.png">
</div>
<div class="section1-item2">
<ul>
<li>■ NAME</li>
<li>■ AGE</li>
<li>■ HOBBY</li>
<li>■ COUNTRY</li>
<li>■ SNS</li>
<li>
</li>
</ul>
</div>
<div class="section1-item2">
<ul>
<li>： LEONA</li>
<li>： 25</li>
<li>： JAPAN</li>
<li>： DRAWING / SINGING</li>
<li>
： <a href="https://apps.apple.com/jp/app/instagram/id389801252"><img src="images/instagram.png"></a>
<a href="https://twitter.com/home"><img src="images/Twitter.png"></a>
<a href="https://apps.apple.com/jp/app/facebook/id284882215"><img src="images/facebook.png"></a>
</li>
</ul>
</div>
</div>
<div style="text-align: center;">
<a href="#ABOUT ME" class="btn">MORE</a>
</div>
</section>※コピぺした時にスペースが全角になってしまうことがあるようです、、うまく実装できない時はスペースもチェックしてみてください！
flexboxを使って３つのアイテムを横並びにするために、
★「Flexbox」のdiv classでh2以下の全体を囲って、その中に３つの要素をdiv class 「section1-item○○」で括っています。
自己紹介文のところ、絶妙な幅を持たせてデザインしてしまったので、２つのdiv classに分けて「揃えること」を最重要項目としてコーディングしました。
◎CSSのコーディング
/* section1 */
.section1 {
width: 100%;
height: 800px;
background-color: #fff ;
padding-top: 7%;
}
h2 {
text-align: center;
font-size: 3.8vw;
color: #667D83 ;
}
.flexbox {
padding: 3%;
display: flex;
align-items: center;
justify-content: center;
}
.flexbox div:nth-child(2) {
margin-left: 8%;
}
.section1-item1 img {
width: 100%;
border-radius: 50%;
}
.section1-item2 {
padding: 2%;
color: #667D83 ;
font-size: 1.8vw;
line-height: 200%;
list-style:none;
}
.section1-item2 img{
width: 15%;
margin: 5px;
}
.btn {
width: 12%;
padding: 10px 25px;
text-align: center;
border-radius: 4px;
background-color: #E2A2BF ;
color: #fff ;
text-decoration: none;
font-size: 1.2rem;
}
前回はあえて「inline-block」でナビゲーションを作っていきましたが、今回は「flexbox」を使用しています。
たった１行★「display: flex;」を書き込むだけでアイテムが横並びになるなんて、やはりflexbox恐るべし！！！！
めちゃくちゃわかりやすいflexboxの記事があったので、合わせて見てみてください！
わたし自身、勉強開始したばかりの頃「横並びにならないジャン！！！！」と四苦八苦していた時に見つけて大変お世話になった記事です。
単純に四角を横に並べるならまだわかりやすいけれど、divで括った透明な箱をしっかり頭の中でイメージするのって慣れるまで意外と難しいんですよね、、わたしもまだラッキーで作れている状態なので、早くいつでも、どんなパターンでも作れるように経験値積んでいきたいです、、＞＜
今回は以上です！
派手な演出ではないけれど、「揃える！」を意識するflexboxはこれから応用できそうですか？
分かりにくいこと、もっと解説して欲しいことなどあれば、コメントやTwitterのDMなど頂けたら嬉しいです！より良いものにできるように随時更新していきたいな
よかったよ！というポジティブな感想も書いてくれたらほんとにほんとに嬉しいです！「大好き！」と言いに行かせてください！
ツイートして頂ける際は「＃れおチャレ」とハッシュタグをつけてツイートしてね！ソッコーでいいねしに向かいまする！びゅーーーーーん
次回は構成のsection２「SKILLS」を実装していきます！
ここまでお付き合いいただきありがとうございました！！！
次回もお楽しみに！
この記事が気に入ったらサポートをしてみませんか？