2020年、当サイトで公開した記事の中からPocketにたくさん登録された記事やツイートされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。

こんにちは！ ＰＨＰであれば、簡単に読み込めすが、今回はＨＴＭＬファイルということで、JavaScriptを使って読み込む方法です。 HTMLファイル側は、ID設定のみ <div id="haader"></div> <div id="footer"></div> そこにJavaScriptで外部ファイルを読み込みます。 $(function(){ $("#header").load("header.html"); $("#footer").load("footer.html"); }); 以上です！

JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。 この記事で学べること デベロッパーツールの使い方 JavaScriptのブレークポイ

WebアプリにしろWebサイトにしろパフォーマンスはとても重要です。どんなに高機能であっても、どんなにデザインが良くても、パフォーマンスが悪ければユーザーは離れてしまいます。 とは言え現場はキツキツのスケジュールで、パフォーマンスにまでこだわる余裕がないよ！パフォーマンスはひとまずできる限りのところまで頑張るよ！となってしまうこともあるかと…。 この問題の解決の糸口はパフォーマンスを良くする手段をどれだけ知っているかです。仕様を決めるとき、デザインを決めるとき、実装するとき、それぞれのフェーズでパフォーマンスを常に意識していると自ずとハイパフォーマンスに近づきます。 というわけで今回はフロントエンドの観点から、イマドキのパフォーマンス改善手法をまとめてみました。イマドキと謳っておきながら2年前くらいの技術が出てきたりして最新の話題でもないのですが。 ちなみに、本題に入る前にWebパフォーマ

以前、パララックス効果(視差効果)を用いたサイトをご紹介しました！ スクロールで動く！パララックスを使用したユニークなサイト このようなかっこいいサイト、つくってみたいですよね！ パララックスの実装をするためにさまざまなプラグインが存在しますが、 今回はプラグインを使わないで、簡単に作成する方法を書いてみたいと思います。 作成の流れとしては 1.スクロール量を取得する 2.positionのCSSを変更して動かす というものです。 デモページ 今回、私がプラグインを使わないで作成したパララックスを用いたサイトはこちら。 パララックスを使用したデモページ 夏も終わるというのにカブトムシですが。 このように、ひとつずつ動きを変えることもできます。 スクロール量を取得、出力する まずはスクロール量を取得、出力してみます。 実際は出力しなくてもいいのですが、今回は表示させてみました。 jQuery

今時のトレンドがうまく取り入れられ、高品質にデザインされたレスポンシブ対応のランディングページ、プロダクトページ、縦長ページ、ポートフォリオ、ブログなど、HTML5/CSS3で作成された商用利用無料のテンプレートを紹介します。 レスポンシブ時のレイアウトの変化、気持ちいい繊細なアニメーションなど勉強にもなりますね。

どうもですよ、フロントエンドエンジニアのはやちですよ( ˘ω˘)✌ 今回はスプライト画像を使用した、アニメーションの実装方法を2つご紹介いたします(´ʘ‿ʘ｀)✌ 実装する前に準備をしよう まず画像が必要ですね。今回はこのような画像を用意いたしました。 1つの絵に対して100×126で作っております。ズレがないようにご注意くださいまし( ˘ω˘)☝ HTML マークアップはこんな感じで、sectionの中のspriteを動かします( ˘ω˘)☝ <section class="section css"> <h2>CSS</h2> <div class="sprite"></div> </section> 準備はこれで以上になります( ˘ω˘)☝ 実装をしよう お次にそれぞれの実装方法をご紹介します( ˘ω˘) CSS3を使用した形での実装方法 CSS3ではanimationを使用します。

jQueryっていろんなセレクターがあって便利ですよね。でもいつも同じセレクターばかり使っていて、実は無駄なコードを書いていません？ 主要なセレクターを一挙解説。ふだんjQueryを使っている人も、おさらいにどうぞ。 本記事はMatt Smith、Tim Severienが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 jQueryのセレクターは、Webページ上の要素の内容を操作したいのか、要素にイベントを追加したいのか、あるいはほかのなにかをしたいのか、の選択に関与します。セレクターはライブラリーの重要な部分を形成します。 記事では、セレクターのすべてをカバーし、使用の際に心に留めておくべき大切なことを紹介します。 jQueryのセレクター セレクターの主な目的は、一定の基準を満たすWebページ上の要素の選択です

アニメーションというか、jQueryでスクロールを監視して数値化し、それをリアルタイムに反映させることで滑らかに動かす方法。スクロール量に連動させているので、スクロールするたびにアニメーションのような滑らかな動きをします。 色々な使い方があると思うけど、ここではwidthの値をリアルタイムに更新し、スクロール量に応じて幅を広げたり狭めたりする方法をのせています。 デモとHTMLとCSS 言葉だけだと説明が難しいので、デモを見てもらうと何をやりたいのか分かるかと思います。とてもシンプルです。※古いIEでは見れません。 DEMO デモでは５種類ありますが、基本的にはスタート位置(CSS)が違うだけで、内容はほとんど同じ。 HTML HTMLは何でも良くて、便宜上、空divの要素を更新するような形にしています。 <div class="contents"> <div class="line"><

こんにちは、T田です。 インターネットのサイトを見ていると、画面をある程度スクロールするとサイドバーや画面上部のメニューが固定されるページを見かけませんか？ 今回は、それを特別なライブラリを使わないで実現する方法をお伝えします。 目次 はじめに 実際のページとソースコード 処理概要とソースコード解説 JQueryを使用しない場合 おわりに １．はじめに このページをPCやタブレットなどの横長の画面で見ていただいている方は、サイドバーにSNSのボタンが 表示されているはずです。 これらのボタンも、画面をある程度スクロールすると画面上部に固定されるようになっています。 これは、記事を最後まで読んでいただいた方にボタンを押していただく機会を逃さないようにするためです。 SNSのボタン以外にも、ヘッダメニューやフッタメニューを固定する方法にも応用できますので ぜひ参考にしていただければと思います。

メソッドは他にもたくさんあるのですが、とりあえず最初はこの位覚えておけば良いと思います。 jQueryの実行タイミング jQueryを動作させたいのはどういうときでしょうか。例えば、ページを読み込んだとき？それともある要素をクリックまたはタップしたとき...？ などなど、だいたいこのどちらかで使うことがほとんどではないでしょうか。それらjQueryが実行されるタイミングをイベントといいます。 そこでまずはHTMLを読み込んだときに発生するイベントについてです。 $(document).ready(function(){ //HTMLを読み込んだらここに書いたことを実行します。 }); 上記はJavaScriptでいうところのwindow.onload()のような物です。のような物、というのはJavaScriptのwindow.onload()はwindowがロード(HTMLや画像などページ

TOPCSS jQueryのアニメーションとCSSでパララックスページを作る jQueryのアニメーションとCSSでパララックスページを作る 公開日：2015.11.21 更新日：2019.04.29 CSS, jQuery, アニメーション jQueryのanimate関数で要素に動きをつけ、CSSで背景を固定し、なんちゃってパララックスなページを作ってみました。 主なコードは以下から。 サンプルページ html <div id="main"> <section id="section1" class="content first"> <p class="text">↓スクロールしてください</p> </section> <section id="section2" class="content second"> <p class="box1">box1</p> <p class="bo

画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 LightboxLightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。グル

jQuery でのテキストボックスに対する操作をまとめました。 テキストボックスの value 値に対する操作は、jQuery の中でも基本的な処理になります。ベースとなるテキストボックスの操作を覚えれば、各種フォームオブジェクトに対する操作も難なく覚えることができます。 以下、サンプルプログラムでは id 属性「sampletext」のテキストボックスを用いて解説していきます。

縦長のwebデザインをがむしゃらに集めています。

スマートフォンやタブレットが絡むサイト制作時に実装することが多い、レスポンシブ対応やスワイプ（フリック）などといった機能を簡単に実装できるスライダー・カルーセルのプラグインやチュートリアルのまとめです。 いずれかひとつの機能のみ実装するだけでなく、中にはひとつのプラグインで複数の機能を同時に実装できるのもあります。 普段からよく使うものは大体決まっていたりするんですが、見せ方、対応ブラウザ、一部の機種で挙動が怪しいなどの理由で他のものを探すということもたまにあるので、そういった時の手間を省くためにメモしていたものです。 全てのプラグインをじっくり使ったことがあるわけではないのと、僕はiPhone持ちなので特にAndroidで上手く動作してくれるかわからないものも正直幾つかありますが、いずれもPCやiPhoneで確認した際には問題なく動作してたものです。

jQueryを使ってのスライダーってTOPページのメインビジュアルが基本ですが、それはフェード系やダイナミックなアニメーションが主流だった頃の話で、前後左右の画像を表示しつつスライドするカルーセルスライダーが出始めて、メインビジュアルだけでなくコンテンツバナーを複数表示させて左右にスライドするタイプの物がTOPのメインだけでなくサブコンテンツ部分にも多く見られてきてます。 今回とあるコンテンツ量の多いポータルサイトを作成した時にそのタイプのスライダーを作成したので備忘録としてまとめておきます。 どんな感じのスライダーかっていうと、bxSliderの本家サイトにあるサンプル「Carousel – dynamic number of slides」のような感じです。 まず、bxSliderをダウンロードして準備 まず、「bxSlider」の本家サイトからDownloadします。 ダウンロードす