小金井にあるWEB制作会社の備忘録

キャッチコピーなどを効果的に見せたいときに使用したタイピング風に一文字づつ文字を表示される方法をメモ。複数行にも対応しているので文字の大きさも自由に変更できる。 HTML <p><small class="typ_first">jQueryでテキストを</small><span class="typ_second">タイピング風に一文字ずつ表示</span></p> CSS p { font-size: 6rem; } p small { font-size: 2.8rem; display: block; margin: 0 0 10px; } .typ_first, .typ_second { opacity: 0; } .typ_first span, .typ_second span { opacity: 0; } jQuery var speed = 75; //表示速度 //文字変換 var typ_first = $('.typ_first').text().split(''); var textbox01 = ''; $.each(typ_first, function(){ textbox01 += '<span>'+this+'</span>' }); $('.typ_first').html(textbox01); $('.typ_first').css({'opacity':1}); var typ_second = $('.typ_second').text().split(''); var textbox02 = ''; $.each(typ_second, function(){ textbox02 += '<span>'+this+'</span>' }); $('.typ_second').html(textbox02); $('.typ_second').css({'opacity':1}); //タイピング処理 function typing(name){ for (var i = 0; i <= $(name).children().size(); i++) { $(name).children('span:eq('+i+')').delay(speed*i).animate({'opacity':1}, speed); }; } //非同期処理部分 function func(){ var d = new $.Deferred; typing('.typ_first'); setTimeout(function(){ d.resolve(); }, speed*$('.typ_first').children().size()); return d.promise(); } var promise = func(); promise.done(function(){ typing('.typ_second'); }); 「split」関数を使って対象の文字を、一文字ずつ分解してから「span」タグで囲み、元の位置に再配置。今回は上段を表示してから下段を表示したいので「非同期処理」を利用。 サンプル 「実行」をクリックでタイピング風に表示。 function typingword(){ var speed = 75; //表示速度 var typ_first = $('.typ_first').text().split(''); var textbox01 = ''; $.each(typ_first, function(){ textbox01 += ''+this+'' }); $('.typ_first').html(textbox01); $('.typ_first').css({'opacity':1}); var typ_second = $('.typ_second').text().split(''); var textbox02 = ''; $.each(typ_second, function(){ textbox02 += ''+this+'' }); $('.typ_second').html(textbox02); $('.typ_second').css({'opacity':1}); function typing(name){ for (var i = 0; i

採用サイトを作成した際に、ページ遷移にアクセントをつけたくて実装した開閉アニメーションの方法をメモ。実例はランディングページ（LP）なので、コンテンツをページで分けているサイトでは調整が必要。 HTML <nav class="gnav"> <ul> <li><a href="">○○○○</a></li> <li><a href="">○○○○</a></li> <li><a href="">○○○○</a></li> <li><a href="">○○○○</a></li> <li><a href="">○○○○</a></li> </ul> </nav> <article id="slider"> <div id="filter_left"></div> <div id="filter_right"></div> <section> コンテンツを記載 </section> </article> CSS #filter_left{ background: #017b32; width: 50%; display: block; position: fixed; top: 0; z-index: 13; } #filter_right{ background: #017b32; width: 50%; display: block; position: fixed; top: 0; z-index: 13; } jQuery var winH = $(window).height(); var modalW = ($(window).width())/2; $('.gnav a').click(function(){ $('#filter_left').css({'left':'-'+modalW+'px', 'height':winH+'px'}).animate({'left':'0'}, {duration:'slow', easing:'swing', complete:function(){ // ここにページ内遷移のスクリプトを記載（省略） setTimeout(function(){ $('#filter_left').animate({left:'-'+modalW+'px'},{duration:'slow', easing:'swing', complete:function(){ $('#filter_left').css({'height':'0'}); }}); }, 250); }}); $('#filter_right').css({'right':'-'+modalW+'px', 'height':winH+'px'}).animate({'right:0'}, {duration:'slow', easing:'swing', complete:function(){ setTimeout(function(){ $('#filter_right').animate({right:'-'+modalW+'px'}, {duration:'slow', easing:'swing', complete:function(){ $('#filter_right').css({'height':0}); }}); }, 250); }}); return false; }); 求人・採用情報｜ケッズトレーナー

サイト内で画像などを複数並べてアニメーションさせる場合に、一度にアニメーションを適応させるのではなく、画像を1枚ずつ時間をずらして（遅延して）アニメーションさせる方法をメモ。 HTML <ul class="list"> <li><img src="./img01.jpg"></li> <li><img src="./img02.jpg"></li> <li><img src="./img03.jpg"></li> </ul> jQuery $('.list li').each(function(i){ $(this).delay(i * 100).animate({opacity:'1'}, 1000); }); 「delay」の数字の部分が遅延時間（1 / 1000秒）「addClass」を使ったアニメーションを行う場合は遅延処理が行われず、一度に適応されてしまうので、下記のとおり「queue」を使用する。 $('.list li').each(function(i){ 　　$(this).delay(i * 100).queue(function(next) { 　　　　$(this).addClass('active'); 　　　　next(); 　　}); }); また、順序を逆順に行う場合は下記。 $($('.list li').get().reverse()).each(function(){ $(this).delay(i * 100).animate({opacity:'1'}, 1000); });

ランディングページ（LP）では、どこのサイトでも使用されているページ内リンクでのスムーススクロール。ページ内はもちろん、別ページからの遷移時にも使用することも多いので、実装方法をメモ。 HTML <nav> <ul> <li><a href="#target01">○○○○/a></li> <li><a href="#target02">○○○○</a></li> <li><a href="#target03">○○○○</a></li> <li><a href="○○○○">○○○○</a></li> <li><a href="○○○○">○○○○</a></li> </ul> </nav> … <main> <article> <section id="target01">遷移先のコンテンツ部分01</section> <section id="target02">遷移先のコンテンツ部分02</section> <section id="target03">遷移先のコンテンツ部分03</section> </article> </main> … 遷移先のリンクをハッシュタグ（#）で、コンテンツ部分を「id」で設定。 jQuery //ページ内での移動 $('header nav ul li a').click(function(){ var $href = $(this).attr('href'); if($href.indexOf('#') >= 0) { var hashary = $href.split('#'); var position = $('#'+hashary[hashary.length -1]).offset().top; $('body,html').animate({scrollTop:position}, 500, 'swing'); return false; } }) //外部ページからの移動 $(window).load(function(){ var $hash = location.hash; if($hash != ''){ var position = $($hash).offset().top; $('body,html').animate({scrollTop:position}, 500, 'swing'); return false; } }) 「attr('href')」または「location.hash」で遷移後のURLの#以下の値を取得。値がある場合に限り「scrollTop:position」で取得値が設定されているタグの冒頭に移動。「$(window).load(function(){」とページ読み込み後に処理を行うのは、画像の高さを取得してからでないと、移動位置がずれるため。 ヘッダー部分を固定している場合は「var position」の値から固定部分の値をマイナスする。 // ○○pxと値が分る場合 var position = $($hash).offset().top - ○○px; // 値が変わる（不定）の場合○○○○と指定タグで取得する var position = $($hash).offset().top - $('○○○○').height(); SOCKSTAR(ソックスター)

メニューの項目数が増えてくると一度で全てを表示するのは難しい。だからといってカテゴリーに分けて何度も読み込みをさせるのもユーザーに対しては親切でない。そんな時に便利な「jquery」で実装可能な開閉式のメニュー(プルダウンメニュー)のメモ。 HTML <nav> <ul> <li><a href="○○○○">○○○○</a></li> <li> <a href="○○○○">○○○○</a> <ul> <li><a href="○○○○">○○○○</a></li> <li><a href="○○○○">○○○○</a></li> </ul> </li> <li> <a href="○○○○">○○○○</a> <ul> <li><a href="○○○○">○○○○</a></li> <li><a href="○○○○">○○○○</a></li> <li> <a href="○○○○">○○○○</a> <ul> <li><a href="○○○○">○○○○</a></li> <li><a href="○○○○">○○○○</a></li> <li><a href="○○○○">○○○○</a></li> </ul> </li> </ul> </li> </ul> </nav> jQuery $(function(){ $('nav li a').next('ul').hide(); $('nav li a').click(function(){ var checkElement = $(this).next('ul'); if(checkElement.length && !checkElement.is(':visible')){ checkElement.slideDown('srow'); return false; }else if(checkElement.length && checkElement.is(':visible')){ checkElement.slideUp('srow'); return false; } }); }); 表示するターゲットを「$(this).next('ul').length」で判定し、あれば起動、なければそのままクリック。階層が深くなってもHTMLの追加のみで対応可能。初期状態の表示をCSS（display: none;）にする場合は、「$('nav li a').next('ul').hide();」は不要。 オンマウスの場合は下記 $(function(){ $('nav li').children('ul').hide(); $('nav li').hover(function(){ if($(this).children('ul').length){ $(this).children('ul').stop(true,false).slideDown('srow'); } },function(){ if($(this).children('ul').length){ $(this).children('ul').stop(true,false).slideUp('srow'); } }); });

病院のホームページ制作に携わった際に使用したループスライダーの実装方法をメモ。個々の画像をじっくりと見てもらうというようりは、色々なサービスを展開してる場合に、まずは一通り見せて、興味を引きたい時などに便利です。 「ループスライダー」の実装方法 ループスライダーの実装には「jQuery」を利用。まずは外部ファイルを使用するサイトの「head」タグ内にコードを記載。その後、以下のソースコードで実装。 jQueryの設置方法は下記サイトで確認。 jquery HTML .loopSlider　スライダーの表示枠（動かない枠部分）.loopslider_wrap　スライダーの可動枠 <div class="loopSlider"> <div class="loopslider_wrap"> <ul> <li><img src="○○○○" width="100%"></li> <li><img src="○○○○" width="100%"></li> <li><img src="○○○○" width="100%"></li> <li><img src="○○○○" width="100%"></li> <li><img src="○○○○" width="100%"></li> <li><img src="○○○○" width="100%"></li> </ul> </div> </div> <script> $(function(){ loopTopSlider(); loopsliderPosition(); }); </script> CSS 基本的に「 表示枠 < 可動枠 」なので「overflow: hidden;」で見えては困る部分を見えなくする。また、「position」プロパティを使うため、枠の高さも設定。 .loopSlider{ height: 230px; overflow: hidden; position: relative; } .loopSlider .loopslider_wrap{ height: 230px; display: -webkit-flex; display: flex; position: absolute; top: 0; left: 0; } .loopSlider .loopslider_wrap ul{ display: -webkit-flex; display: flex; } .loopSlider .loopslider_wrap ul li{ width: 324px; } jQuery スライダー画像の全体幅を「sliderSize」として取得してから、取得値を2倍したものをスライダーの可動枠の幅に設定。「clone」関数でスライダー画像を複製して、スライダー画像の末尾に追加。60000秒かけて稼働枠を左端から、左方向に移動させていき、複製部分の左端が左端に到達した時点(60000秒 ) で、左端 ( 0 )の位置に戻す。あとはこの動作を「setTimeout」関数で60000秒ごとに繰り返す。見た目はループしているように見えますが、実際は複製した画像が左端で重なるようにして、入れ替えています。 function loopTopSlider(){ var sliderSize = $('.loopSlider .loopslider_wrap ul').width(); $('.loopSlider .loopslider_wrap').css({'width':sliderSize*2+'px'}); $('.loopSlider .loopslider_wrap').find('ul').clone().appendTo('.loopSlider .loopslider_wrap'); }; function loopsliderPosition(){ var sliderSize = $('.loopSlider .loopslider_wrap ul:first-of-type').width(); $('.loopslider_wrap').css({left:'0'}); $('.loopslider_wrap').stop().animate({left:'-'+(sliderSize)+'px'},60000,'linear'); setTimeout(function(){ loopsliderPosition(); },60000); };

構造化データとは、検索エンジンがサイトの内容をきちんと認識できるよう、検索エンジンに対してコンテンツを説明するためにサイトのページに記載されるコードのこと。Googleでもこの仕組みを利用して、検索結果を表示しているので、推奨されている構造化データ「JSON-LD」形式のマークアップの方法をメモ。 構造化データをマークアップする方法 構造化データのマークアップは、構造化データを記載したいHTMLファイルのheadタグ内に専用のコードを直接記載することで可能。 <script type='application/ld+json'> { "@context" : "http://schema.org", "@type" : "WebPage", "name" : "ホームページ制作の株式会社衆｜東京都小金井市", "description" : "東京都小金井市にてホームページの作成・システム開発などWEBで実現可能な制作業務を行っています。多彩なパートナーシップによりホームページ以外の制作（パンフレットや動画、イラスト等）もご相談可能。詳しくは問い合わせフォームもしくはお電話にてお問合せください。", "url" : "https://web.syu-u.com/" } </script> 上記は、当サイトのトップページで実際にマークアップしてるJSON-LDの構造化データ。WEBページとして認識できるよう@typeに「WebPage」のプロパティ（属性）とバリュー（属性値）を使用して構造化データをマークアップ。 構造化データのマークアップの4つの手順 JSON-LDの構造化データは、次の4つのマークアップが基本。 JSON-LDの構造化データマークアップを宣言 JSON-LDの構造化データをマークアップするために、script要素でapplication/ld+jsonを指定。こうすることで、括弧内に有効なJSON-LDの構造化データを記述することができる。 <script type="application/ld+json"> { } </script> @context属性を宣言 @contextのプロパティで、「http://schema.org」を指定して、schema.orgを使った構造化データを記述することを宣言。文字コードの設定のようなもの。 "@context": "http://schema.org", @type属性を指定 @typeのプロパティで、ページの種類を指定。ここの部分を実際に記載するページの種類に合わせて書き換える。 "@type": "WebPage", ページの種類は下記サイトで確認。 プロパティとバリューを記載 @typeで指定した属性値に関連するプロパティ（nameやurlなど）を、必要に合わせて@type以降にマークアップ。プロパティは複数設定可能だが、最後の行はカンマ「,」をつけない。 "name" : "ホームページ制作の株式会社衆｜東京都小金井市", "description" : "東京都小金井市にてホームページの作成・システム開発などWEBで実現可能な制作業務を行っています。多彩なパートナーシップによりホームページ以外の制作（パンフレットや動画、イラスト等）もご相談可能。詳しくは問い合わせフォームもしくはお電話にてお問合せください。", "url" : "https://web.syu-u.com/" プロパティの種類は下記サイトで確認。 構造化データの有効性を確認する方法 構造化データをマークアップしても、正しく記載されていなければ検索エンジンに認識されない。 本番に反映（アップロード）する前に、マークアップした構造化データが正しいかどうかを「構造化データテストツール」で検証。 構造化データテストツール