【問01】「変化」ボタンをクリックしたら300pxの正方形であるdiv#boxの背景色が黒色から、赤色に変わるように記述しなさい。
【問02】「変化」ボタンをクリックしたらh2に対して文字色が赤、背景色が黒、文字の大きさが16px、文字の太さがノーマルになるよう記述しなさい。
【問03】「フェード・アウト」ボタンをクリックしたら、画像が0.5秒かけて徐々に非表示になるようにしなさい。
【問04】「フェード・イン」ボタンをクリックしたら【問09】で非表示になった画像が「slow」のタイミングで表示されるようにしなさい。
今まではカラムレイアウトを中心にレスポンシブデザインサイトの制作をして来ましたが、今回は既存のサイトをモデルにした全面レイアウトでのレスポンシブサイトを作っていきましょう。
全面レイアウトの場合、そのような考えで画像をサイズを決めなければいけないか、しっかりと理解しましょう。ホバーに関してはモデルとなっている既存サイトの動きを確認し、CSS3のtransitionを使って動かしてみましょう。
今まで習った事を上手く組み合わせれば、今回のようなレイアウトのRWDサイトも問題無く制作出来るので、自分なりに色々と工夫をしてみましょう。
それと同時に、今まで習った基礎的な部分をしっかりと復習し必ず理解しておきましょう。
今回はスクリーンのサイズを幅1800px・高さ900pxを想定して背景画像を用意しましょう。
参考サイト
www.vogue.co.jp
http://mosaic-theme-active.myshopify.com/
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>フルスクリーンレイアウト</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="loader_bg"> <div id="loader"> <h1><img src="img/logo.svg" alt=""></h1> </div> </div> <div id="container"> <div class="top top_L"> <div class="cap"> <h2>画像の見出し</h2> <p>説明文</p> <p><a href="#">リンク</a></p> </div><!--/.cap--> </div><!--/.top top_L--> <div class="top top_R"> <div class="cap"> <h2>画像の見出し</h2> <p>説明文</p> <p><a href="#">リンク</a></p> </div><!--/.cap--> </div> <div class="bottom btm_L"> <div class="cap"> <h2>画像の見出し</h2> <p>説明文</p> <p><a href="#">リンク</a></p> </div><!--/.cap--> </div> <div class="bottom btm_C"> <div class="cap"> <h2>画像の見出し</h2> <p>説明文</p> <p><a href="#">リンク</a></p> </div><!--/.cap--> </div> <div class="bottom btm_R"> <div class="cap"> <h2>画像の見出し</h2> <p>説明文</p> <p><a href="#">リンク</a></p> </div><!--/.cap--> </div> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ html,body,h1,h2,p { margin:0; padding:0; line-height:1.0; } a { text-decoration:none; color:#FFF; } img { vertical-align:bottom; } #container { overflow:hidden; } .top { width:50%; height:50vh; float:left; } .bottom { width:33.33%; height:50vh; float:left; } .top_L { background:url(img/L1.png) no-repeat center/cover; } .top_R { background:url(img/L2.png) no-repeat center/cover; } .btm_L { background: url(img/S1.png) no-repeat center/cover; } .btm_C { background: url(img/S2.png) no-repeat center/cover; } .btm_R { background: url(img/S3.png) no-repeat center/cover; } /*ホバーアクション*/ .cap { width:100%; height:100%; padding-top:160px; background:rgba(255,0,51,0); transition:0.2s; } h2,p { text-align:center; margin-bottom:60px; color:#FFFFFF; } .cap:hover { padding-top:60px; background:rgba(255,0,51,1); } h1 { width:160px; height:160px; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; } img { max-width:100%; } #loader_bg { width:100%; height:100vh; background:#000000; position:fixed; } /*スマホレイアウト*/ @media screen and (max-width:767px) { .top { width:100%; height:300px; float:none; margin-bottom:200px; position:relative; } .bottom { width:100%; height:300px; float:none; margin-bottom:200px; position:relative; } .cap { width:100%; height:180px; padding-top:20px; transition:none; position:absolute; top:100%; left:0; } h2,p { margin-bottom:20px; color:#000; } a { color:#222; } .cap:hover { padding-top:20px; background:transparent; } }
$(function() { if($(window).width() > 767){ $(function() { $('#container').css('display','none'); $('#loader').fadeIn(300); }); $(window).load(function () { //全ての読み込みが完了したら実行 $('#loader-bg').delay(3000).slideUp(400); $('#loader').delay(2000).fadeOut(1000); $('#container').css('display', 'block'); }); //10秒たったら強制的にロード画面を非表示 $(function(){ setTimeout(stopload(),10000); }); function stopload(){ $('#container').css('display','block'); $('#loader-bg').delay(3000).slideUp(400); $('#loader').delay(2000).fadeOut(1000); }; }else { $('#loader-bg').css('display','none'); } });
css3のfilter機能を使うと今までPhotoshopなどで行っていた画像加工を簡単に加える事が出来ます。
といった感じです。
使用できる効果
使用できる効果は約10 種類あるようです。
grayscale（グレースケール）
0（初期値） - 100[%] を指定してあげることで、画像の表示をグレースケールに変換することができます。
filter: grayscale(100%);
sepia（セピア）
0（初期値） - 100[%] を指定してあげることで、画像の表示をセピア調に変換することができます。
filter: sepia(100%);
saturate（彩度）
0 - 100（初期値）[%] を指定してあげることで、画像の表示の彩度（色の鮮やかさ）を変更することができます。
-webkit-filter: saturate(0%);
filter: saturate(0%);
hue-rotate（色相回転）
0（初期値） - 360[deg] を指定してあげることで、画像の表示の色相を変更することができます。
360deg も指定することができるが、0deg と同じなので元の色相になります。
filter: hue-rotate(360deg);
invert（階調反転）
0（初期値） - 100[%] を指定してあげることで、画像の表示の階調を反転させることができます。
filter: invert(100%);
opacity（透過度）
0 - 100（初期値）[%] を指定してあげることで、画像の表示の透過度を変更することができます。
CSS3 のopacity: XX%;とほぼ同じような効果です。
filter: opacity(0%);
brightness（明るさ）
0 - 100（初期値）[%] を指定してあげることで、画像の表示の明るさを変更することができます。
元画像より暗くしたい場合に使えます。brightness(0%) で画像は真っ黒になります。
filter: brightness(0%);
contrast（コントラスト）
0 - 100（初期値）[%] を指定してあげることで、画像の表示のコントラストを変更することができます。
明るさ同様、コントラストを下げたい場合に使用できます。
filter: contrast(0%);
blur（ぼかし）
0（初期値） - 任意の値[px] を指定してあげることで、画像の表示をぼかすことができます。
filter: blur(3px);
前回の記事でFlexboxの便利さがなんとなく判ったと思います。今回はもう少し具体的な使い方をしていきます。
前回の記事
yachin29.hatenablog.com
今回は
ここで出て来たビューポートは相対的な単位で、それ自身が客観的な大きさを持っていないことを意味し、ビューポートのサイズによって決定されます。
vw ビューポートの幅の1/100
vh ビューポートの高さの1/100
bitsofco.de
<body> <div class="seminar toggle"> <h2><a href="#">セミナー<span class="plus-icon close"></span></a></h2> <dl class="informationLink se"> <dt>2017年2月11日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2017年1月19日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2016年12月14日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2016年10月10日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2016年9月29日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> </dl> </div><!--/seminar--> <div class="information toggle"> <h2><a href="#">お知らせ<span class="plus-icon"></span></a></h2> <dl class="informationLink"> <dt>2017年2月18日</dt><dd><a href="#">採用情報を更新しました</a></dd> <dt>2017年2月11日</dt><dd><a href="#">実績紹介を更新しました</a></dd> <dt>2017年2月1日</dt><dd><a href="#">サービスが紹介されました</a></dd> <dt>2017年1月25日</dt><dd><a href="#">社内ブログを開設しました</a></dd> </dl> </div><!--/information--> </body> </html>
複数の色を組み合わせる場合、バランスが非常に難しく苦戦する人も多いと思います。このツールを使えば、カラーセオリーに基づいた学習型のAIが色の組み合わせをゼロから組み合わせてくれます。また指定色がある場合、その指定色に合った組み合わせを作成することができます。
色選びが苦手な人はぜひ使ってみて下さい。
