モダン JavaScript チートシート
Skip to the content. モダン JavaScript チートシート 画像クレジット: Ahmad Awais ⚡️ イントロダクション 動機 このドキュメントはモダンなプロジェクトでよく見られる JavaScript のチートシートと最新のサンプルコードです。 このガイドは読者に JavaScript をゼロから教えるものではありません。 基礎知識は持っていて、モダンなコードベースに慣れる（例えば React を学ぶ）のに苦労している開発者を助けるためのものです。 説明の中で JavaScript の諸概念が使われています。 また、議論の余地のあるポイントについてときどき個人的な tips を載せますが、その際はあくまでも個人的なおすすめであることを述べるように気をつけます。 メモ: ここで紹介されている概念のほとんどは JavaScript 言語のアップデート（ ES2
正方形グリッドレイアウトを作りたい - クイックノート
ホームページを縦横の格子状に分割して、 要素を配置するグリッドレイアウト。 一つ一つの格子の幅と高さは指定する必要があるのですが、 画面のサイズに合わせてレスポンシブにしたいと思う場面は多々あります。 レスポンシブにする最も単純な方法は%で指定することですが、 画面の縦長・横長に応じて格子も縦長・横長になると不便なこともあります。 horidashiWebを作るときに、 正方形のグリッドを作るのにちょっと苦戦したので、 ここでその方法をまとめておきます。 正方形グリッドレイアウト 画面いっぱいに配置する場合はvwが使える 親要素の幅いっぱいに配置する まとめ 画面いっぱいに配置する場合はvwが使える まずは、horidashiWebのように画面幅いっぱいを使って、 グリッドレイアウトによる配置を行う場合です。 この場合は、ビューポートの幅に対する比率を指定するvwが使えます。 例えば下のよ
カルーセルUIを実現するJSライブラリまとめ(2024年版) - 導入手間や機能の比較紹介 - ICS MEDIA
いずれもMITライセンスで公開されていますので、個人・商用問わず利用可能です。 Slick.js Slickスリック.jsは簡潔なコードで実装できるのが特徴のモバイルフレンドリーなカルーセルライブラリです。機能は少なめですが、ナビゲーションや表示するスライド数を変更するといった基本的な機能は備わっています。jQueryプラグインのため実装にはjQueryを読み込む必要があります。タッチ・スワイプ操作にも対応しています。ReactやVue向けのモジュール、TypeScriptのサポートは公式で提供されていませんがOSSで存在します。 このJSライブラリの基本的な実装と、アニメーションをフェードに変えた作例を用意しました。 基本の作例 サンプルを別ウインドウで開く コードを確認する <div class="slick carousel"> <div>1</div> <div>2</div> <
これからはこの実装がオススメ！ iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック
高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
Safari･Chrome･Firefoxでありがちなバグの対処法について(主にCSS) | Blog | 株式会社イロコト | ゲーム･アニメ等のエンタメ系Web制作&運用会社
こんにちは、コーダーのばやしです。 皆様はInternet Explorer（以下IE）のことをどう思いますか？「昔ながらの使いやすいブラウザ」でしょうか？おそらく、コーディングをかじったことのある方で好きな人はあまりいないでしょう。 （IE BIG LOVEな方がいらっしゃいましたら申し訳ありません） なぜかと言えば、IE特有の仕様やバグといったものが多数存在するためです。 コーディング時に常に意識しなければならないのが、特定のブラウザ限定の特殊な仕様やバグです。 IEならではの仕様やバグに惑わされたことは枚挙に暇がないですが、IE以外の主要ブラウザで直面する仕様やバグも中々厄介なものです。 今回はそのような、Chrome/Safari/Firefoxなどの主要ブラウザで見られるようなバグや仕様を紹介していきます。よろしければブラウザを切り替えながら見比べてみてください。 ※以下の内容は
【CodePenとは？】無料のWebコードエディタで使い方、ブログへの埋め込み方法。 | UX BEAR【ゆえっくま】
【CodePenとは？】無料のWebコードエディタで使い方、ブログへの埋め込み方法。by UXBEARJavaScript, テクノロジー2021年1月10日2021年1月31日 CodePenとは？HTML/CSS/JavaScriptの無料のブラウザコードエディタの使い方と、ブログやWebサイトへの埋め込み方法をご紹介してきます。 CodePenとは？ https://codepen.io/ CodePenは、作成したHTML、CSS、JavaScriptをテストおよび展示するためのオンラインコミュニティ。開発者が「ペン」と呼ばれるコードスニペットを作成してテストできる、オンラインコードエディターおよびオープンソースの学習環境。 Code Penの3つの特徴 ① HTML・CSS・JavaScriptのコーディングとリアルタイム表示 ② WEBサイトにコードを埋め込むことができる ③
ポートフォリオサイトをNuxt + Netlifyに移行しました
ポートフォリオサイトをNuxt + Netlifyに移行しましたWordPessで作成していた私のポートフォリオサイトをNuxt JSで作り変えてみました。デザインや内容はそのままで、管理体制を変えた感じですね。Nuxtに移行した理由や悩んだところをまとめてみます。 移行を決めた理由元々私のポートフォリオサイトは、まだ私が学生だった頃に WordPress の勉強用に作ったものです。その後何度かリデザインしながら公開していました。ブログなどはつけておらず、制作物の紹介を投稿記事として扱っていました。ただ、制作物は更新する頻度も高くはなく、WordPress でなくてもいい気がしてきていました。また、WordPress や PHP のバージョンを上げるたびにエラーを出すプラグインの対応に疲れてきていたところでした…。 そんな中出会ったのがGatsbyや Nuxt といった 静的サイトジェネレ
スクロールに連動するアニメーションを実装する時は、JSのIntersection Observerを使用すると簡単に実装できる
スクロールに連動するアニメーションはIntersection Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。 ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。 Animate on scroll using Intersection Observer by Keerthi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Step 1: カードUIをHTMLとCSSで実装する Step 2: CSSに基本的なアニメーションを追加する Step 3: Intersection Observerを使用する前に、HTMLに変更を加える Step 4: JavaScriptのInt
JavaScript入門: 基礎知識をGIFアニメで分かりやすく解説 -総まとめ
JavaScript QuestionsのLydia Hallie氏の「JavaScript Visualized」シリーズすべての翻訳を完了したので、まとめて紹介します。 JavaScriptエンジンの仕組みをはじめ、イベントループ、スコープチェーン、プロトタイプ継承、非同期処理、ジェネレータ関数、Hoisting（巻き上げ）など、GIFアニメを使用して詳しく解説しています。 シリーズ7本すべてと、プラス1として楽しく学べるクイズもあります。 JavaScript イベントループの仕組み JavaScriptでエラーの原因となるHoisting（巻き上げ）の仕組み JavaScriptのスコープチェーン・変数参照の仕組み JavaScriptエンジンの仕組み JavaScript プロトタイプ継承の仕組み JavaScriptのジェネレータ関数とイテレータの仕組み JavaScriptの
アプリのようなドロワーをWebサイトで実現！jQueryプラグイン「hiraku.js」の使い方 | HPcode（えいちぴーこーど）
hiraku.jsのダウンロード → hiraku.jsのダウンロードページ 上記にアクセスして、Download.zipからダウンロードしてください。 必要なファイルはsrcフォルダに入っている hiraku.jshiraku.css の2つのファイルだけです。 hiraku.jsの実装 ファイルの読み込み hiraku.jsとhiraku.cssを読み込みます。場所は<head>タグ内で大丈夫です。 hiraku.jsはjQueryに依存しますので、jQueryを先に読み込むことを忘れないようにしてください！ <link rel="stylesheet" type="text/css" href="./hiraku.css"> <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="
CSSプロパティ【object-fit】をIEに対応させる方法
WordPressなどのCMSでクライアント側がアップロードした縦長、横長、どんな画像サイズでも、枠内に納めて対応させたい時があります。 そんな時に便利なのが「object-fit」プロパティです。 「object-fit」プロパティを使うと画像を中央で切り取る取ることができ、任意の枠内に縦横比を保ったまま納めることができる大変便利なプロパティです。 しかしこのobject-fitプロパティは、IEやEageには対応してないみたいです。Internet Explorerなんてどうでもいいなんて言わずにIEくんにもちゃんと対応させてあげましょう IEにobject-fitを対応させる方法 まずやり方ですが二通りあります 1.object-fit-imagesを使う ①ofi.jsの読み込み ②CSSの書き換え ③objectFitImages();関数の起動 2.fitie.jsを使う ①f
CSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説する・「this vs that」 - かちびと.net
this vs thatはCSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説するWebサイトです。 ちょっと何言ってるか分からない、という方もいらっしゃると思いますが、僕の説明が下手で語彙も乏しいためです、すみません。 例えばdisplay:noneとhiddenはどう違うのか、style="width:***"とwidth="***"はどう違うのか等、結果として同じように見えるけど実際は何が違うのかを解説する、といったものになります。 フロントエンドのスペシャリストは復習に、学び中の方は勉強の一環として如何でしょうか。尚、書いてあることの全てが正しいかどうか確認してないので誤った事が書かれていたらごめんなさい。 this vs that
jQueryに頼らず、JavaScriptとCSSアニメーションでスクロールエフェクトを実装する方法
素のJavaScriptとCSSでスクロールアニメーションを実装する方法 ステップ1. HTMLのマークアップ HTMLでは、アニメーション表示したい箇所に.animateを追加します。 <div class="animate"> スクロールアニメーション要素 </div> <ul class="list"> <li class="animate">スクロールアニメーション要素1</li> <li class="animate animate2">スクロールアニメーション要素2</li> <li class="animate animate3">スクロールアニメーション要素3</li> </ul> .animate2と.animate3は、タイミングをずらして表示するためのクラスです。.animate→.animate2→.animate3の順番で表示するようにCSSで指定します。 ステッ
WordPress同梱のjQueryがついに最新版にアップデート – Capital P – WordPressメディア
WordPressにはjQueryが同梱され、サイトの随所で利用されているが、そのバージョンがついに最新版（現時点では3.5系）にアップデートされることがmakeブログで発表された。これまでは1.x系にパッチを当てたものが同梱されていたが、ついに最新版に上がるようだ。筆者は、つぎはぎだらけのお古ジーパンを着させられていたキッズが最新の服を買ってもらったような喜びを覚えた。 via GIPHY リリースまでのマイルストーンは次の通り。 jQuery Migrate 1.x（後方互換ライブラリ）をWordPress5.5から削除WordPress 5.6からjQuery、jQuery MigrateおよびjQuery UIを最新版にアップデート。WordPress5.7以降でjQuery Migrateを削除 5.5が2020年8月リリース予定なので、年内にはjQueryが最新バージョンになる
TweenMaxを使ってみる | なんかいろいろデザインする人
アニメーション系のプラグインとしては大御所のTweenMax.js。 ちなみに、TweenMax自体はjQuery不要だけどjQuery使用前提で書いてます。 いつものごとく、スムーススクロールとか設置してないからブラウザの検索機能使ってね。 TweenMaxとは 公式サイトはこちら https://greensock.com/tweenmax 世界的に有名なアニメーション系のJavascriptプラグイン。外国の、「このサイトすげえええ！」ってサイトでも使ってたりする。このプラグインすげえええ！ 実際問題、アニメーションと聞くとhtmlとcssと簡単なjs（スムーススクロールとか）しかしたことない人にとっては小難しいと感じるかもしれない。 特に、CSS3のanimationやtransitionから入ろうとすると、よくわからないし大したアニメーションが作れない！ってなる。少なくとも自分は
マーケティングエージェンシー 株式会社Oz link（オズ・リンク）
about 特長 顧客起点の科学的マーケティングを一気通貫で支援することで、 企業の持続的な成長を実現します。
【ブログカスタマイズ】CSSとJQueryで要素をふわっとフェードイン ～吹き出し・囲み枠・リストなどに使えるよ～ - 【ちゃんこめBlog】インド在住OLの雑記ブログ
こんにちは、Kome（@chankomeppy）です。 先日ブログ徘徊していると、ふわっと動く吹き出しに遭遇。私も使いた～い！と思い実装しました。 ▼こんなやつです。 Kome 吹き出しが画面に入ったら、左から右へふわっとフェードイン！ Kome ふわふわしてて可愛い～！ 吹き出しだけでなく、要素であればなんでも使えます ▼囲み枠の場合 左から右へふわっと！ 下から上へもふわっと！ 複数の要素を まとめて ふわっと ▼リストの場合 リストも 下から 上に ふわふわ 左から 右にも ふわふわ この記事はこんな人にオススメ はてなブロガー コピペだけでブログカスタマイズしたい人 HTML・CSSの知識が少々ある人向け コピペで簡単に作れるので、真似してね～。 今すぐにコードだけコピペしたい人はコチラ CSS CSSの説明 透明度（Opacity） 要素の変形（Transform） 変化時間（T
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
inview.jsでスクロールして表示されたらアニメーションを実行する-サンプル付き｜Gimmick log
Chrome の CSS transition がページロード時に動いてしまう問題の機序と対処 - Qiita
Sticky-js