すげー便利！ドメイン別にスタイルシート（CSS）を当てる方法。
ドメイン別にスタイルシートを当てる方法。 iframe[src*="youtube.com"]{ width: 500px; height: auto; } iframe[src*="nicovideo.jp"]{ width: 320px; height: auto; } 例えば、YouTubeの外部プレイヤー（iframe）の横幅は500にしたいけど、ニコニコ動画の外部プレイヤーは320にしたいときは、上のように書くと上手く動作します。 a[href*="wayohoo.com"]{ color: red; } a[href*="goryugo.com"]{ color: blue; } ちなみに、aタグをドメイン別に指定する場合はこのようになります。(wayohoo.comは青色、goryugo.comは赤色とする場合) タグ名[属性名*="URL"]{ /* CSSの中身 */ }
チャレンジ！ Movable TypeをCMSとして使ってみよう！ 記事一覧 | gihyo.jp
第8回ブログ記事リストテンプレートを使って、カテゴリ別絵本一覧ページを作る 黒野明子 2008-12-29
jQueryで魅せる動きのテクニック「10 jQuery Transition Effects: Moving Elements with Style」
TOP > WebService > jQueryで魅せる動きのテクニック「10 jQuery Transition Effects: Moving Elements with Style」 先日「最新の使えるjQueryプラグイン集「25 Amazing and Fresh jQuery Plugins」」と言う記事で、最新の機能のjQueryプラグインをまとめたエントリーを紹介致しましたが、今日紹介するのはjQueryで動きが特徴的な魅せる動きを集めたエントリー「10 jQuery Transition Effects: Moving Elements with Style | DevSnippets」を紹介したいと思います。 Fluid Navigation – How to create an informative menu-bar with jQuery & CSS ス
サイト内検索機能を設置する（Google版） - All About focus on(オールアバウト フォーカスオン)
サイト内検索機能を設置してみましょう ホームページのページ数が増えてくると、自分のホームページ内に限定した検索機能（サイト内検索機能）を設置したくなりませんか？ namazuなどの全文検索エンジンをサーバ内に設置できるホームページスペースを使っているなら、それらのシステムをセットアップすることで、自前でサイト内検索機能を提供できます。 しかし、そういう環境を使っていない方々も多いでしょう。 そこで、指定されたHTMLソースを貼り付けるだけで設置できる、お手軽サイト内検索機能の利用方法をご紹介致します。 カスタマイズもできるサイト内検索機能 今回ご紹介するのは、検索サイト大手のGoogleが無料で提供しているサイト内検索機能 「Google フリー検索 (カスタマイズ版)」 です。 このサービスを利用すると、Googleの検索エンジンを利用して、自分のホームページ内に限定した検索が行えます。
ページの真横からスライドで表示されるサブページを実現する「jQuery pageSlide」
軽量なjavascriptライブラリjQuery、かなり高機能で、様々な表現ができますが、今回紹介するのはjQueryを利用して、ページの真横からスライドで表示されるサブページを実現する「jQuery pageSlide」です。 上記のようにメインコンテンツエリアを、ヨコにスライドして、サブページが表示されます。 詳しくは以下 印象的な見せ方なので、ユーザーに特に残るような見せ方をしたいときに有効だと思います。使いどころは難しいかもしれませんが、はまったときには非常に有効的な見せ方だと思います。 実装方法は非常に簡単で、JQueryを読み込んで、簡単なコードを追加するだけです。出現するページのワイド幅はjavascript上で変更する事ができます。対応しているブラウザはIE7, FireFox 2, Safari 2以上という事で、IE6などの旧世代のブラウザは非対応とのことです。 詳しい
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
Add Twitter to your blog (step-by-step)
Due to recent changes in the twitter API auth policy, the current version of twitter.js does not work. I am actively working on a solution, but can't say much more than that right now. If I do find a decent solution, you shouldn't need to change anything as twitter.js will inherit the latest code automatically. Hotlink from Google <script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.
あなたの制作人生を「速記コーディング」で豊かにする、Texterを使ったアウトプット術
何万回も同じ操作で同じ文字を打つ必要はありますか？ よく使う日本語や同じようなコードを、毎回同じように打つのは面倒くさいな… 思考した事がそのままの感覚でアウトプットできれば生産性はもっと高まるはず。 コードを書いている時、いつもそう感じていました。 Texterというソフトに出会ってから、そんな日常が少し変わりました。 キーを打った事を忘れて、 頭の中で浮かんだ事がそのまま目の前に現れるような感覚、 まるで、「速記」を自動展開しているような心地良さを味わえました。 今回はSACSSコーディング勉強会 vol.5のライトニングトークでお話した「Texter」を紹介します。 このTexterを使うようになってから、打つ事が革命的に早く・楽しくなりました。 効率化を追求している人にはお勧めのツールです。 目次 Texterって何ができるの？ Texterのダウンロード(日本語化済み) Text
URLの擬似静的化で動的サイトをインデックスさせるには | エンジニアのためのSEO入門
Web担当者さんへ 今回は技術的な説明が多く、実際に設定ファイルを操作できない場合もあるかと思います。リダイレクト関連の設定は一歩間違えると致命傷です。場合によっては、対策が必要かどうかの検討が必要になるでしょう。動的URL、静的URLとは何かURLには大きく分けて、動的URLと静的URLの2種類があります。 動的URL（ダイナミックURL）の例： http://www.example.com/dir1/file.html?query1=param1静的URL（スタティックURL）の例： http://www.example.com/dir1/file/query1/param1/その違いは、URL中に「?」「=」「&」などのパラメータが含まれているかどうかです。 SEOの世界では、コンテンツが動的に生成されるケース、つまり特定の条件に対するページが単一のHTMLファイルで用意されておらず
CSS 3のアニメーション機能「Transitions」 - builder by ZDNet Japan
CSS 3のアニメーション機能を利用すれば、文字や画像を動かしたり、背景色を滑らかに変化させるなど、これまではJavaScriptが必要だった処理をCSSで実現できるようになる。 CSS 3のアニメーション機能には「Transitions」と「Animations」の2種類が用意されており、いずれもCSSのプロパティ値を変化させることで動きを設定する。たとえば、background-colorプロパティの値を変化させれば、背景色が変化するアニメーションを設定できるというわけだ。 このとき、Transitionsでは動きの始点と終点の2つの値だけを指定する仕組みになっているのに対して、Animationsではキーフレームによる細かな指定ができるようになっている。 今回はこれらのうち、Transitionsの機能を利用したアニメーションを紹介したい。 なお、Transitionsの機能はW3C
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
