「Facebookプロフェッショナルガイド」1刷～3刷を購入の方へ
10月からのFacebookの仕様変更に伴い、そろそろ書店に並び始めていると思われる、共著「Facebookプロフェッショナルガイド」4刷の内容を一部最新の内容に更新しています。 Facebookページ プロフェッショナルガイドposted with amazlet at 11.07.16蒲生トシヒロ 竹村詠美 原裕 大元隆志 井出一誠 マクラケン直子 ホシナカズキ 藤本壱 荒木勇次郎 関根元和 毎日コミュニケーションズ 売り上げランキング: 699 Amazon.co.jp で詳細を見る Facebookの仕様変更は開発者ロードマップによって予め告知されており、1～3刷でも仕様が変わることは予め記していますが、Facebookアプリの画面まわりがかなり変更されたため、4刷のタイミングで訂正を入れることになりました。 そこで、1～3刷を購入された方もFacebookの仕様変更に対応できるよ
商用利用も無料、Facebookファンページの作成に役立つPSD素材（ワイヤーフレーム付き）
ピクセル単位で正確につくられた、FacebookファンページのGUIがまとめられたPSD素材を紹介します。
Dreamweaverの全角・半角変換拡張機能 | バシャログ。
チャンピオンズリーグ決勝を見るために頑張って起きましたが、眠気のため後半途中で撃沈した sakai です。 お客様から原稿をもらったら、半角カナ、全角カナが入り混じり、数字も半角だったり全角だったり。機種依存文字も使われてたー！ なんてことがよくあるかと思います。 今回は Dreamweaver で全角・半角や機種依存文字を一括変換できる拡張機能をご紹介します。 こちら 全角・半角変換拡張機能 CS3 用とありますが、CS5.5 でも問題なく動作しました。 こんな感じでダイアログが出て、変換をすることができます。 これまでは秀丸のマクロを使って一括変換をして、それから Dreamweaver にコピーして… という手順を踏んでいましたが、この拡張機能さえあれば作業を Dreamweaver に一本化できるので、ありがたい！ 是非お試しください。
img 要素に pointer-events: none; を指定すると、いろいろできなくなる。
いろいろできる画像のサンプル いろいろできない画像のサンプル いろいろできない画像のサンプルのコード HTML: <img class="img-pointer-events-none" src="enable.jpg" /> CSS: img.img-pointer-events-none { pointer-events: none; } 巷では a 要素に対する指定でのサンプルが多い pointer-events: none; ですが、img 要素に直接指定することでPC版ブラウザでは右クリックでの画像の保存やデスクトップに画像をＤ＆Ｄすることができなくなり、スマートフォン版ブラウザでは画像の長押し（長タップ）での保存やメール送信などのメニューがでなくなります。 もちろんソースを表示して画像のURLを直接参照したり、ブックマークレットなどを使えば画像を保存することはできます。そして当
いますぐ使えるCSS3テクニック集！ コピペ用サンプル付き！
面白法人カヤックがサイトリニューアル！ いきなり手前みそで恐縮ですが、今年の夏、面白法人カヤックがコーポレートサイトを2年ぶりにリニューアルしました。 「世界一更新頻度が高く、カヤックの活動がひと目で分かるコーポレートサイト」をコンセプトに、可読性が高く容量も軽いサイトに仕上げました。 ひと目見るだけで、最近のカヤックの動向が分かるようにニュースでTOPページを構成し、日々リアルタイムにカヤックの最新の情報を発信します。 技術的には、ブラウザのウィンドウサイズによって拡縮する画像はベクターファイルであるSVG（Scalable Vector Graphics）画像で置き換えたり（SVGはベクトル形式の画像のため、拡大してもボケない）、CSS3を用いることで画像の使用を極力控えたりするなど、ページの軽量化を実現しています。 カヤックサイトのCSSテクニックを丸ごと伝授！ 本稿では、サイトリニ
[Fireworks]これは便利！Adobe Fireworks CSS3 Mobile Pack | バシャログ。
ここ最近はピンク・フロイドを BGM に就寝している sakai です。どんどん陰気になってきている気がします。 11/12（土）に開催される「CSS Nite in MIYAZAKI Vol.3」に出演させていただくことになりました。 近隣の方、ご都合の合う方いらっしゃいましたら是非。Fireworks や Dreamweaver を使って効率よく Web 制作をするノウハウをご紹介する予定です！（詳細は近日公開します） さて、今回は先日リリースされた「Adobe Fireworks CSS3 Mobile Pack」のご紹介です。これはなかなかイイモノですよ！ インストール 拡張機能のダウンロードはこちらから。 Adobe Fireworks CSS3 Mobile Pack Download のリンクをクリックすると、Adobe Extension Manager が立ち上がって、自
![[Fireworks]これは便利！Adobe Fireworks CSS3 Mobile Pack | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c06e5dc16e1d75594b70da83a3dfbacbdc01b4e/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_fireworks.png)
エフェクトが無駄に凄いイメージスライダーを実装出来るjQueryプラグイン・Chop Slider - かちびと.net
実用性は別にして、こういうの嫌いじゃない ので記事にします。よくあるイメージギャラリー なんですが、画像が変わる際のエフェクトが 無駄に凝っています（褒め言葉です）。こんな 事もflashを使わないで出来るんだなー、と 素直に関心したので、同じ気持ちで見て 頂けたら嬉しいです。 エフェクトはかなり多く用意されており、どれもなかなか派手な印象です。これだけのエフェクトをクロスブラウザに対応させているのもちょっと驚きです。※IE6にも対応とあるのですが、現在諸事情で確認出来ませんので対応してなかったらごめんなさい。 えらいこっちゃ・・なエフェクトばかりです。エフェクトはかなりの数が用意されており、１つのエフェクトも細かい設定が可能になっています。 まずはエフェクトの一部を無言でご紹介します。 ちょっとヒーローとかの変身シーンみたいな感覚です・・実際に動きを見てもらうと、いかに無駄にすごい動きか
横に飛び出すメガメニューを実装するjQueryプラグイン・JQUERY VERTICAL MEGA MENU - かちびと.net
最近かなり見かけるようになった印象の、 大量のコンテンツを格納するメガメニュー の横に飛び出すタイプ。jQueryで実装して います。メガメニューはECサイトやポータル サイトなどなど、階層の深いWebサイトにて ユーザビリティ向上に貢献してくれます。 何度もクリックしないと目的の場所に到達できない、という設計はユーザーに取って不便ですし、離脱率も上げてしまいがちですので、大量のコンテンツを保有するWebサイトではこういったメガメニューの導入を検討するのも良いかも知れません。 メガメニューはドロップダウン形式が多いのですが、今日ご紹介するスクリプトはサイドメニュータイプです。 見た目はよくあるサイドナビゲーションメニューですが、マウスを乗せると横に関連ページなどが整理された状態で飛び出しますので視覚的にもコンテンツを探しやすそうです。 画像を含めてあげるのもなかなか効果高そうですな。 コー
JSONとJSONPの違い - あと味
解説は他にもたくさんありますが、私自身も使いはじめの頃、違いがよくわからなかったので。 JSONとは？ 汎用的なデータ記述方法です。こんな感じで書きます。 { 'blog' : 'あと味', 'author' : 'jdg' } まさにJavaScriptのオブジェクトですね。*1 JSONPとは？ JSONを以下のように変えたもの。 callback({ 'blog' : 'あと味', 'author' : 'jdg' }); 関数呼び出しっぽいですね。まぁ、関数呼び出しなんですけど。 どゆこと？となるポイント 見た目が関数っぽくなる意外に変更点はないように見えますが、クロスドメインでJSONを読み込む時は、なぜかJSONではなく、JSONPが使われます。（WebAPI等） また、アクセスしたらJSON形式のデータを返す単純なCGIを自分で作りたいと思った場合でも、JSONを返しても、J
DOM操作の主流になるか！？ セレクタAPIを使いこなそう
連載目次 従来、JavaScriptでは、以下のようなメソッドを利用して、操作対象の要素を特定していた。 getElementByIdメソッド：IDの値をキーにノードを取得する。 getElementsByTagNameメソッド：要素名をキーにノードを取得する。 getElementsByClassNameメソッド：class属性の値をキーにノードを取得する。 しかし、この方法で複雑な構造のHTML文書から要素を取り出す場合、コードが複雑になりやすいという課題もあった。例えば、以下は従来のgetElementXxxxxメソッドを利用した要素の取得例だ。 上記のJavaScriptコードでは、奇数番目の要素を特定するために全てのインデックス番号をif文で判定させている。ほかにも属性値やclass属性によって要素を絞り込むならば、同じような判定式を書いた経験が読者諸氏にもあるだろう。「もっと簡
構築のスピードとクオリティをあげる、本気のワイヤーフレームの書き方
要素を洗い出して、書き出す。 まずは、サイトの特長や企画特性に合わせて、各サイトの要素を洗い出します。コンテンツマップとは別に考える、いわゆる「パーツ」の部分も含まれるので、かなり量は膨大になりますが、しっかりやります。 んで、かならず「誰が読んでも何の事を言っているのかわかる一般用語で名称をつけます。」 例1：ECサイトの場合 ・ロゴ ・電話番号 ・SSLについての注釈 ・利用ガイド ・検索窓 ・買い物かご ・サジェストエリア ・商品画像 ・カテゴリーリスト ・TOPイメージ etc・・・ 上記の要素リストとは別に、コンテンツマップも作成したほうがいいです。 要素リストとは異なり、おおざっぱに言うとサイトの中にページとして存在させたい内容を洗い出します。 洗い出し終わったら、その内容を優先順位順に並び替え、一緒にできそうなところは一緒にして、分けた方がよさそうなところは分けて・・・とい
HTML5： ジャーナリスト、アナリストのための覚書
ちょっといつもと趣が異なる記事として、HTML5 Doctor で 「HTML5: briefing notes for journalists and analysts」 という記事が上がっていましたのでまたまた稚拙ではありますが翻訳など。 今回の記事は、ジャーナリスト、アナリスト （つまり、あまり技術的な話に精通していない人） 向けに、よくある質問とその答えをまとめたものです。技術者以外の人に 「HTML5 って何？」 って聞かれたときの参考になるかも。 原文 HTML5: briefing notes for journalists and analysts : HTML5 Doctor HTML5とは何ですか？ あなたが何を求めるかによりますが… 「HTML5」 という言葉には 3つの異なる用途があります。 HTML5 仕様 HTML5 の最も正確な意味は、W3C と WHATWG
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Nite in Ginza, Vol.49「バシャログ LIVE」 で紹介したDreamweaverの正規表現クエリーを公開します | バシャログ。
[Dreamweaver] コードビューを Sublime Textエディタ風な黒い画面になるようコードカラーリングを変更してみた | バシャログ。
IDEA * IDEA
ボックス要素を綺麗に整列出来るjQueryプラグイン・jQuery MasonryにInfinite Scroll（無限スクロール）機能を加えたサンプル - かちびと.net
Youtubeでもz-indexが効くようにする「?wmode=transparent」パラメーターをjQueryで自動挿入する - かちびと.net
Facebookページをアピール出来るソーシャルプラグイン・Likebox（いいね！ボックス）をオリジナルデザインに変更する方法 - かちびと.net
http://cs-d.awg.co.jp/csd/motivation
http://tusimarimo.com/