Our Misson
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
billboard_012a
Our Misson
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
幅いっぱいのメイン画像(スライドショー)にメッセージを重ねる
メインイメージは1200 × 500 のサイズでスライドショーを配置しています。
ビジョンやメッセージなどを表示する時にちょっと変化を持たせるレイアウト。左右いずれかに寄せたボックスをメインイメージに重ねました。
このボックスの幅や色はCSSで指定していますので、簡単に変更できます。
スマホでは中央寄せになりスライドショーに若干重なる程度に調整しています。
billboard_012a
重ねるボックスの位置を逆にしたバリエーション。背景のグラデーションは個性的な色味のものを設定しています。このようなグラデーションパターンは多くのサイトで紹介されていますので、それらのサイトから色番号やCSSをコピペすることで表現できます。
グラデーションパターン参考サイト)
https://webkul.github.io/coolhue/
https://www.grabient.com/
https://webgradients.com/
https://uigradients.com/
画像サイズ
1200px × 500px のスライドショーになっています。