Flickr風スライドショーをJavaScriptで再現 (1/5)
Webサイトで写真画像をいかに美しく、魅力的に見せるか――。そう考えたときに参考になるのが、多くのユーザーが利用しているオンライン・フォトアルバムです。中でも、世界中のブロガーが愛用する「Flickr（フリッカー）」は、思わずため息をつくような美しい写真が大量にアップロードされている代表的なサービスです。 Flickrが多くのユーザーに支持されている理由は、コミュニティ機能の充実や外部利用のしやすさなどいくつもありますが、1つにはユーザーインターフェイス（UI）の美しさ、使い勝手のよさがあげられます。今回は、このFlickrのUIの一部を参考に、自分のWebサイトをブラッシュアップしてみましょう。 今回のお手本サイト：『Flickr』 米ヤフーが運営するオンライン・フォトアルバムサービス。特に他のユーザーが自由にコメントをつけたり、タグをつけて分類したりできるコミュニティ機能や、使い勝手の
JS+PHPでFacebookページをカスタマイズ！ (1/3)
Facebookを企業で活用するために、Facebookページの開設・運用方法を解説する本連載。前回は、Facebookページの開設の流れと、iframeを使ったウェルカムページの作成方法について、Web ProfessionalのFacebookページを例に解説しました。今回も引き続き、Facebookページのカスタマイズについて詳しく説明します。 Facebookページをカスタマイズする2つの方法 Facebookページの本格的なカスタマイズに入る前に、Facebookページへのオリジナルコンテンツの追加方法を整理しておきましょう。Facebookページは複数の「タブ」で構成されており、ページ内に新しい「タブ」を設けることでコンテンツを追加できます。タブを追加する方法は、（1）既存のFacebookアプリを利用する、（2）新しくFacebookアプリを作る、の2つがあります。 （1）既
ASCII.jp：Facebookページの作り方、教えます｜今日からできるFacebookファンページ制作＆運用ガイド
ローソン、無印良品、リクルート――世界6億人ものユーザーを抱える巨大SNS「Facebook」の日本での本格的なブレイクを前に、ファンページを開設する企業が相次いでいます。しかし、国内でのFacebookの企業活用はまだ始まったばかりで、実際にどのようにしてFacebookページ（ファンページ）を作り、運用したらよいのか？ 多くの企業が手探りの段階です。 本連載では、Facebookページの作成を請け負うWeb制作会社「TAM」の加藤 洋氏が、Facebookページの開設からカスタマイズ、ファンを獲得する方法まで、Facebook活用の具体的なノウハウをシェアします。（編集部） なぜいまFacebookなのか？ 私が勤務するTAMでは、Facebookをはじめとするソーシャルメディアの活用を企業へ積極的に提案しています。お話する中で必ず出るのが、「Facebookが他のSNSと何が違うのか
絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
一目で分かるWebサイト制作の流れ
一般的なWeb制作のプロジェクトについて、大まかな流れとポイントを4つのフェーズで説明します。Webディレクターは、各フェーズのポイントを把握し、的確なディレクションをしていく必要があります。 打ち合わせから提案まで Web制作は、クライアントからの問い合わせや、営業が制作案件を取ってくるところから始まります。この時点で見積りの提出が必要な場合もありますが、大抵は最初にヒアリングのために初回打ち合わせ（オリエンテーション）をセッティングします。なお、案件を受ける際には、コンペか否かも必ず確認しましょう。 初回の打ち合わせで、クライアントの要望やサイト制作の目的などを把握したら、次に企画提案書を作成します。要望や案件規模にもよりますが、初期段階の提案ではプロジェクトの全体像やコンセプトに沿った企画案を盛り込みます。クライアントから要望があれば、この段階でデザインのラフ案を制作することもありま
jQuery＋CSSによるカルーセルパネルの作り方 (2/3)
スクリプト部分は次のようになります。 ▼サンプル01（スクリプト部分） $(function(){ //初期設定 $("#carouselInner").css("width",620*$("#carouselInner ul.column").size()+"px"); $("#carouselInner ul.column:last").prependTo("#carouselInner"); $("#carouselInner").css("margin-left","-620px") //戻るボタン $("#carouselPrev").click(function(){ $("#carouselNext,#carouselPrev").hide(); $("#carouselInner").animate({ marginLeft : parseInt($("#carouselI
透過PNG対応！jQueryでオリジナルツールチップ (1/3)
「ツールチップ」の完成画面。左から、CSSで装飾するツールチップ、透過GIFを使ったツールチップ、透過PNGを使ったツールチップ（画像クリックでサンプルページを表示します） CSSで装飾するシンプルなツールチップ 最初に作成するのは、リンク（a要素）にマウスカーソルが重なると補足テキストをフェードインで表示する、シンプルなツールチップです。ツールチップはマウスカーソルの右下にピッタリくっ付いて表示され、マウスの動きに合わせて移動します（サンプル01）。 HTML／XHTML（以下、HTML）は以下のようになります。ツールチップを設定するリンクはa要素で通常通りマークアップします。ツールチップ内に表示する補足テキストは、a要素の後ろにspan要素で記述します。span要素には「tooltip」というclass属性を設定します。 ▼サンプル01（HTML部分） <p>Lorem （中略） qu
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
ASCII.jp：驚きのExcel 超早技ベスト15 これは便利！｜Excel達人の新定番テク60 知らないあなたは損してる！
マンネリ化した方法でExcelを使っていないでしょうか。実はもっと簡単で手早くできる技があるのです。使わないなんてもったいない。アナタの知らない「新」Excel技大特集！ 第1回は、手間を省いて操作をすばやく！ 今すぐ役立つ厳選早技15を紹介します。面倒な入力や編集作業をどんどん片づく！ 驚きのExcel 超早業ベスト15――インデックス 技1――表の早技 表の見出しを除いて列幅を自動調整 技2――入力の早技 支店名をいつも決まった順番でオートフィル入力 技3――入力の早技 「＝」の代わりに「＋」キーで式を入力 技4――入力の早技 セルを組み合わせて思いどおりに連続データを入力 技5――入力の早技 ながーい連番を一発入力 技6――編集の早技 ツールバーの［下線］ボタンで二重下線を引く 技7――表の早技 基本の行列入れ替えはボタンで 技8――表の早技 多様な罫線を使った複雑な表は「罫線なし」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ゼロから始めるレスポンシブWebデザイン入門
実践！iPhone＆Androidサイト制作ガイド
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門
IEにも対応！10分でできるWebフォント実装法 (1/3)