jQueryが動かない（動作しない）理由を考察！スクリプトのどの箇所にミスがあるかを調べる裏技も紹介 | 誰かのためのホームページ制作
jQueryが動かない時の悲しさ。筆者も幾度となく経験している。 だが今となっては、粘り強く原因を究明し対応できるようになった。 本稿ではjQueryが動かない主な原因について紹介するとともに、どのように対応し動かせばよいのかの解説もつけてみた。実際のところ対応方法はケースバイケースなので、詳細のアドバイスはなかなか難しいが、トラブル解決のヒントに役立てていただければ幸いだ。 jQueryが動かない原因を考察 jQuery本体を読み込んでいない あるある度：★☆☆☆☆ jQuery本体を読み込んでいないと、スクリプトを書いても動かない。プラグインも動かない。ここは基本中の基本なので、忘れている人は少ないだろう。 jQuery本家サイトにて本体をダウンロードしファイルを読み込むか、GoogleのCDNを読み込もう。後者の方法を推奨する。 <script type="text/javascri
JavaScript初心者脱却への道のりを考える - Qiita
最も誤解されているプログラム言語として名高いJavaScriptの誤解を解きつつ、中級者（プログラム開発においてある程度戦力として計算できる）になるためには何から抑えればいんだろう、というのを考えた記録とリンク集です。 考えたというか、自分が勉強中です。 ※追記 KENJUさんが完全に上位互換な内容の投稿を公開されていましたので紹介。 中上級者になるためのJavaScript【知識編】 対象 何かしらのプログラム言語は書ける 多少JavaScriptを書いたことはあれど、言語の仕様はよく知らない レベルの基準 中級ってどんな人なのさ？ JavaScriptの業務スキルレベル 判別表 （５段階） あなたはJavaScriptを知らない JavaScriptでよく使われるクロージャやプロトタイプの考え方を理解すること 代表的なライブラリ（jQueryとか）が使えること、最近ならNode.jsな
The World’s Most Comfortable Shoes
Follow the Flock Exclusive offers, a heads up on new things, and sightings of Allbirds in the wild. Oh, we have cute sheep, too. #allbirds
最適なCSSの横並びはどっち!? Flexboxとfloatのパフォーマンス比較 - ICS MEDIA
ボックス要素の横並びをCSSで行う場合、皆さんはどうしていますか？ 従来知られているfloatプロパティを使った方法の他に、CSS3から「Flexbox」を使用する方法も選択肢として加わりました。では、Flexboxとfloatはどちらの方が処理速度が早いのでしょうか？ 本記事ではこの2つをパフォーマンス面から比較し、最適なボックスレイアウト手法について検証します。 Flexboxとは？ Flexbox(CSS Flexible Box Layout Module)は、floatに代わる新しいボックスレイアウト方法。横並びはもちろん、ボックスを均等位置に配置したり、整列や中央揃えなど、柔軟なレイアウトが可能です。今やすべてのモダンブラウザーで使用することができ（※1）、Bootstrap 4の新たなレイアウト方法として採用される（※2）等、次世代の標準となっていくであろう技術です。 ※1
フロントエンドで使ってるものがあまり変わってない - No Regrets in Bathing
自分のスタックはあまり変わっていない。ほとんど10年のツケを払っていない。学習能力が低いせいでもあり、選んだスタックがバージョンを重ねている成果でもある。 毎回使う フレームワーク：Vue.js 消耗、などの意見が散見されたが、べつに今でも便利に使えている。 browserifyやwebpackがあれば便利だけど、なくてもいい、ってバランスが好き データフローは特に考えない。状態がそこにあるので書き換えれば良い。 あまり頭を使わなくていいのが助かる Reactの考え方は好きなのだけど、よっしゃFluxやるぞって気持ちにはならず、Reactのみでよしなにやるソリューションが広まったらいいなと思う。 ビルドシステム： browserify / watchify substackの作るものはどれも品質が高いので、もうsubstack製品だけ使っていればいいやという気持ちになりがち。余計な処理が全
メンテナンス性に優れ、拡張性を備えたCSSを書くために -メンテナブルCSS
メンテナンス性に優れ、拡張性を備えたCSSを書くための「MaintainableCSS」を紹介します。 あるスタイルを修正する際に他に影響を与えてしまわないか、せっかく書いたコードが先祖帰りしないか、似たページをつくる時にコードを再利用するのに問題はないかなど、全部はもちろん個々でも非常に参考になると思います。 MaintainableCSS 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 メンテナブルCSSにすることのメリット 1. はじめに 2. セマンティック 3. 再利用 4. ID 5. コンベンション 6. モジュール 7. ステイト 8. バージョニング メンテナブルCSSにすることのメリット モジュール化、カプセル化 スタイルはあなたの許可なしで、他のスタイルの影響を受けません。 どんなデザインの要件でも あなたの必要
jQuery Snippets #7 - NxWorld
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの第7弾です。 動きをすぐ確認できるデモなどは基本的に用意していないので、実際の動きを確認したい場合などは自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して確認してください。 画像のアスペクト比を割り出して、値によって処理を加える 例えば複数の画像を並べて表示したいという時に、同じサイズや同じ縦横比であればCSSなどで容易に調整可能ですが、それが横長や縦長など異なるサイズ（アスペクト比）で且つどのようなものが入ってくるのかを限定できない時などに利用できます。 jQueryを下記のように記述することでアスペクト比によってそれぞれ別の処理を実装することができ、例えばCSSのposition: absolute;とネガティブマージンを組み合わせることで、ど
いろいろなキャラクターデザインの料金まとめ - 99designs
ゆるキャラがブームになったように、企業や官公庁を始め、商品、サービスに至るまで、イメージキャラクターを作るのがマーケティング戦略の一つとなっています。 1体のマスコットのお蔭で、商品の認知度が格段に上がり、それが売り上げに直結する事も少なくありません。 ここでは、そのようなキャラクターを作るのにどれくらい費用が必要かご説明しましょう。 キャラクターのデザイン料の相場は？ 頭で考えたキャラクターを描き起こして完成させる作業の部分は、時間当たりの費用を何とか算出できない事はないですが、そのキャラクターの案を考える段階は値段に換算したくても到底無理なので、キャラクターのデザイン料に基準はあってもないようなものでしょう。 また、依頼先が大御所と呼ばれるようなデザイナーなのか、素人に近い人なのかによっても変わりますし、チラシにそのまま印刷するだけなのか、それとも多方面に展開するのでキャラクターを拡縮
Uberの失敗 非デザイナー社長がリブランディングに関わるとどうなるのか デザイン会社 ビートラックス: ブログ
Uber。サンフランシスコで生活しているとこの会社が提供するサービスを利用したことの無い人を探す方が恐らく困難であろう。 ライドシェアを中心に最近では食べ物のデリバリーサービスであるUber EATSや実験的にレンタル子犬を届けるUber Puppyなど、卓越したUXを通じたビジネス展開に無限の可能性を感じさせる。 DESIGN Shift: これからのビジネスはモノより体験が価値になる その事もあり、非上場でありながらも現在のUberの評価額は約6兆円を超え、フォードやFedExの時価総額よりも高くなっている。同社の6,000人の従業員の実に2/3がここ1年間で採用されたという。2011年のリリースから5年程で成長したこのモンスターユニコーンは今後も成長の勢いが止まらない。 創業5年で企業価値5兆円に: Uberが示す急成長のポイント Uberのロゴとアイコンが大幅リニューアル今ではシェ
関数型プログラミングはまず考え方から理解しよう
関数型プログラミングが注目されて久しいです。 そろそろ勉強しておかないとなぁということで調べてみるものの、情報として出てくるのは"高階関数","カリー化","遅延評価","モナド"などの物々しい単語の数々。これらを勉強して理解した気になったものの、プログラムを書こうと思うと全然書けませんでした。 結局、関数型言語を実現する手段を学ぶ前に関数型と言われるパラダイムを理解しないことには書けません。ということでここでは関数型プログラミングの"手法"ではなく、オブジェクト指向と関数型プログラミングを比較しながら考え方の違いを見ていきます。 本日の例題 プログラミング課題を設定してオブジェクト指向と関数型で解答してみましょう。 課題： 唐揚げ弁当がいくつかあるとします。それぞれ唐揚げが複数入っています。 この中からｘ個の唐揚げをつまみ食いするプログラムを作りましょう。 つまみ食いはバレないようにする
複雑なアニメーションとそれに伴う処理を簡潔に書くことのできるライブラリ vq を作った - Katashin .info
2016年2月7日JavaScript,vq,ライブラリ最近 JavaScript のアニメーションの実装につらみを感じていたので、それを解消するためにライブラリを作りました。 vq というライブラリで、Velocity.js というライブラリのヘルパーという位置づけです。 内部のアニメーションは Velocity.js にまかせていて、vq は記述を簡潔に書けるようにしています。 vq - GitHub vq - NPM Velocity.js のつらみ #Velocity.js は、jQuery.animate と同じような文法で DOM 要素のアニメーションを記述することのできる JavaScript ライブラリです。 Velocity.js のインタフェースは jQuery と似たような感じですが、実装では requestAnimationFrame でアニメーションさせてたり、j
MAMPで本番環境のWordPressサイトをデータベースごとローカルに構築する | UNORTHODOX WORKBOOK | Blog
El CapitanにアップデートしたらMAMPがおかしくなってしまったので、これを機に新しいバージョンのMAMPをインストールして、せっかくなのでデータベースごと本番環境のWordPressサイトをローカルに構築した際の覚書です。 サーバーとかデータベースとかに苦手意識があって、何かちょっとでも環境を変えると不安になるので、何をどうしたのか簡単に書き残しておきたいと思います。 MAMPをインストール MAMPを以下のリンク先からダウンロードしてインストール。現時点での最新バージョンは3.4でした。 https://www.mamp.info/de/ インストールの詳細は、特に難しいこともないので割愛。 インストールされている以前のバージョンのMAMPは、上書きされることなく別名で残るようですが、変に設定等が引き継がれるのが嫌だったので、htdocsフォルダとdbフォルダを退避後、完全に削
全画面の背景画像をCSSのマウスホバーで切り替える(画像のプレロードあり) | UNORTHODOX WORKBOOK | Blog
全画面に設置した背景画像をマウスホバーで切り替える方法。全画面の背景画像を含め、全てCSSだけでやっています。 切り替えるだけであれば、間接セレクタを使ってマウスホバー時の背景画像を用意しておけばいいだけなので、結構簡単ですが、画像切り替えの際に読み込みのための遅延を無くしたかったので、頭を悩ませました。 いわゆる画像のプレロード(事前読み込み)ですが、JSを使わずにCSSだけでやる方法がないか模索した結果、以下の様な形となりました(プリロードとも言う)。 プレロードなしの場合 まずは、画像のプレロードがない場合のものです。つまり、オンマウスの時に初めて画像を読み込むということになり、背景画像が切り替わる際に若干の遅延(タイムラグ)が生まれるんですね。これは初めての時だけで、2回目のオンマウス時には既に画像が読み込まれているので、遅延は生じません。 【DEMO】全画面の背景画像をCSSのマ
CSSでテキストをなぞるようにアニメーションしながら色を変える | UNORTHODOX WORKBOOK | Blog
なぞるようにといっても、書き順通りに文字を書いていくようなものではなくて、左から右へ徐々にスライドさせて色を変えるエフェクト。 なんと言ったらいいのかよく分からないのですが、所謂、プログレスバーのように進行しながら、徐々に色を変えていくアニメーションのやり方です。 Javascriptは利用せず、CSSだけで実装してます。JSと組み合わせればもっと色々なことできそうですが、ここでは単純にマウスホバーでアニメーションさせたものを紹介します。 デモ 以下の四角い枠内をマウスホバーしてみてください。 THE PROGRESSIVE ERA テキストの色が左から右へ徐々にスライドしながら変化しているのが分かると思います。古いブラウザには対応していませんが、最新のブラウザであれば問題なく表示できていました。 HTMLとCSS やり方は至って簡単。 HTML <p class="text-progre
CSSでボーダーの両端を徐々に透過させる | UNORTHODOX WORKBOOK | Blog
画像を使わずに、CSSだけでボーダー(線)の両端を徐々に透明にする方法は、CSSのグラデーションを使うことで簡単に表現することができます。 ありがちな表現ですけど、グラデーションの書き方でちょっと覚えておきたいこともあったので、備忘録をかねてやり方を記載しておきます。 CSSのグラデーションを利用する まずはボーダーを作らなくてはいけませんが、ボーダーを作るのにCSSのborderプロパティは利用しません。borderプロパティでは、カラーにグラデーションの効果を与えることができないので、高さ1pxの要素を別で作り、それをボーダーに見立て、backgroundのlinear-gradient()関数を利用して要素の両端を透過させます。 ちなみに、両端を透明にしたボーダーとは、以下のようなやつです。 上下の青いボーダーがそれです 見出しとかでよく見るやつですね。 ブラウザはChrome、Sa
CSSでボーダーをボックスに沿って走らせる | UNORTHODOX WORKBOOK | Blog
昨日に引き続き、CSSの小ネタを紹介します。「CSSでボーダーをボックスに沿って走らせる」とか、よく分からないタイトルですが、簡単にいうとボーダーをボックスに沿って移動させる方法で、四角いボックスの外周を回り続けるエフェクトの実装方法になります。 正確には、CSSでいうところのborderプロパティではなくて、1pxの高さ(または幅)を持った要素をCSSのアニメーションで動かしています。 四角いボックスの外周を回り続けるエフェクトとは 言葉では説明しづらいので、以下の奴がそうです。DEMOというテキスト部分をマウスホバーすると、2本の線が現れて外周を回りだします。 DEMO ヒーローイメージとゴーストボタンを使いたかったという理由だけで、デモも作ってみました。ただの自己満足。 これのやり方 個人的になかなか面白い効果だなと思っているのですが、全てCSSで比較的簡単に実装できます(正方形の場
[jQuery]スクロール量に応じて(連動して)、アニメーションさせる方法 | UNORTHODOX WORKBOOK | Blog
アニメーションというか、jQueryでスクロールを監視して数値化し、それをリアルタイムに反映させることで滑らかに動かす方法。スクロール量に連動させているので、スクロールするたびにアニメーションのような滑らかな動きをします。 色々な使い方があると思うけど、ここではwidthの値をリアルタイムに更新し、スクロール量に応じて幅を広げたり狭めたりする方法をのせています。 デモとHTMLとCSS 言葉だけだと説明が難しいので、デモを見てもらうと何をやりたいのか分かるかと思います。とてもシンプルです。※古いIEでは見れません。 DEMO デモでは５種類ありますが、基本的にはスタート位置(CSS)が違うだけで、内容はほとんど同じ。 HTML HTMLは何でも良くて、便宜上、空divの要素を更新するような形にしています。 <div class="contents"> <div class="line"><
![[jQuery]スクロール量に応じて(連動して)、アニメーションさせる方法 | UNORTHODOX WORKBOOK | Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/dc8c95bc6d707ff555b0dcfe047f07bb04a7b352/height=288;version=1;width=512/https%3A%2F%2Ftheorthodoxworks.com%2Fwordpress%2Fwp-content%2Fuploads%2F2015%2F01%2Fcatch-study.jpg)
[CSS] transform:perspectiveを使用した、パタッと開いて閉じるサイドメニュー | UNORTHODOX WORKBOOK | Blog
UNORTHODOX WORKBOOK BLOG TOP›Web Design›[CSS] transform:perspectiveを使用した、パタッと開いて閉じるサイドメニュー このサイトでも使用している(2015年1月現在)パタッと開いてパタッと現れるサイドメニューを実装する際に、CSSの transform:perspective を使用したんですが、少しはまった点があったので、復習を兼ねて実装方法をブログに残しておこうと思います。 このサイトでは、クリック(jQuery)でサイドメニューが展開されますが、ここではマウスホバーでサイドメニューが展開する方法を記載しています。 CSSの transform:perspective は、3D変形の遠近効果を調節する際に使用するプロパティで、奥行のある表現を可能にします。 これとは別に、transform が付かない perspectiv
![[CSS] transform:perspectiveを使用した、パタッと開いて閉じるサイドメニュー | UNORTHODOX WORKBOOK | Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/5d83c018f53448a1f9ca3568b41db9caddbc91a6/height=288;version=1;width=512/https%3A%2F%2Ftheorthodoxworks.com%2Fwordpress%2Fwp-content%2Fuploads%2F2015%2F02%2Fcatch-web-design.jpg)
CSSのみで背景を全体的に斜めにして傾斜をつける方法 | UNORTHODOX WORKBOOK | Blog
最近よく見かけるやつなんですけど、ちょうど今作っているサイトで使ってみたくて、色々やってみた結果なかなか良かったのでブログに残しておきます。 斜めのストライプとかじゃなくて、ブロックごと全体的に斜めにして背景を傾かせる方法です。プラグインは使わずに、CSSのみで実装してます。 デモ つまりはこんな感じのやつです↓ DEMO PAGE 大胆に背景全体を傾斜させているので、単調なフラットデザインに、ちょっとしたスパイスを加えることができますね。 実装方法 色々とやり方はあるかと思いますが、ここではCSSのbefore擬似要素とtransform:rotateを使って表現しています。 HTML <section class="contents"> <div class="contents_inner"> <!-- ここはコンテンツ --> </div> </section> ※HTMLは該当部分
【WordPress】カスタム投稿のシングルページに関連記事を表示する | UNORTHODOX WORKBOOK | Blog
少しつまづいたというよりも、get_posts()のパラメータで色々と出来ることが分かったので、備忘録をかねて記事に。 get_posts()は、新着記事や関連記事などの投稿データを取得する際に使用しますが、パラメータがたくさん用意されていて、投稿データをかなり絞り込むことができるんですね。 注：タイトルに「カスタム投稿のシングルページ」としていますが、これに限ったわけではなく、どのテンプレートでも基本は問題ないかと思います。以下も「カスタム投稿のシングルページ」に限定した書き方になっていますが、あまり気にしなくてもいいかもしれないです、たぶん。 single-○○○.php に同じカスタム投稿の記事を表示 カスタム投稿タイプを作成して、それに属する記事をsingle.phpとは別のデザインで表示させたい場合、”single-カスタム投稿タイプ名.php”というテンプレートを別で作りますが
インラインSVGで、alt属性のような画像の代わりになるテキストを指定する方法 | UNORTHODOX WORKBOOK | Blog
最近よくSVGを使っている。何かと便利なので、IE8を考慮しなくてもよい時は、写真以外の画像は全てSVGにしてしまっている。IE8さえなければもっと大胆に使えるのに…。滅びろIE8…。(IE6,7はもう既に完全に何も考えてない) で、SVGを使いだしてから気になっていたことがある。これってSEO的にはどうなんだろうと。 img要素の場合であれば、alt属性で代替テキストを指定することができるので、その画像に何が描かれているかを検索エンジンへ伝えることができる。SVGの場合には、そういった代替テキストの話を全く聞いたことがなかった。 ということで、勉強のため、SVGの場合にもimg要素のaltに代わるようなものがあるのか調べてみました。 ※インラインSVGの場合で、imgでSVGを表示させるのであれば、通常通りalt使う。 普通にあった 結論から言うと、当然のようにあった。しかも２種類。ti
レンタルサーバーの引越しを検討するにあたり、有名どこを比較してみた | UNORTHODOX WORKBOOK | Blog
いい加減レンタルサーバーの引越しを考えています。さすがにロリポップ(恥)でWordPress複数とかきついし、最近は微妙に怖いので、めんどくさくて逃げ回ってきましたが、とうとう本格的に引越しの準備に取り掛かりたいと思いはじめました。 一番の問題はどこのサーバーを借りるかですが、サーバーとかあまり詳しくないので、とりあえず希望の条件を軽く挙げ、有名どこのホスティングサービス数社で比較検討してみました。ぐだぐだ感は否めませんが、比較検討の結果をご覧くださいｗ 希望するサーバーの条件 まずは希望するサーバーの条件を挙げてみたいと思います。必須の条件は以下の通り。 ワードプレスが使える 複数のデータベースがある(10個以上) よーく考えたけど、必須の条件はこれだけでした。 さらに、条件というかその他の希望は以下の通り。 価格はなるべく安いこと ロリポップよりも高速であること 大手(安心)であること
スクロールするとふわっと現れる文字や画像 | UNORTHODOX WORKBOOK | Blog
書くことが何もないので、最近のWebサイトでよく目にする「あれ」について書いてみたいと思います。色々なやり方があるかと思いますが、難しいことはよく分からないので、簡単にできるjQueryとcss3を使ったもので実装してみました。 最近良く目にするあれ とは、スクロールしていくと突然何もなかったところからふわっと現れる文字や画像のこと。何て言うのか知らないので「あれ」と表現しました。すみません。。。 つまりこれのこと そしてこれもそう さらにこれもです コード HTML <div> <p id="animation">ここの文字が現れる</p> </div> テキスト部分を画像(img)にすれば、画像をふわっとさせることができますね。divやpの装飾は適宜行ってください。 JS $('#animation').css('visibility','hidden'); $(window).scr
【WordPress】一覧ページなどで記事ごとに複数の親子カテゴリーを表示する方法 | UNORTHODOX WORKBOOK | Blog
あまり複雑なことをしているつもりはないのですが、WordPressでカテゴリーを取り扱う際に、よく土壺にはまって動けなくなってしまうことがあります。カテゴリーの取得って意外と難しい…そう思っているのは自分だけでしょうか。 すぐ忘れてしまう脳みそを持ち合わせてしまったことを嘆きつつ、未来の自分の為にカテゴリーの取得に関してはまってしまったことをシェアしておきたいと思います。 何がしたかったのか 最初にも書きましたが、そんなに複雑なことをしたかったわけではありません。例えば、以下のようなカテゴリー構成で、 果物(親) ├ イチゴ(子) ├ みかん(子) └ リンゴ(子) カラー(親) ├ あか(子) ├ 黄色(子) └ みどり(子) カテゴリーアーカイブや最新記事一覧ページ等の各記事へ、下記のようにその記事が属するカテゴリーを表示させたかっただけです。 果物 : イチゴ カラー : あか, み
THE ORTHODOX WORKS | Graphic and Web Designer NAGANO JAPAN
2017.06.05 Mon SVGでハンドライティングアニメーションを実装する 文字を書き順通りに徐々にアニメーションさせて描画する「ハンドライティングアニメーション」をSVGで実装する方法。 以前に AfterEffects で同じようなことをやっていて、それのSVGバージョン。AfterEffe… 2017.04.04 Tue CSSアニメーション(transition)で起こるバブリングの原因と対策 正確には「バブリング」とは呼ばないと思うし、ちょっと意味合いが違うかもしれないけど、CSSで子要素に与えたtransitionが親要素へ伝播し、アニメーションの挙動をおかしくさせる現象に何度か遭遇した。 もしかすると、C… 2017.03.15 Wed WordBench 長野 vol.7 で Webデザイナーが VCCW を使ってみた話をしてきました #wbnagano 2017年3
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BEM記法におけるElement/Modifierの付け方メモ - Qiita