こんにちは、フレッシュマンSRです。
Twitterで何回かつぶやいたこともあるのですが、ポートフォリオに載せている自作サイトのリメイクを進めています。
ちなみに現在公開中のサイトはこんな感じです。

はっきり言って「ダサイ」と感じてしまったので、ポイントを絞って大きく改変することを決意しました。
変更した点は以下の通りです。
ドロワーメニュー
菓子販売店関連で他のサイトを見てみたのですが、ヘッダーがないサイトがありました。
ヘッダーをつけることが問題というわけではありませんが、ヘッダーがダサいと感じていたので、思い切ってヘッダーを撤去し、ドロワー一本に絞ることにしました。

デスクトップ表示したときでも、ドロワーが表示されるように変更。

ドロワーの中は黒をベースに、シンプルにまとめました。
ホバー時の処理も無難な「透過」にしてあります。
斜めに区切る
そしてもう一つの大きな変更点は、画像を斜めに区切ることです。
近年のサイトでは、要素を斜めに区切るデザインがあります。

メインビジュアルに導入してみました。
ただそのまま長方形の画像を載せただけより、少しインパクトが出たのではないでしょうか?
これはCSSの疑似要素を使うことで簡単に導入できます。
/* トップ画像 */
#top_image{
// 省略
position: relative; // 疑似要素をposition: absoluteに対応させる
// borderで三角形を描き、背景を斜めに区切る
&::before {
content:"";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
z-index: 1; // 背景画像の上に表示する
border-style: solid;
// ここで三角形のサイズを決める
// border-width-left で幅を指定(必ず幅100vwにして、ブラウザサイズいっぱいにする)
// border-width-bottom で高さを指定
border-width: 0 0 200px 100vw;
// 高さを指定したbottom以外はtransparent(透過)にする
// 高さを指定したbottomは背景と同じ色を指定して、画像を塗りつぶす
border-color: transparent transparent $color-white transparent;
}
}
また、これを応用することで、台形を作ることもできます。

これはSCSSを以下のように書きました。
上の画像のように 左辺が高く、右辺が低くなるよう切り抜くには「img_lefthigh」クラスを、逆に左辺が低く、右辺が高くなるように切り抜きたい場合は「img_righthigh」クラスを要素に加えます。
.img_lefthigh, .img_righthigh {
width: 45vw;
height: 600px;
position: absolute;
top: 105px;
img {
width: 100%;
height: 100%;
display: block;
}
// borderで三角形を描き、背景を斜めに区切る
&::before {
content:"";
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
&::after {
content:"";
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
}
.img_lefthigh {
right: 0;
&::before {
bottom: 0;
left: 0;
border-width: 0 0 100px 45vw;
border-color: transparent transparent $color-white transparent;
}
&::after {
top: 0;
right: 0;
border-width: 100px 0 0 45vw;
border-color: $color-white transparent transparent transparent;
}
}
.img_righthigh {
left: 0;
&::before {
bottom: 0;
right: 0;
border-width: 100px 0 0 45vw;
border-color: transparent transparent transparent $color-white;
}
&::after {
top: 0;
left: 0;
border-width: 0 0 100px 45vw;
border-color: transparent transparent transparent $color-white;
}
}
こちらのサイトを参考にさせていただきました。
今後の課題
今後残された課題はこんな感じです。
- 新しいロゴの制作
- フッターの制作
- タブレット時のスタイル設定
といっても作業量自体はそれほどではないので、早めにきっちり終わらせるようにします。
コメント