xmlをjQueryで読み込んで表示する時に注意すること
サンプルコード ひとまず例として以下のコードがあります。ajaxで読み込みます。 $.ajax({ url: "xml01.xml", async: true, cache: false, dataType:"xml", success: function(xml){ $(xml).find('text').each(function(){ var text = $(this).text(); $('.txt01').append('<p>' + text + '</p>'); }); } }); この場合、処理のところで内容を取得するのですが、そのとき.text()で取得するとテキスト内容がそのまま表示されます。 それで問題なければそれでよいのですが、aタグなどのリンクを反映したい場合はこれではダメです。 <text><a href="#">リンク部分</a>テキスト</text> この
タスクランナー「gulp」の導入手順（Windows）
前に同じタスクランナーのGruntを導入してみましたが、gulpというのも結構話題に見るのでこちらも導入し試してみました。 エラーがでてインストールできない人は、ページの下の方に自分がとった解決策が書いてあります。 gulpとは gulpとはnode.jsを使ったタスクランナーです。機能的にはGruntと一緒です。設定を記すgulpfile.jsの書き方が少し違うのと、処理スピードがGruntより速いようです。 公式サイトはこちらから gulp.js – the streaming build system インストール 基本的なインストール方法はGruntと一緒です。 こちらのコマンドをコマンドプロンプトに入力します。 npm install -g gulp 次にそのプロジェクトフォルダの階層まで移動します。 cd 階層へのパス ここで試しにgulpのバージョンを確認してみます。 gul
jQueryでコンテンツをランダムに入れ替える
ページのコンテンツをランダムに表示する機能をjQueryを使って作成しました。最初にHTMLには要素の記述が全部書いてある状態なので、JavaScriptがオフでも順序が入れ替わらないだけで表示はされます。 HTML サンプルに例として以下のHTMLを用意しました。 <ul class="contentBox"> <li> <div class="box"> <h2>見出し1</h2> <p class="img"><a href="http://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%81%E3%82%B4" target="_blank"><img src="01.jpg" width="220"height="150" alt="いちご"></a></p> <p>イチゴ（苺、莓、Fragaria）はバラ科の多年草。食用として供されている部分は花托（
jQueryプラグインの作り方の初歩
自分でもjQueryを使ってjsを書くので、これをプラグイン化できたらいいなと思うこともあります。という訳で大枠の構成だけですが、基本的な作り方を調べてみました。（あとは引数で設定を変えるのがかっこいいと思ったので作ってみたかったのもあります。） 無名関数 他の領域に干渉しないされないように以下の記述で囲みます。jQueryを引数として指定しているので、この中でも$表記が使えます。 (function($) { //中身 })(jQuery); メソッドを追加する ここが実際に処理するコードを書いていく場所です。「$.fn.hogehoge」のhogehogeの部分がメソッド名になります。 (function($) { $.fn.hogehoge = function(options){ //プラグインの中身 } })(jQuery); 使用する 実行のコードです。プラグインを使うときによ
SNSボタンをオリジナル画像で設置する方法
TwitterやFacebookへのボタンは公式サイトでボタンを作れますが、そのボタンはそれぞれオリジナルのボタンで設置することもできます。 ボタンの仕組みが変わると動かなくなるかもしれませんが、以下の方法で設置できます。今回紹介しているのはTwitter・Facebookシェア・mixiチェック・Google+です。 Twitter コードは以下になります。 <a href="http://twitter.com/share?count=horizontal&original_referer=ページのアドレス&text=ツイートさせたいテキスト&url=ページのアドレス&via=Twitterアカウント" onclick="window.open(this.href, 'tweetwindow', 'width=550, height=450,personalbar=0,toolbar=
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
Dreamweaverの便利なコマンドや拡張機能のまとめ
コーディングをするときに自分が主に使ってるのがDreamweaverです。そのままでもいろいろ機能があって便利ですが、コマンドや拡張機能を入れることによってさらに便利に使うことができます。 そこでDreamweaverのコマンドや拡張機能で見つけたものをまとめてみました。他にもこんな便利なものがあるよなど教えてもらえるとうれしいです。 使い方は、コマンドの場合はファイルをダウンロードしてきて以下に入れます。環境によって違う場所にあるかもしれません。 Windows → C:\Program Files\Adobe\Dreamweaver CS5.5\ja_JP\Configuration\Commands Mac → ライブラリ\Application Support\Adobe\DreamweaverCS5\ja_jp\Configuration\Commands 拡張機能はダウンロード
効率よく作るために私がしているCSSファイル分割方法
CSSレイアウトで組む事が一般的となった昨今、記述するCSSの量が増えてきたので複数のCSSファイルで管理することが多くなってきました。 どういう基準でファイルを分割するかはそれぞれですし、サイトを見ても様々なやり方があるようです。 基本的にはどこに何のCSSが書いてあるかわかるような仕様書があり、分かりやすければどんな分割の仕方でもいいと思います。 今回は、自分がよくやるCSSファイルの分割の方法をまとめてみました。あくまで自分がよくやってるものですので、こういうやり方もあるよと教えていただけますと嬉しいです。 なお、説明文中に記載しているCSSのファイル名は自分がよく付けている名前なだけです。 分割しない 分割の話をしておいていきなり何ですが、分割しない時もありますよね。スタイルのリセットから全部まとめます。 ページ数が少ないキャンペーンページ等に使っています。記述するCSSが少なそう
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デフォルトスタイルを残しつつ、ブラウザのデフォルト挙動を合わせてくれるCSS「normalize.css」