WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

ホームシアター壁面収納 オーダー家具｜東京木工所

受講生の作品

ホームシアター壁面収納 オーダー家具｜東京木工所

ホームシアター壁面収納 オーダー家具｜東京木工所　魅せる収納で床に物を置くのやめました。 1950年創業 亀戸の小さな木工所 設計、製作、施工、地震対策まで全て行います.

tokyo-moccoh.la.coocan.jp

http://tokyo-moccoh.la.coocan.jp/


f:id:yachin29:20161208100131p:plain

フィルター機能とソート機能がついた「MixItUp」

jQueryプラグイン

ある程度の数のサムネイルを見せる時にはフィルタリング機能やソート機能を使い、グループ分けしてあげる事がサイトの見易さにつながります。


f:id:yachin29:20160204200022p:plain


mixitup.kunkalabs.com

 

<!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フォームでも受付けております。

ご予約フォームはこちらから

www.felica.info



求職者支援訓練とは？

求職者支援制度とは、職業訓練による能力形成を通じ、真剣に就職を目指そうとする方のための制度です。雇用保険を受給できない失業者の方に対し、無料の職業訓練（求職者支援訓練）を実施し、一定の支給要件を満たす場合は、職業訓練の受講を容易にするための給付金を支給するとともに、ハローワークにおいて強力な就職支援を実施することにより、安定した「就職」を実現するための制度です。

求職者支援訓練の受講を希望される方は、まずは求職者支援訓練を受講できる資格があるかご確認ください。不明なことがございましたら、フェリカテクニカルアカデミーに問い合わせいただくか、最寄のハローワークに直接問い合わせしてご確認ください。

 


求人依頼のある学校

WEBクラスでは、就職支援も熱心に行っています。本校の授業内容や生徒さんのレベルを把握した上で、幾つかの企業様から求人依頼も来ておりますので、授業の修了が近づいた段階で、求人依頼のあった企業に紹介させていただくことも可能です。未経験であっても「エンジニア」「デザイナー」の両分野への就職が可能です。

 

どんな授業を行うの？

デザイン

このクラスではwebサイトを「ユーザーが使う製品」と考え、その製品に伴うデザインは個人の思いつきや突然のヒラメキで作るものでは無く、ある種のガイドラインに沿った物であるべき、という考え方を元に、経験者であっても未経験者であってもAppleやGoogleなど各メーカーのデザイン・ガイドラインを参考にして、制作を進めていきます。

f:id:yachin29:20161121130447j:plain




スマホサイト制作

最近では、Google検索を使用しているほとんどのユーザーは、モバイル端末から検索を行うようになっています。Googleだけでなく、多くのサイトでPCよりもスマートフォン利用者の方が多い現在、今まで以上にスマホサイトが重要になってきます。
この授業ではGoogleが推奨する「レスポンシブデザイン」や「動的な配信」でのサイト制作を学ぶ事が出来ます。
また、モバイルファーストインデックス （MFI）といった、最近の考え方やアルゴリズムも学び、よりスマートフォンに適したUI・UX設計を行っていきます。

http://thana531223.webcrow.jp/vogue/


f:id:yachin29:20161026201426p:plain



f:id:yachin29:20161027204011p:plain

cssセレクタの指定方法　復習

jQuery HTML5+CSS3

jQueryの勉強を進めていく上で、cssでのセレクタの取り方の重要性を改めて感じたと思います。
jQueryやCSS3が上手く動かない理由の多くは実はcssでセレクタが正しく指定出来ていない、だったりします。この機会にもう1度cssでのセレクタの指定方法を確認しましょう。


まずはセレクタをしっかりと理解しましょう。
f:id:yachin29:20161202113143p:plain

（すべての要素に適用）

アスタリスク（*）ですべての要素にスタイルを適用することができます。

* {
  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');
});
});

動画を背景に使う

HTML5+CSS3

最近は動画を背景に使ったWebサイトもよく見かけます。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。




実例

www.joe-san.com


optimo.com


www.kalexiko.com


poolhouse.co



作る際に気を付けるポイント
  • 動画ファイルは出来るだけ軽くする。（あくまでイメージなので長さも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; /*IE８以下の為*/
}
#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>

yachin29.hatenablog.com