どうも！LSSです！！
この間、このブログで「冗談でしかないレイアウト」として、思いついたはいいけど何のメリットがあるか分からない「卍レイアウト」について書きました。
「何のメリットがあるか」は分かりませんが、背景について「卍レイアウトならでは」のデザインを思いつき、その実現に向けて色々考えていたところで、「縦横比がどうであろうと常に対角線を描く方法」が必要となり、見つけたのが↓の記事となります。
…その過程で
↑また面白いものを見つけてしまい、脱線もしつつｗ
今回ようやく「卍レイアウトと対角線グラデーション」のお披露目となります！
卍レイアウトと対角線グラデーション
コード
<style>
.grd2{
display:grid;
grid-template:1fr 5fr 1fr/1fr 5fr 1fr;
}
#head2{grid-column:1/3;grid-row:1/2;border:1px solid black;background-image:linear-gradient(to bottom right,#cceeeeff 49%,#cceeee00 50%);}
#sidel2{grid-column:1/2;grid-row:2/4;border:1px solid black;background-image:linear-gradient(to top right,#cceeeeff 49%,#cceeee00 50%);}
#main2{grid-column:2/3;grid-row:2/3;border:1px solid black;}
#sider2{grid-column:3/4;grid-row:1/3;border:1px solid black;background-image:linear-gradient(to bottom left,#cceeeeff 49%,#cceeee00 50%);}
#foot2{grid-column:2/4;grid-row:3/4;border:1px solid black;background-image:linear-gradient(to top left,#cceeeeff 49%,#cceeee00 50%);}
</style>
<div class="grd2">
<div id="head2">へっだ</div>
<div id="sidel2">左サイド</div>
<div id="main2">めいんこんてんつ</div>
<div id="sider2">右サイド</div>
<div id="foot2">ふった</div>
</div>
赤太字部分、
background-image:linear-gradient(to bottom right,#cceeeeff 49%,#cceeee00 50%);
が、今回「卍レイアウト」に追加した部分です。
「main」以外の４要素、取り囲む４つのエリアに対して対角線グラデーションを背景として当てています。
４つの対角線グラデーションは、オレンジ色の「to 〇〇 ××」の部分だけ記述を変更する事で「水色→透過」に変化するグラデーションの方向を変えています。
こうすると、「四角の画面の中に、傾いた四角が入っているレイアウト」という事になりますね。
枠線を除去してみると、こんな感じ
上記コードから、各エリアを分かりやすくするための枠線「border:1px solid black;」を取り除くと↑こうなります。
さらに、linear-gradient中の「49% 50%」を「30% 60%」に変更して「#cceeeeff 30%,#cceeee00 60%」とすると、↓こうなります。
コード
<style>
.grd4{
display:grid;
grid-template:1fr 5fr 1fr/1fr 5fr 1fr;
}
#head4{grid-column:1/3;grid-row:1/2;background-image:linear-gradient(to bottom right,#cceeeeff 30%,#cceeee00 60%);}
#sidel4{grid-column:1/2;grid-row:2/4;background-image:linear-gradient(to top right,#cceeeeff 30%,#cceeee00 60%);}
#main4{grid-column:2/3;grid-row:2/3;}
#sider4{grid-column:3/4;grid-row:1/3;background-image:linear-gradient(to bottom left,#cceeeeff 30%,#cceeee00 60%);}
#foot4{grid-column:2/4;grid-row:3/4;background-image:linear-gradient(to top left,#cceeeeff 30%,#cceeee00 60%);}
</style>
<div class="grd4">
<div id="head4">へっだ</div>
<div id="sidel4">左サイド</div>
<div id="main4">めいんこんてんつ</div>
<div id="sider4">右サイド</div>
<div id="foot4">ふった</div>
</div>
あとがき
これをベースとして、各エリアに「中身のあるパーツ」を配置したWebサイトorブログテーマを作ったとして…どう見せられるものにするかが問題ですねｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
