【初心者用】JavaScriptが苦手なWebデザイナー向け「jQueryの基本的な書き方」

jsのコーディング画面
JavaScriptの数あるライブラリの中でも、最も有名なのが「jQuery」。Web業界で働いている方は、毎日コード目にしていると思いますが、デザイナーさんの中には苦手な人も多いのではないでしょうか(私です)。 そこで今回は個人的な備忘録も兼ねて、jQueryの基本的な書き方を解説しようと思います。これ...
続きを読む

レンダリングブロックするjsファイルを非同期化して、ページの読み込みスピードを速くする方法

コードが書かれたモニター
GoogleのPageSpeed Insightsでサイトをチェックすると、読み込みスピードを速くする方法として「レンダリングをブロックするリソースの読み込みを遅延させるか、非同期に読み込むか、これらのリソースの重要部分を HTML 内に直接インライン化してください」と提案されることがあります。 これはH...
続きを読む

スマートフォン端末で電話発信するa要素「tel」をPC版で無効にする方法

新機種が出るたびに増えるスマートフォン
a要素に[href="tel:電話番号"]を指定すると、電話発信用のリンクを設定することができます。スマートフォンなどではタップするだけで直接電話をかけることが可能になるため、非常に便利な機能です。 しかし、レスポンシブWebデザインでサイトを構築している場合、パソコンで見ると[href="tel:電話番...
続きを読む

https(SSL)通信の環境下でjavascriptが動かなくなる場合の原因と解決方法

先輩への質問の返答が、全部「ググレカス」
ローカルやデモ環境で問題なく動作確認したファイルを本番環境にアップしたら、javascriptが動かない…こんな経験ないでしょうか? その本番環境が「https(SSL)」で通信している場合は、スクリプトの記述方法に原因があるかもしれません。今回は、https通信下でjavascriptが動かなくなった場...
続きを読む

ヘッダを[position:fixed]で固定した際、ページ内リンクの位置がずれるのを解消する方法

ノートパソコンで作業中
当ブログもそうですが、最近はヘッダ部を固定して表示するページが非常に増えました。 しかし、[position:fixed]でヘッダを固定している場合、ページ内リンクの位置がヘッダの高さ分ずれてしまいます。今回はその場合の対処方法を紹介します。 ページ内リンクの位置ずれを解消する方法 C...
続きを読む

【js】定番機能を簡単に実装!Web制作に便利なjQueryライブラリのまとめ

乱雑に置かれた洋書
星の数ほどあるjQueryですが、いつも使う機能というのは「イージング」や「ホバー」など大体決まっているもの。そんな定番の機能を一つにまとめているjQueryのライブラリを紹介。 jQueryライブラリを利用するとコーディング時間が大幅に短縮されます。jQueryを使ったことのない人でも簡単に導入できます...
続きを読む

IE6~8でCSS3を利用可能にするライブラリ「Selectivizr.js」使い方と注意点

ノートパソコンにメモとペン
CSS3は便利ですが、IE6~8ではほとんど対応していないのが困りモノ。IE9以上でそれなりに使えるようになるレベルです。 HTML5とCSS3の対応表:HTML5 & CSS3 Web Design IE6はもう切っていいと思いますが、IE8はまだ現役で使っている方もいるはずなので、できれば対応し...
続きを読む

楽しく退屈せずにJavaScriptを学べるサービス「Codecademy」

社員全員のデスクトップ画像を社訓の画像に強制変更
自慢じゃないですが、私はJavaScriptが超苦手です! ソースを見ればなんとなくはわかるので、既存のプログラムを「ん?これかな?…あれ、こっちかな?」と、アミバのごとくいじるので精一杯です。 そんな私のような人も簡単にプログラムを覚えることができる…かもしれないサービス「Codecademy」を...
続きを読む