WEBサイト制作の勉強

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

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

スクロール位置に応じてナジゲーションボタンにカレント表示をする

ある程度スクロールする必要がある縦長ページでは現在地を示すようにナジゲーションボタンにカレント表示をした方が良いでしょう。
各要素の「.offset().top」の位置を取得し、if文を使い、各要素の開始位置以上スクロールしたら、その要素にaddClassします。


参考サイト
www.e-creators.net


www.nagahama-kannon-house.jp


「offset().top」と「scrollTop()」の違い

offset().topとは特定のHTML要素が配置されている座標を取得するのに使われるメソッドで、scrollTop()はスクロールした量を取得するメソッド

scrollTop

「scrollTop()」を使用した場合、要素の最上部から縦スクロールした現在位置までのピクセル数を取得します。
{ scrollTop: 0 }であればtopから0ピクセルの位置で停止、{ scrollTop:100}であればtopから100pxの位置で停止します。

$(window).scroll(function() {
console.log($(this).scrollTop());
})
offsetメソッド

document内に配置した要素の位置を座標で取得できるメソッドになります。「top(Y座標)」と「left(X座標)」が取得出来ます

var Pos=$('#box').offset().top;
console.log(Pos);







HTML部分

<header>
<nav id="g-nav">
<ul>
<li id="list01" class="current"><a href="#content01">コンテンツ1</a></li>
<li id="list02"><a href="#content02">コンテンツ2</a></li>
<li id="list03"><a href="#content03">コンテンツ3</a></li>
<li id="list04"><a href="#content04">コンテンツ4</a></li>
</ul>
</nav>
</header>

<div id="content01" class="box">
コンテンツ1
</div>
<div id="content02" class="box">
コンテンツ2
</div>
<div id="content03" class="box">
コンテンツ3
</div>
<div id="content04" class="box">
コンテンツ4
</div>


jQuery部分

$(window).on('load resize',function(){
  var pos01 = 0;
  var pos02 = Math.round($("#content02").offset().top);
  var pos03 = Math.round($("#content03").offset().top);
  var pos04 = Math.round($("#content04").offset().top);

  $(window).on('load resize scroll',function(){
    var posScroll = $(window).scrollTop();
    if(pos01 <= posScroll && posScroll < pos02) {
      $("#list01").addClass('current').siblings('li').removeClass('current');
    } else if(pos02 <= posScroll && posScroll < pos03) {
     $("#list02").addClass('current').siblings('li').removeClass('current');
    } else if(pos03 <= posScroll && posScroll < pos04) {
     $("#list03").addClass('current').siblings('li').removeClass('current');
    } else if(pos04 <= posScroll && posScroll) {
     $("#list04").addClass('current').siblings('li').removeClass('current');
    }
  });
});



liginc.co.jp

ajaxを使った非同期通信

Ajaxとは「Asynchronous(エイシンクロナス) JavaScript + XML」の略です。簡単に言えばJavaScriptXMLを使って非同期にサーバとの間の通信を行うことが出来ます。
通常Webページの内容を変更するためには画面遷移やリロードする必要がありますが、ajaxを使用すればリロードせずにページの内容を変更することができます。
サーバーにアクセスすることなくページを変更できるのでサーバーの負荷軽減や、リロードの時間の解消によるUX(ユーザーエクスペリエンス)の向上などが利点としてあげられます。


jQueryでは$.loadと$.ajaxの2種類の方法があります。


$.loadを使って外部ファイルを読み込む

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>loadを使った非同期通信</title>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$(function(){
  $('#text').load('list.txt');
 });
</script>
</head>
<body>
<div>
<ul id="text"></ul>
</div>
</body>
</html>


list.txt

<li>テスト1</li>
<li>テスト2</li>
<li>テスト3</li>
<li>テスト4</li>
<li>テスト5</li>


$.ajaxを使った方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS overflow</title>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$(function() {
 $.ajax({
	url: 'list.txt',
	dataType: 'text',
	success: function(data) {
	$('#text').html(data);
	},
	error: function(data) {
		alert('error');
	}
 });
});
</script>
</head>
<body>
<div>
<ul id="text"></ul>
</div>
</body>
</html>


www.sejuku.net

ヒーローヘッダーを使ったサイト制作

f:id:yachin29:20170209004414j:plain






最近、よく見かける「1枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。
「ヒーローヘッダー」と呼ばれています。

ヒーローヘッダー(Hero Header)とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージで構成されたウェブサイトのことを指します。

2014年頃から海外のウェブデザインにてトレンド的にかなり増えてきている手法です。
巨大な画像により、イメージを強く植えつけることができる反面、写真のクオリティ次第でウェブサイト全体の印象を悪くすることも有りますので、フラットデザイン同様簡単そうでデザインセンスの問われるデザイン要素となっています。


参考サイト
http://racines-park.com/



ferret-plus.com


こういったレイアウトを作る際の1番のポイントは、用意する画像の大きさです。
自分のPCでは綺麗にフルスクリーンで表示されるけど、別のPCでは写真が見切れてしまっていたり、逆に余白が出てしまったり、という事が起こります。

ビットマップのデータをすべてのディスプレイでピッタリの大きさに合わせるという事は基本的に無理なので、ある大きさで書き出した画像をCSSで拡大・縮小していきます。

img要素の場合は前回やったようにフルードイメージ化する事で画像を可変にしましたが、background画像の場合は「background-size」というプロパティを使って、拡大・縮小していきます。



今回のようにフルスクリーンで画像を表示したい場合、絶対的に決まった大きさはありませんが、一番シェアの多いモニターの解像度で作るのが無難です。
モニター解像度のシェア(2017年1月現在)
f:id:yachin29:20170512100245p:plain

画面のアスペクト比も、以前の「4 : 3」のスクエア型から「16:9」と「16:10」といったワイド型が大半を占めているのが解ります。
f:id:yachin29:20170512112150p:plain

求職者支援訓練 【はじめてのwebサイト制作科】 2020年4月開講クラス

f:id:yachin29:20200228021204p:plain


www.felica.info

東京池袋のフェリカテクニカルアカデミーでは、只今2020年4月16日より 開講する「はじめてのwebサイト制作科」の受講生を募集しています。
600時間を超える講座を無料で受講出来、プロになるために必要なスキルを身につける事が出来ます。また、職業訓練受講給付金として給付金を受け取ることが出来ます。(受給資格がありますので、ご確認下さい。)
詳細に関してはフェリカテクニカルアカデミーに直接お問い合わせ下さい。TEL:03-3981-7201

募集期間:3月16日まで

訓練期間:2020年4月16日 ~ 2020年10月15日

訓練時間:15時40分 ~ 20時35分


www.felica.info



フェリカテクニカルアカデミーでは、施設見学会を行っていきます。
施設見学会へのご予約はwebフォームでも受付けております。

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

www.felica.info





求職者支援訓練とは?

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

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


円楽とシロのハロートレーニング(求職者支援制度)





Web制作の現場に行けるインターンシップ制度の導入

フェリカでは、Web制作会社を中心にインターンシップ制度を導入しています。学校に通いながら、空き時間に実際の職場へ行き、現場で求められるスキルや会社の雰囲気を肌で感じる機会を設けています。インターン先で就職というケースも実績として非常に多いです。入校した際には是非チャレンジしてください。


どんな授業を行うの?

デザインやプログラムがはじめての方でも基礎からしっかり学ぶことができます。今までも様々な経歴の方々が受講されてきましたが、講師がしっかりサポートするので真剣に学べば立派なWEBサイトが作れます。

求人募集がある訓練校

授業内容や受講生のレベルを把握し、希望する方向性を話し合った上で、求人依頼のあった企業に紹介することができます。また、資格を持ったキャリアコンサルタントへ受講生一人ひとりが相談できる環境になっています。


新しい技術

GitやSASSといった、現場で求められる新しいスキルなども積極的に授業で取り入れていきます。

f:id:yachin29:20180728033807p:plainf:id:yachin29:20190813035820p:plain


スマホサイト制作

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

スムーススクロールの実装

jQueryのanimate機能を使ってスムーススクロールを実装します。

scrollTop

「scrollTop()」を使用した場合、要素の最上部から縦スクロールした現在位置までのピクセル数を取得します。
{ scrollTop: 0 }であればtopから0ピクセルの位置で停止、{ scrollTop:100}であればtopから100pxの位置で停止します。

$(window).scroll(function() {
console.log($(this).scrollTop());
})

「offset().top」と「scrollTop()」の違い

offset().topとは特定のHTML要素が配置されている座標を取得するのに使われるメソッドで、scrollTop()はスクロールした量を取得するメソッド

var Pos=$('#box').offset().top;
console.log(Pos);
タイミング

jQueryでのアニメーションタイミングは'linear' か、'swing' の2種類のみです。
linear = 常に同じ速度
swing = 始めゆっくり、途中が速め、最後はゆっくり(山なり)※デフォルト

トップに戻るボタン

サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。

$(function() {
  $('#btn a').on('click', function () {
    $('html,body').animate({ scrollTop: 0 });
 return false;
    });
});
停止位置100px、スピード300ミリ秒、タイミング「linear」の場合
$(function() {
  $('#btn a').on('click', function () {
    $('html,body').animate({ scrollTop: 100},300, 'linear');
    return false;
    });
});

複数の場所にスムーススクロールしたい場合


#がついている全てにスムーススクロールさせる場合

$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^="#"]').on('click',function() {
     // 移動先を取得
      var href= $(this).attr('href');
      var target = $(href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, 300, 'swing');
      return false;
   });
});
正規表現を加えた形
$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^="#"]').on('click',function() {
  
    // 移動先を取得
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, 300, 'swing');
      return false;
   });
});

この部分ですが、

$(href == "#" || href == "" ? 'html' : href);


?は三項演算子と言い、if文を1行にまとめた形になります。

例:A ? B : C
条件Aの時はB、それ以外の時はCという形になります。

今回の形は

if(href == "#" || href == "") { 
   'html' 
} else {
   href
}

これと同じということになります。

は論理演算子のor なので、

日本語に直せば、「hrefの中の値が"#"または空のときは"html"、そうでないときはhref」です。

位置の取得

position()は、親要素から見た座標を取得します。 offset()は、親要素関係なく、documentから見た座標を取得します。
さらに複数回使う要素は変数に置き換えた方が効率的なので記述するパターンも覚えておきましょう。


以下はターゲット要素より、50px上にスクロールするサンプルです。
var position = target.offset().top - 50;



通常であれば以上の記述で良いのですが、以上の記述では「#」がついているアンカーポイントには全てスムーススクロールでリンクされてしまいます。

特定のリンクを除外する場合
$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^="#"]').not('a.notscroll').on('click',function() {
     // 移動先を取得
      var href= $(this).attr('href');
      var target = $(href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, 300, 'swing');
      return false;
   });
});

スクロールイベントの追加

場合によってはある程度スクロールしてから表示させたい場合もあります。
その場合、まず「.hide」で見せなくさせて、ある条件(今回の場合は何pxスクロールしたら)になったら、
「.fadeIn」で表示させ、ある条件以外の時は「.fadeOut」で非表示にさせましょう。

ある程度スクロールしたらボタンを表示させる
    $('#to_top').hide();
    //スクロールが100に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#to_top').fadeIn();
        } else {
            $('#to_top').fadeOut();
        }
    });

jQueryの「animate」メソッドを使ったアニメーション

animateメソッドとは?
jQueryのanimateメソッドを使うと簡単にアニメーション(値を変化)させることが出来ます。
animateメソッドは値で指定出来る物(margin、color、width、positionなど)に対し有効です。

$('#box').animate({
    'left': '500px',
    'top': '300px'
});
メソッドチェーンを使い、順番に処理を行う
$('#box').animate({'left': '500px'}).animate({'top': '300px'});
速度を調節する

「slow」「normal」「fast」の文字列を指定するか、直接数値で指定します。

$('#box').animate({
    'left': '500px',
    'top': '300px'
},1000);
イージングの設定

イージングの設定をすれば「徐々に速くなる」などアニメーションに変化をつけることができます。
標準では「linear」と「swing」の2種類しかありません。「jQuery Easing Plugin」などを導入することでバリエーションが増えます。

$('#box').animate({
    'left': '500px',
    'top': '300px'
},1000, 'linear')
アニメーションの終了後に何かする
$('#box').animate({
     'left': '500px',
    'top': '300px'
},1000, 'linear', function(){
     alert('終わりました');
    });


このようにjQuery.animate() は大変便利ですが、CSS3の「transition」と「transform」を使うことで同じようなアニメーションがよりスムーズに動かす事が出来ます。「transform」の場合、GPUを使って処理される為、CPUを使って処理される「jQuery.animate()」よりCPUに負荷がかからなくなるので、レンダリングの高速化につながります。
ただ、GPUは処理するたびにメモリ(VRAM)を消費していきます。メモリは有限なので足りなくなると、CPUで処理しなくてはならない部分が増えてしまい、逆に処理が遅くなってしまうこともあ流ので注意が必要です。




Webサイトのパフォーマンス改善を行うためにGPU処理を取り入れてみた | un-Tech