フィルター機能とソート機能がついた「MixItUp」
ある程度の数のサムネイルを見せる時にはフィルタリング機能やソート機能を使い、グループ分けしてあげる事がサイトの見易さにつながります。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>MixItUp</title> <link href="style.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script> <script> // On document ready: $(function(){ // Instantiate MixItUp: $('#Container').mixItUp(); }); </script> </head> <body> <div class="controls"> <label>カテゴリー:</label> <button class="filter" data-filter="all">全部</button> <button class="filter" data-filter=".category-1">赤いもの</button> <button class="filter" data-filter=".category-2">緑のもの</button> <button class="filter" data-filter=".category-3">黄色いもの</button> <button class="filter" data-filter=".category-4">くだもの</button> <label>Sort:</label> <button class="sort" data-sort="myorder:asc">番号の小さい順</button> <button class="sort" data-sort="myorder:desc">番号の大きい順</button> </div> <div id="Container" class="container"> <div class="mix category-1" data-myorder="1"><a href="#"><img src="img/01.jpg"></a></div> <div class="mix category-1" data-myorder="2"><a href="#"><img src="img/02.jpg"></a></div> <div class="mix category-1 category-4" data-myorder="3"><a href="#"><img src="img/03.jpg"></a></div> <div class="mix category-2" data-myorder="4"><a href="#"><img src="img/04.jpg"></a></div> <div class="mix category-2 category-4" data-myorder="5"><a href="#"><img src="img/05.jpg"></a></div> <div class="mix category-2" data-myorder="6"><a href="#"><img src="img/06.jpg"></a></div> <div class="mix category-3 category-4" data-myorder="7"><a href="#"><img src="img/07.jpg"></a></div> <div class="mix category-3" data-myorder="8"><a href="#"><img src="img/08.jpg"></a></div> <div class="mix category-3" data-myorder="9"><a href="#"><img src="img/09.jpg"></a></div> <div class="gap"></div> <div class="gap"></div> </div> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ /* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; box-sizing: border-box; } table { border-collapse: collapse; border-spacing: 0; } ul, ol { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ } img { border: 0; vertical-align: bottom; } /*body { overflow-y: scroll; }*/ .controls{ padding: 2%; background: #333; color: #eee; } label{ font-weight: 300; margin: 0 .4em 0 0; } button{ display: inline-block; padding: .4em .8em; background: #666; border: 0; color: #ddd; font-size: 16px; font-weight: 300; border-radius: 4px; cursor: pointer; } button.active{ background: #68b8c4; } button:focus{ outline: 0 none; } button + label{ margin-left: 1em; } .container{ padding: 2% 2% 0; text-align: justify; font-size: 0.1px; background: #68b8c4; -webkit-backface-visibility: hidden; } .container:after{ content: ''; display: inline-block; width: 100%; } .container .mix, .container .gap{ display: inline-block; width: 49%; } .container .mix{ background: #03899c; margin-bottom: 2%; display: none; } .container .mix:after{ /* content: attr(data-myorder);*/ color: white; font-size: 16px; display: inline-block; vertical-align: top; /*padding: 4% 0 6% 0;*/ font-weight: 700; } .container .mix:before{ content: ''; display: inline-block; padding-top: 60%; } img { max-width: 100%; } @media all and (min-width: 420px){ .container .mix, .container .gap{ width: 32%; } } @media all and (min-width: 640px){ .container .mix, .container .gap{ width: 24%; } }
締め切り間近 2017年1月開講クラス募集中です。
東京池袋のフェリカテクニカルアカデミーでは、只今平成29年1月18日より 開講する「Webサイト制作科」の受講生を募集しています。
600時間を超える講座を無料で受講出来、プロになるために必要なスキルを身につける事が出来ます。また、職業訓練受講給付金として給付金を受け取ることが出来ます。(※受給資格がありますので、ご確認下さい。)
詳細に関してはフェリカテクニカルアカデミーに直接お問い合わせ下さい。TEL:03-3981-7201
募集期間:12月8日まで
訓練期間:2017年1月18日 ~ 2017年7月15日
訓練時間:15時55分 ~ 20時50分
フェリカテクニカルアカデミーでは、施設見学会を行っていきます。
施設見学会へのご予約はwebフォームでも受付けております。
ご予約フォームはこちらから
求職者支援訓練とは?
求職者支援制度とは、職業訓練による能力形成を通じ、真剣に就職を目指そうとする方のための制度です。雇用保険を受給できない失業者の方に対し、無料の職業訓練(求職者支援訓練)を実施し、一定の支給要件を満たす場合は、職業訓練の受講を容易にするための給付金を支給するとともに、ハローワークにおいて強力な就職支援を実施することにより、安定した「就職」を実現するための制度です。
求職者支援訓練の受講を希望される方は、まずは求職者支援訓練を受講できる資格があるかご確認ください。不明なことがございましたら、フェリカテクニカルアカデミーに問い合わせいただくか、最寄のハローワークに直接問い合わせしてご確認ください。
求人依頼のある学校
WEBクラスでは、就職支援も熱心に行っています。本校の授業内容や生徒さんのレベルを把握した上で、幾つかの企業様から求人依頼も来ておりますので、授業の修了が近づいた段階で、求人依頼のあった企業に紹介させていただくことも可能です。未経験であっても「エンジニア」「デザイナー」の両分野への就職が可能です。
cssセレクタの指定方法 復習
jQueryの勉強を進めていく上で、cssでのセレクタの取り方の重要性を改めて感じたと思います。
jQueryやCSS3が上手く動かない理由の多くは実はcssでセレクタが正しく指定出来ていない、だったりします。この機会にもう1度cssでのセレクタの指定方法を確認しましょう。
まずはセレクタをしっかりと理解しましょう。
(すべての要素に適用)
アスタリスク(*)ですべての要素にスタイルを適用することができます。
* { color:red; }
この場合、p要素の中にある要素すべてに適用されます。
p * { color:red; }
.〇〇
クラス名を指定した要素にスタイルが適用されます。
<p class="sample">テキストテキスト<p>
.sample { font-size:18px; color:red; }
#〇〇
ID名を指定した要素にスタイルが適用されます。
<p id="sample">テキストテキスト<p>
#sample { font-size:18px; color:red; }
E F (子孫要素に適用)
セレクタを半角スペースで区切ると、ある要素の下の階層にある要素にスタイルを適用します。
html
<p><strong>テキスト</strong></p>
p strong { font-size:16px; }
pタグの中にあるstrong要素に適用されます。
E > F (子要素にのみ適用)
セレクタを「>」で区切ると、ある要素の直下の階層にある要素にスタイルを適用します。
<div class="sample"> <a href="#">リンク1<a/> <ul> <li><a href="#">リンク1<a/></li> </ul> <div>
div.sample > a { font-size:18px; font-weight:bold; }
クラス名sampleの直下にあるa要素にのみ適用されます。
その他にも
E + F (隣接している要素に適用)
E ~ F (後にある要素に適用【CSS3】)
などもあります。
確認問題
下記にある既存のjQueryをそのまま使い、以下の動きになるようにHTML・CSSを完成させなさい
- ボタンを押したら300pxの正方形が1秒かけて右下に200px移動
- 背景色が青から赤になるように
- アニメーションのタイミングファンクションは「linear」に設定
- 変形後、もう1度クリックしたら、初期状態に戻るように設定
変形中、ボタンをクリックしても命令を受け付けないように既存のjQueryに記述を追加する
使うjQuery
$(function(){ $('button').on('click', function(){ $('#box').toggleClass('trans'); }); });
動画を背景に使う
最近は動画を背景に使ったWebサイトもよく見かけます。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。
実例
作る際に気を付けるポイント
- 動画ファイルは出来るだけ軽くする。(あくまでイメージなので長さも1分くらいをめどに)
- デフォルトではミュートの設定に
- あくまでも背景なので自動再生とループ再生の設定にする。(自動再生が効かないスマホでは代替え画像を使用する)
<video id="bgvid" autoplay loop muted>
今回作ったページ
http://yachin29.com/video1/
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>動画を背景にする</title> <!--[if lt IE 9]> <script> document.createElement('video'); </script> <![endif]--> <style> body, div, h1, p, video { margin: 0; padding: 0; } video#bgvid { position: fixed; left: 0; top: -150px; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background: url(XXXX.jpg) no-repeat; /*動画が表示されない場合の代替画像*/ background-size: cover; display: block; /*IE8以下の為*/ } #container { width: 100%; height: 100%; overflow: hidden; background: rgba(231, 76, 60, 0.2); } .overlay { background: rgba(0,0,0,0.3); color: #FFF; margin: 40px; padding: 20px; width: 400px; border-radius: 10px; float: left; } </style> </head> <body> <video id="bgvid" autoplay loop muted> <source src="dawsonfalls.mp4" type="video/mp4"> </video> <div id="container"> <div class="overlay"> <h1>動画を背景にする</h1> <p>テキスト・テキスト・テキスト</p> </div> </div> </body> </html>
無料の動画ライブラリーサイト
動画ライブラリー
最近は無料の動画ライブラリーも増えてきたので、上手く使いましょう。
固定カラムレイアウトをフルードグリッドにする
授業で作った固定カラムレイアウトのCSSファイルを書き換えて、フルードグリッドにします。
フルードグリッド
フルードグリッドは、Webページの要素を罫線や升目に沿って配置する「グリッドデザイン(Grid Design)」と、ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズを調整する「フルードデザイン(Fluid Design)」を合わせたものです。レスポンシブWebデザインでは、最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を%に変換してフルードデザインに変更します。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>演習:フルードグリッド</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </head> <body id="top"> <div id="container"> <div class="column"> <header> <h1 class="size-2x2"><img src="img/logo01.png" alt=""></h1> <nav> <ul> <li class="size-1x1"><a href="#"><img src="img/nav01_01.png" alt="CONCEPT"></a></li> <li class="size-1x1"><a href="#"><img src="img/nav02_01.png" alt="MENU"></a></li> <li class="size-1x1"><a href="#"><img src="img/nav03_01.png" alt="ACCESS"></a></li> <li class="size-1x1"><a href="#"><img src="img/nav04_01.png" alt="NEWS"></a></li> </ul> </nav> </header> <ul> <li class="size-2x2"><img src="img/ph01_l.jpg" alt=""></li> <li class="size-1x2"><img src="img/ph02_mt.jpg" alt=""></li> <li class="size-1x1"><img src="img/ph03_s.jpg" alt=""></li> <li class="size-1x1"><img src="img/ph04_s.jpg" alt=""></li> <li class="size-2x1"><img src="img/ph05_my.jpg" alt=""></li> <li class="size-1x1"><img src="img/ph06_s.jpg" alt=""></li> <li class="size-1x1"><img src="img/ph07_s.jpg" alt=""></li> </ul> </div> <div class="column"> <ul> <li class="size-2x1"><img src="img/ph08_my.jpg" alt=""></li> <li class="size-1x1"><img src="img/ph09_s.jpg" alt=""></li> <li class="size-1x1"><img src="img/ph10_s.jpg" alt=""></li> <li class="size-2x2"><img src="img/ph11_l.jpg" alt=""></li> <li class="size-1x1"><img src="img/ph12_s.jpg" alt=""></li> <li class="right size-1x2"><img src="img/ph13_mt.jpg" alt=""></li> <li class="size-1x1"><img src="img/ph14_s.jpg" alt=""></li> <li class="size-2x2"><img src="img/ph15_l.jpg" alt=""></li> <li class="size-1x1"><img src="img/ph16_s.jpg" alt=""></li> <li class="size-1x1"><img src="img/ph17_s.jpg" alt=""></li> <li class="size-2x1"><img src="img/ph18_my.jpg" alt=""></li> </ul> </div> <div class="column three"> <ul> <li class="size-2x2"><img src="img/ph19_l.jpg" alt=""></li> <li class="size-1x1"><img src="img/ph20_s.jpg" alt=""></li> <li class="right size-1x2"><img src="img/ph21_mt.jpg" alt=""></li> <li class="size-1x1 odd"><img src="img/ph22_s.jpg" alt=""></li> <li class="size-1x1"><img src="img/ph23_s.jpg" alt=""></li> <li class="size-1x1"><img src="img/ph24_s.jpg" alt=""></li> <li class="size-2x1"><img src="img/ph25_my.jpg" alt=""></li> <li class="size-1x1"><img src="img/ph26_s.jpg" alt=""></li> <li class="size-1x1"><img src="img/ph27_s.jpg" alt=""></li> <li class="size-1x1"><img src="img/ph28_s.jpg" alt=""></li> <li class="size-1x1"><img src="img/ph29_s.jpg" alt=""></li> <li class="size-2x2"><img src="img/ph30_l.jpg" alt=""></li> </ul> <footer id="sp"><p><small>Copyright © 2016 ○○○ All Rights Reserved.</small></p></footer> </div> <p><a id="bottom" href="#top">TOPに戻る</a></p> </div><!-- /#container --> <footer id="pc"><p><small>Copyright © 2016 ○○○ All Rights Reserved.</small></p></footer> </body> </html>
style.css
/*====reset======*/ html, body, h1, ul, li, p, header, nav, footer { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } a { text-decoration: none; } img { border: none; vertical-align: bottom; } /* layout =========================*/ #container { width: 960px; margin: 10px auto; overflow: hidden; } .column { width:320px; float: left; } h1 { margin: 10px; } ul { width:320px; overflow:hidden; } li{ margin: 10px; float: left; overflow:hidden; } .right { float: right; } footer#pc { width: 100%; height: 50px; background: #281605; } footer#pc p { text-align: center; color: #FFF; font-size: 18px; line-height: 50px; } footer#sp { display: none; } /*TOPに戻るボタン*/ a#bottom { position: fixed; bottom: 65px; right: 7%; z-index: 9999; width: 60px; height: 60px; display: block; background:url(../img/to-top.png); text-indent: 100%; white-space: nowrap; overflow: hidden; opacity: 0.3; } a#bottom:hover { opacity: 0.8; } /*===レスポンシブ対応===*/ @media screen and (max-width:959px){ #container { width: 98%; /*960px÷980px =0.98× 100 = 98%*/ margin: 1%; /*100%-98%(widthの幅)=2%*/ } .column { width: 33.33%; /*3つある.columnを3等分にした%幅*/ } h1 { width:93.75%; /*header幅100%に対し両方のマージン分の6.25%を引いた値*/ margin: 3.125%;/*10px ÷ 320px(親要素のheaderの幅) × 100*/ } ul { width:100%; } li{ margin: 3.125%; } .size-2x2 { width:93.75%;/*300px÷320px*/ } .size-2x1 { width:93.75%; } .size-1x2 { width: 43.75%; /*縦長の画像の幅140pxを親要素のulの幅(320px)で割った値*/ } .size-1x1 { width: 43.75%; } .odd { width:43.5%; } img { max-width: 100%; } } @media screen and (max-width:640px){ #container { width: 320px; margin: 10px auto; } .column { width: 100%; float: none; } }