THE HAM MEDIA BLOG

JavaScript OFF環境に優しく?jQueryでCSSを追加

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
CSS

jQueryでstyle追加

JavaScriptやjQueryでCSSを操作することをよくするのですが、jQueryなどで実行しようと思うと、DOMの読み込みを待ってから適用させることがほとんどなので、場合によっては、display:none;にして見せたくないところもチラっと見えてしまうなんてことがあったりしませんか?

それが嫌な場合はあらかじめCSSでdisplay:none;をあらかじめ指定しておくなどの必要があるのですが、JavaScriptがオフの環境でもそれが適用されてしまうことになるので、見せるためのコードが使えないなんて状況になったり。

チラッとも見せたくないし、OFFの環境の人にも見せたい・・・そんな時のために、JavaScriptに影響を受ける箇所のCSSをJavaScriptで追加し、且つ、DOMの完了を待たずに実行するような仕組みにしてみたらどうかと考えたので、それを実現させるコードをjQueryで考えてみました。

続きを読む

CSSのとjQueryの「:target」の違い

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
CSS
:target

:target

先日ご紹介したjQueryでも一部のブラウザで利用できるようになったCSS3のセレクタ「:target」。jQueryで使うことはまだまだない現状ですが、試しに使ってみました。

ところがCSSで使う時と違い、jQueryで使う場合は一工夫必要かな?なんて思ったので、まとめてみます。

続きを読む

Zen-codingを行う前にはシャドーコーディング

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
HTML
タグ:
コーディング
Zen-coding
マークアップ

Twitterでもmukimukiでも、Zen-codingが結構熱くなってます。知り合いでも導入している人がちらほらと。Zen-codingを使えるようになると、とっても便利!

しかし、構造ができていない段階でZen-codingを行うのは非効率。そんな時は『超高速コーディング術』にも書いてある「シャドーコーディング」を行ってから作業に入ると、効率的です。

続きを読む

SaCSS vol.11 コーディング勉強会参加者募集!

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
コーディング勉強会
タグ:
勉強会
札幌
SaCSS

SaCSS vol.11

2010年になって、まだ勉強会を開催していませんでしたが、3月より始動します!

今回より、いままでのセミナー形式をできるだ少なくし、参加者同士で勉強をしていくスタイルをとろうと思います。具体的にはライトニングトークなどを増やすのと、その時々で参加者の聞きたい・話たい話題についてをディスカッションなりその場でコーディングやハンズオンなどを行うようなスタイルにします。

今回は3月27日(土)の18時より、札幌市民ホールの会議室で開催します。

勉強会の参加申込

続きを読む

LP9連動 第2回コーディングコンテストが開催されます

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
日記
タグ:
CSS3
HTML5
コーディング
CSS Nite

第2回コーディングコンテスト

4月17日(土)に開催されるCSS NiteのLP9「Coder's Higher」の連動企画として、第2回コーディングコンテストが開催されるそうで、すでに参加募集を開始しています。

HTML5とCSS3を使ってのページ作成となるので、これから学びながら作成する人も多いと思うのですが、是非皆さん、勉強がてら、そして今後の技術を一足先に学ぶことも兼ねて参加してみませんか?

続きを読む

何故かあまり取り上げられない、jQueryのCSS3セレクタ

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
CSS3
jquery

あれ?jQueryでCSS3の全部のセレクタを使えるようになってる?いつから?

jQueryといえば、ほとんどのCSS3のセレクタに対応しているのですが、そのうちの一部は、jQuery1.3.2になっても、確か使えなかったと認識していました。使えないものだと思っていたのですが、最近になって、そのまだ対応していなかったはずのセレクタを試してみたところ、なぜか使えるようになっている様子。1.3.2で試してみても動作する。

いつから!?

とりあえず検証。

続きを読む

jQuery1.4.2リリース

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery

jQuery1.4.2リリース

気づけばjQueryのバージョンが新しくなって、1.4.2がリリースされていました。

今回も主な変更はバグの修正と速度改善のようですが、機能も追加されているようです。

続きを読む

IE7・8で透過PNGにJSで透過させたら画像が汚くなった場合の対処方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
透過
opacity
IE

コミュを見ていたところ、自分の書いたプラグインがうまく動作していないとの書き込み。ん?どういうことだ?なんて疑問に思ったのですが、どうやらIE7・8で透過PNGにプラグインを適用させたら画像が汚くなったとのこと・・・

おっと、なぜ!?

どのようなことなのか、確認しつつ対応方法を見つけようと思います。

続きを読む

Re: 今さら聞けないjQuery実行パターンまとめ【実行のタイミングって?ちょっとした補足】

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery

201002151.gif

noriさんのブログでまとめられていた「.ready()」などのjQueryの実行パターンについてのまとめ。jQueryの書き出しに書かれる.ready()メソッドや$(function(){〜});などを「おまじない」とか「最初に書いておくもの」なんて言われたり見て覚えていた人が多いんじゃないかなって思うのですが、こういうまとめがあるとわかりやすくていいですね。

十分ではあるのですが、僕なりの補足を入れておこうかなと思ったので紹介も兼ねてエントリー

続きを読む

デザイナー・コーダー必見の一冊!『Web制作の現場で使う jQueryデザイン入門』

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
おすすめ本
jquery

Web制作の現場で使う jQueryデザイン入門

本の帯に「もう、プログラマーには頼らない!」なんて事が書いてある、jQueryの入門本。このブログでも何度かお世話になった、to-Rの西畑さん著の本で、デザイナーやコーダーがプログラミングの知識なしに始めることができるjQueryの入門本です。

サンプルのHTMLもスクリプトもわかりやすく書いてあり、まさに入門!というくらいの簡単にできてしまうサンプルが豊富に掲載されています。

JavaScriptやjQueryをこれから始めようと思っている人、始めたばかりの人、ちょっと復習をしてみようと思っている人向けの本で、これを読めば、jQueryを使ったちょっとしたUIの変化などを取り入れたサイトが作れることでしょう!

続きを読む

CSS Nite LP, Disk 9「Coder’s Higher」に出演します

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
気になる!
タグ:
CSS Nite
東京

CSS Nite LP, Disk 9「Coder’s Higher」

ここでのご連絡がかなり遅くなってしましましたが、4月17日(土)に東京で開催されるCSS Nite LP, Disk 9「Coder’s Higher」に出演させていただくことになりました。

「Coder’s Higher」の内容なので、HTML5やCSS3、jQueryにスピードコーディングの話など、魅力的な内容盛りだくさんの日になるようで、ものすごくわくわくします!!

CSS Nite LP, Disk 9「Coder's Higher」

続きを読む

jQuery使っても十分速いよというお話

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery

jQueryが、改めてすげぇってt思った

先日のこと、かなり表示している要素のところに適用していたJavaScript(JS)があるのですが、それが重たいとの指摘があり、調査・調整することになりました。自分がコーディングをしたわけではないので、何が原因になっているのかなども全部調べるところからはじめたのですが、確かに要素数が多くなると、ものすごく重くて遅すぎる状態。

ライブラリとかを使わないでgetElementsByTagName使って、配列にpushとかの内容でごにょごにょしていたんですが、いろいろ遅い。高速化の処理を調べて修正しようとも思ったのですが、なにぶん時間も限られている。そして都合のいいことに、jQueryが、なんか別の処理のためにpluginを使うために読み込まれているという状況。それならjQuery使って処理しちゃおうと考えたわけです。

速くなるのかはとりあえず試してみるかってことでチャレンジ。

続きを読む

「Easy Retweet Button」をカスタマイズしてRetweetボタンを設置する

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
javascript
twitter

先日、某所にてお世話になっている、@mersyさんより「ブログの記事一覧にReTweetのボタンをJSで自動でつけられるようにしたい。」というような課題みたいな話題が出てきました。

bitlyのAPIを使って、URLを自動的に縮めておきたいという要件もついていたので、それくらいであれば、以前ブログで紹介した「Easy Retweet Button」を利用したら簡単にできるのではないか?と思ったので、やってみることにしました。

続きを読む

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。