見出し画像

ポートフォリオサイト、試しに作ってみる③　～プロフィールページ編～

あすか🐱UGOK

　今回は、プロフィールページ完成までのプロセスについてまとめていきたいと思います。
まず、今回作りたいプロフィールページはこちらです。

スクリーンショット (111)

(※上記の画像は、既に一通り完成させたプロフィールページの画像です。)
ひとまず、コードを書く手間を減らしたいので、前回のブログで紹介したトップページで制作したヘッダー部分のコードはコピペして使いまわします。
また、他にもHTMLのhead部分も変更を加えずにコピペしました。
この時点でヘッダーは完成しているので、後は「ページタイトル」と「プロフィール」をサクッと作るだけで完成です。

ページタイトルの作り方　

　ページタイトルは、p要素にクラス名を付け、CSSで中央揃えにして制作しました。また、位置を微調整するためにpaddingとmarginで余白設定し、フォントサイズに変更も加えました。ちなみに、今回制作するポートフォリオサイトには、プロフィールページ以外にも、タイトル名以外はほぼ同じ形式のページタイトルを使用するので、他のページにも今回制作したページタイトルのコードをコピペし、後になって全ページのページタイトルに変更を加えやすくしました。

プロフィールの作り方

　まず、sectionタグでプロフィール画像と文章をひとまとめにしました。
画像を見てわかるように、画像と文章を横並びにしたいので、プロフィール部分全体を囲んでいるsectionタグにdisplay : flex ; を指定しました。
display : flex ; を使用すると、一瞬で要素同士を横並びに設置してくれるのでとても便利です。（早く使いこなせるようになりたいものです…笑）

スクリーンショット (112)

上記の画像が、単純にdisplay : flex ; を適用させたときの画像です。
完成図と比べると、配置が左寄りになっていて気持ちが悪いです。display : flex ;を指定しただけで思い通りにレイアウトが整ってくれれば楽なのですが、そういうわけにはいかず…ここからほかのプロパティを付け加えていきながら、レイアウトを整えていきます！

画像と文章全体を囲む要素やクラス名{
 display: flex;
 justify-content: space-around;
 margin: 0 90px;
 ｝

プロパティを付け加えると言っても、今回作るようなシンプルに要素同士を横並びにさせるくらいであれば、上のコードのように、display : flex ;に justify-content : space-around ; を付け加えるだけで完成図どおりのレイアウトにすることができます。本来なら、justify-content : space-around ;を追加するだけでも良いのですが、今回は画像と文章の距離を近づけるために両サイドのマージンも指定しました。

今回、新たに学んだこと

①CSSで画像を加工する方法

加工したい画像{
 filter: brightness(150%);　←着目
 width: 540px;
 height: 540px;
 object-fit: cover;
 object-position: center;
 box-shadow: 2.5em 2.5em rgba(16, 9, 3, 1);
}

　今回は、画像の明るさをCSSだけで変更する方法を紹介します。
まず、加工したい画像を選びます。次に、CSSでその画像に filter: brightness(150%); を指定します。
たったこれだけで簡単に画像を明るくすることができます。

比較画像
　filter: brightness(150%);なし

スクリーンショット (113)

　filter: brightness(150%);あり

スクリーンショット (114)

たった1行追加するだけでだいぶ印象が変わりました。
基本的に画像加工はPhotoShopなどのソフトを用いるのが一般的ですが、気軽に加工したいだけであれば、CSSだけでも十分だと思いました。

②box-shadowについて

加工したい画像{
 filter: brightness(150%);
 width: 540px;
 height: 540px;
 object-fit: cover;
 object-position: center;
 box-shadow: 2.5em 2.5em rgba(16, 9, 3, 1);　←着目
}

上記のコードは先ほど紹介したものと同じものです。
この項目では、コードの最後の行に書かれているbox-shadowについて簡単に触れていきます。

box-shadowの表記方法

box-shadow : 左右の向き, 上下の向き, ぼかし, 広がり, 色指定 ;

　左右の向き
　　→正の値を指定すると右側に、負の値を指定すると左側に影が付く。
　上下の向き
　　→正の値を指定すると下側に、負の値を指定すると上側に影が付く。
　ぼかし
　　→ぼかしたい度合を設定。
　広がり
　　→影の幅を指定。

紹介したコードでは、ぼかしや広がりを指定していないので、輪郭線がくっきりとした影を表現することができました。
下記のサイトが参考文献です。（すごくわかりやすいのでお勧めです！）


今回は、ポートフォリオサイトのプロフィールページの完成までを紹介しました。
次回は、Works（作品ページ）の制作過程をご紹介していきたいと思います。

最後まで読んでくださりありがとうございました。

いいなと思ったら応援しよう！