[ポートフォリオ]自作サイトをリメイクー背景を斜めに区切る方法ー

プログラミング

2020.03.08

こんにちは、フレッシュマン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;
        }
    }

こちらのサイトを参考にさせていただきました。

CSSで背景を斜めに区切る方法（レスポンシブ可）

今後の課題

今後残された課題はこんな感じです。

新しいロゴの制作
フッターの制作
タブレット時のスタイル設定

といっても作業量自体はそれほどではないので、早めにきっちり終わらせるようにします。