以前「スプリットレイアウトの参考になるサイトまとめ」という記事を書きましたが、今回は実践編として実際にスプリットレイアウトのサイトを作成していきたいと思います。
01.スプリットレイアウトとは
その名のとおり画面をスプリット＝分割するデザインレイアウトのことです。画面を縦2つに分割して見せることで左右の対比が生まれデザインの印象が変わります。
02.スプリットレイアウトの実践
では作成していきましょう。今回、左を固定表示、右をスクロール表示にしていきます。まずはサンプルをご覧ください。
HTML
<div class="split">
<div class="split-item split-left">
<div class="split-left__inner">
left
</div><!--split-left__inner-->
</div><!--split-item split-left-->
<div class="split-item split-right">
<div class="split-right__inner">
right
</div><!--split-right__inner-->
</div><!--split-item split-right-->
</div><!--split-->
CSS
.split{
display: table;
width: 100%;
}
.split-item{
display: table-cell;
padding: 80px;
width: 50%;
}
.split-left{
background: #000;
color: #fff;
position: relative;
}
.split-left__inner{
height: 100%;
position: fixed;
width: 50%;
}
.split-right__inner{
height: 8000px;
}
2,6行目 左右の横に並んだレイアウトは、全体をラップしている「.split」に「display: table;」、左右のボックス「.split-item」に「display: table-cell;」を指定しています。
17行目 「.split-left__inner」に「position: fixed;」で固定表示にします。
03.レスポンシブ対応
次にレスポンシブに対応させていきます。今回はブレイクポイントを1024pxにしました。画面が1024px以下のサイズの場合は固定表示エリアとスクロールエリアが縦に並ぶようにします。
CSS
下記のCSSを追加します。
@media screen and (max-width:1024px) {
.split{
display: block;
}
.split-item{
display: block;
width: auto;
}
.split-left__inner{
position: inherit;
width: auto;
}
}
2行目 全体をラップしていた「.split」を「display: block;」に。
5行目 左右のエリア「.split-item」も同じく「display: block;」に。また幅も「width:auto」にして横幅全体にしました。
9行目 「.split-left__inner」を「position:fixed」で固定していたので解除。こちらも「width:auto」にして横幅全体にしました。
スプリットレイアウトがトリッキーなレイアウトだったので、レスポンシブの場合は元に戻していくといった感じです。
04.応用サンプル
最後に色々やってみました。レスポンシブ対応です。画面がブレイクポイント以下のサイズになったら動画部分を画像に変えています。
WEBデザイナー・フロントエンドのスキルを確実に身につけたい方へ
「WEBデザインやフロントエンドを学びたい」と思い立ったとき、多くの方がまず独学を選びます。
しかし、独学では「何をどこから学べばいいかわからない」「つまずいたときに誰にも聞けない」といった壁にぶつかることも少なくありません。
一方、スクールで学べば、正しい順序で、現場で使えるスキルを効率よく習得することができます。最短ルートでスキルを身につけたい方には、スクール学習がおすすめです。
かすが私は26歳で印刷業からWEBデザイナーを目指して学び始めましたが、やはり独学に限界を感じ短期スクールで学びました。本気でスキルを身につけたいならスクールはマジで行った方が良いです！
- カリキュラムが体系化されているため、基礎から応用まで無駄なく学べる
- 現役のプロから実践的なフィードバックを受けられる
- わからないことをすぐに質問・解決できる環境がある
- 制作課題を通じて、ポートフォリオが作成できる
- 学習仲間や講師とのつながりが、モチベーション維持につながる
- カリキュラムが現場で必要とされる技術に対応しているか
- 現役デザイナー・エンジニアが講師として在籍しているか
- ポートフォリオ制作のサポートが充実しているか
- 卒業後の就職・転職支援が用意されているか
- オンライン・通学など、自分の生活スタイルに合った受講形式か
遠回りせず、確実にスキルを身につけたいなら、プロに教わるのが一番の近道です。
WEBデザイナー・フロントエンドエンジニアとして一歩踏み出したいあなたにぴったりのスクールを、下記の記事でご紹介しています。ぜひチェックしてみてください。
