「エクセル2007 ピボットテーブル 全て更新したい」 といった検索が行われていました。 このサイト・インストラクターのネタ帳では、2003までのExcelで複数のピボットテーブルを全て更新する方法をご紹介しています。 先の検索は、同様のことをExcel 2007で行う方法を探している方によるものです。
SEO:Google、ペナルティの仕組みと解除方法について解説 米Google Matt Cutts氏が、検索ランキングを操作しようと不正行為を行うサイトに課すペナルティの仕組みとその解除方法について説明を行った。 公開日時:2011年02月17日 12:20 米Googleが不正にランキングを操作しようとスパム行為を行っているサイトにペナルティ(制裁)を与える際、それは手動対策(manual action)によるペナルティとアルゴリズム(自動)によるものという2種類に分類されることはSEOのエキスパートの間では広く知られていることだ。今回、同社ウェブスパムチームのMatt Cutts(マット・カッツ)氏が、GoogleWebmasterHelpに公開された動画にて改めて説明しているので紹介しよう。 アルゴリズムによるペナルティとは、キーワード詰め込みやコンテンツスパム、(不正な)Java
イージングのアニメーションを伴って画像を拡大・縮小表示するLightbox風のjQueryのプラグインを紹介します。 JQuery Image Flyout デモページ [ad#ad-2] jQuery Image Flyoutの特徴 プリローディング jQuery Image Flyoutではダイナミックな画像のプリローディング機能を実装しています。画像のローディング中は、ローディング用のテキスト、またはローディング用のアニメーションを利用することができます。 イージングのアニメーション jQueryをはじめ、イージング用のライブラリの全てのイージングのアニメーションをサポートしています。 フルサイズにも対応 画像の拡大時のサイズは、画像の最大のサイズに合わせて設定するか、表示領域に合わせてサイズを調整することが可能です。 フェードイン・アウトの対応 画像を表示する際、フェードイン・アウ
Demo: images IsotopeにはimagesLoadedプラグインも含まれており、画像のロードにコールバック関数を利用できます。 Isotopeの特徴 レイアウト モード: CSSだけではできない、インテリジェントでダイナミックなレイアウトを実現します。 フィルタリング: jQueryのセレクタを使用して、簡単にエレメントのフィルタリングが行えます。 ソート: あらゆるデータからソートが行えます。 各機能の互換性: レイアウトモード、フィルタリング、ソートの各機能は一緒に利用することができます。 最適化: Isotopeのアニメーションエンジンは、表示しているブラウザごとに最適なものを使用します。例えば、CSS3 transitons, transformsなどで、これらに非対応なブラウザ(IEなど)は、JavaScriptでアニメーションを実現します。 Isotopeの実装
iWeb2Shot [ad#ad-2] iWeb2Shotの特徴 ウェブページを高精細の画像にします。 画像のフォーマットは、PNG, GIF, JPG, TIF, BMP, PPM, PGMに対応。 画像のサイズは、16種類から選択可能。 ブラウザから簡単に利用できるようブックマークレットも用意。 利用時に登録やメールアドレスは、不要。 利用回数の制限も無し。 iWeb2Shotの使い方 使い方は、簡単です。 「URL」にウェブページのURLを入力します。 「Options」で、画像サイズ、画像フォーマットを選択します。 「Convert」ボタンをクリックします。
ウェブデザインにスパイスを効かせる一つの方法に、奥行きを与える、があります。フラットなデザインではなく、エレメントを使って奥行きを作り出します。 そんな奥行きを効果的にとりいれたウェブサイトを紹介します。
div要素だけでなく、p要素やli要素で実装されたパラグラフを新聞のカラムのようなレイアウトにするjQueryのプラグインを紹介します。 ezColumns デモ [ad#ad-2] ezColumnsの実装例 HTML p要素で実装したパラグラフをdiv要素で内包します。 <div id="groups"> <p>A - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p> <p>B - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p> <p>C - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Done
IE6, 7, 8, 9をはじめとする主要ブラウザ、iOS, Androidのスマートフォンに対応させるための@font-faceの指定方法を紹介します。 The New Bulletproof @Font-Face Syntax [ad#ad-2] 各ブラウザ・スマートフォンに対応させる@font-faceの指定方法 各主要ブラウザ、スマートフォンに対応させる@font-faceの記述は、下記のようになります。 @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?') format('eot'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-w
画像のサムネイルやテキストを配置したボックスなど、異なる高さのブロックが数多くあっても全ての高さを等しく揃えるスクリプトを紹介します。 Equal Height Blocks in Rows 一行目と二行目では、違う高さで揃えていることに注目してください。 [ad#ad-2] デモでは異なる高さのブロック(スクリプトオフ時)が、スクリプトによって行ごとに同じ高さに等しく揃えています。 デモページ 実装のアイデアとなったのは、「Making DIVs, using the CSS "Float Left" property...」とのことで、そのdiv要素がどの横列に属しているか調べ、その中で一番高いものに揃えています。 [ad#ad-2] 実装方法 HTML 画像やテキストを配置できるdiv要素を使用しています。 <div id="page-wrap"> <div></div> <div>
Find recipes online | Foodily | Food, I love you [ad#ad-2] パッと見のデザインも素敵なのですが、UIやコンテンツもかなり好みのサイトです。 大きい写真画像を背景に半透明のパネルをのせ、レシピ検索サイトにふさわしく検索のエレメントが中央に大きく配置されています。 右上の小さい動画アイコンも隙がない設計です。 動画を表示したキャプチャ [ad#ad-2] コンテンツの主となるレシピ検索もすばらしいです。 試しに「potato salad no mayo」で検索してみます。ポテトサラダのマヨネーズ抜きですね。 「potato salad no mayo」の検索結果のキャプチャ おいしそうなレシピがたくさんでてきました。 数多く表示される検索結果は、上部のバーや左右のアローでページを送ります。 また、さらに苦手な材料を追加して検索したり、似
抽出された見出しのキャプチャ [ad#ad-2] iWeb2Printの特徴 ウェブページをプリンターにフレンドリーなPDFに変換します。 ウェブページをオフラインでゆっくり読んでください。 ページのサイズは、レター、リーガル、A0-A9、B0-B10など多数のサイズに対応してます。 風景・肖像画、グレースケール・画像無し・背景無しなど選択ができます。 無制限に利用できます。 登録やメールアドレスの必要はありません。 iWeb2Printの使い方 iWeb2Printの使い方は簡単です。 「URL」にページのURLを入力し、「PDF」の「Convert」ボタンをクリックし、しばらくするとPDFファイルのダウンロードが始まります。
IE6, 7, 8を含めたクロスブラウザに対応した、画像を使用せずにCSSでグラデーションを適用したボタンを実装する実用的なチュートリアルを紹介します。 Cross-browser CSS gradient buttons デモページ [ad#ad-2] ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。 ホバー時のキャプチャ 実装のポイント スケラービリティ 文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小 アジャスタビリティ padding, font-sizeを変更することでサイズ調整可能 フレキシビリティ あらゆるHTML要素に適用可能 コンパチビリティ 主要ブラウザに優雅なグラデーションを提供 ユーザビリティ ノーマル時、ホバー時、アクティブ時を用
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
IE6/7でも動作する数少ない、可変レイアウト用グリッドシステムのCSS/JSのフレームワーク「Flurid」を紹介します。 Flurid - The Fluid CSS Grid [ad#ad-2] FluridはCSSベースで開発された可変レイアウト用グリッドシステムのフレームワークで、jQueryのプラグインとしても開発されています。 Fluridの対応ブラウザ Fluridの対応ブラウザは下記の通りです。 Internet Explorer (Windows) - versions 6.0 - 8.0 Mozilla Firefox (Windows/Linux) - versions 1.0 - 3.6 Fluridのデモ デフォルト Fluridのデフォルトのレイアウトです。
Photoshop, Photoshop Elementsを使用してカラーの写真画像をモノクロにするテクニックはさまざまなものがあります。その代表的なテクニックとそれぞれの利点・欠点を紹介します。 元にした画像:Chase the sun 下記は各ポイントを意訳したものです。 はじめに 1. 調整レイヤー:白黒 2. モード:グレースケール 3. 調整レイヤー:色相・彩度 4. モード:Labカラー 5. 調整レイヤー:グラデーションマップ 6. 調整レイヤー:チャンネルミキサー 7. Photoshop Elements:モノクロバリエーション 8. 調整レイヤー:色相・彩度x2 9. 調整レイヤー:白黒(カラースライダー) はじめに モノクロの写真は、ファッション雑誌をはじめ、Flickrのようなソーシャルウェブサイトでも非常に人気の高いジャンルです。デジタルが到来したことで、一つ重要
Tetoは指定URL以下にあるニコニコ動画の動画をMP3化し配信するストリームサーバ。 TetoはPerl製のフリーウェア(ソースコードは公開されている)。ニコニコ動画などで人気の高い動画として作業用BGMが知られている。長時間の動画で、音楽がずっと流れ続ける。それによって集中することもあれば、楽しさのあまりに集中力が途切れる場合もある。 動画一覧 同じくYoutubeではDICOというサービスを提供しており特定アーティスト(と関連アーティスト)の動画を流し続けることができる。それをもっと汎用的に、Webベースで提供するのがTetoになる。 Tetoは指定したURL中にある動画(ニコニコ動画限定のようだ)を取り込み、FFMPEGを使ってMP3に変換して配信するシステムだ。Webサーバにアクセスすると、取得される動画が一覧で表示される。そこからさらにタグを追加して動画を増やすことも可能だ。
Modernizr [ad#ad-2] ツールの概要 JavaScript ドキュメント 利用できるプロパティ @font-face border-image border-radius box-shadow text-shadow opacity Multiple backgrounds CSS Animations CSS Gradients など CSS3 PIE ツールの概要 ビヘイビア スクリプト(htc) デモページ 利用できるプロパティ border-radius box-shadow border-image multiple background images linear-gradient as background image
簡単なログインフォームをはじめ、お問い合わせフォーム、コメント用フォーム、ショッピングカート用フォーム、アンケート用フォームなど多種多様なタイプが用意された、バリデーション機能も備えたフォームのフレームワークを紹介します。 jQuery Form Framework - jFormer [ad#ad-2] jFormerの特徴 クライアントサイドのバリデーション サーバーサイドのバリデーション AJAXを使ったページ変更機能 CSSベースの簡単なカスタマイズ Botの防止(CAPTCHAは無し) 入力データのレジューム機能 フィールドのロック機能 フォームのテンプレートも多数用意 jFormerのデモ デモには、さまざまな実用的なフォームがあります。
Window Size Bookmarklet: see the size of any page to debug CSS3 media queries and adaptive layouts [ad#ad-2] CSS3 Media Queriesはユーザー環境の状態に適したスタイルシートを提供することができ、例えばブラウザやモバイルデバイスの異なる表示サイズにより、異なるデザインを適用することができます。 ここで紹介するのはビューポートのサイズを表示するシンプルなブックマークレットです。ブラウザの表示サイズ変更の確認・調整が簡単に行えます。 サイズを変更すると、リアルタイムに表示も変更 [ad#ad-2] ブックマークレットは以前はjQueryに依存して開発されていましたが、0.2より依存しないで動作するようになりました。 Window Size Bookmarklet(ブックマー
ユーザーにより多くクリックされる効果的なボタンにするには、どのように手をいれたらよいのかをステップごとに紹介します。
Google Chromeでfloatレイアウトが崩れる事象が発生しました。 かなりレアケースと思われますが、備忘録として以下に詳細を残しておきます。 1.サンプル サンプルはdl/dt/dd要素を使ったfloatレイアウトで、コメントフォームを想定しています。 (X)HTML(赤色が対象部分) <?xml version="1.0" encoding="euc-jp"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equ
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5:ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
いつもの同じようなデザインから離れて、新鮮でユニークなウェブデザインを生みだすために役立つ10のアイデアを紹介します。 10 Ideas for Creating Innovative and Unique Web Designs [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 カンバスはブランクから始める Photoshopで作業をはじめる時は、白ではなくブランクから始めるようにします。 白は白がある状態なので、何も無い真っさらな状態にします。 用意されたレイアウトに頼らない 960 Grid Systemなどのフレームワークを利用するのは確かに簡単で素晴らしいですが、そういった用意されたレイアウトには頼らずに自身で考えて作りだし、それを機能させる方法を見つけだしてください。 CMSは使わない 今日、WordPressを始めとする素晴らしいCMSが数多くリリース
フォームのテキストフィールドに、入力補助になるテキストを表示し、ユーザーの入力時にそのテキストを消去するjQueryのプラグインを紹介します。 jQuery Plugin: autoclear デモ [ad#ad-2] テキストフィールドに表示されるテキストには、class名を付与し、スタイルシートでカラーなどを設定することもできます。 デモは、「color:gray;」が指定されています。 autoclearの実装 HTML 表示されるテキストは、title属性内のデータを利用します。 <form method="post"> <label for="name">Name:</label><input type="text" id="name" name="name" title="John Smith" value="<?php echo $_POST['name'];
複数の異なるエレメントを組み合わせて、複雑で繊細なテクスチャを作成するPhotoshopのチュートリアルを紹介します。 Textured backgrounds in Photoshop ※クリックで拡大 [ad#ad-2] 上記の繊細なテクスチャは複数のレイヤーに、異なるエレメントを組み合わせ、異なるレイヤーの不透明度とモードが使用されています。 Photoshopでのレイヤーの状態は下記のようになります。
CSS Specific for Internet Explorer デモページ(※IE7で表示) [ad#ad-2] デモ紹介 1. 条件付きコメントの利用 2. CSS Hackの利用 3. 条件付きのHTML class デモ紹介 デモページは、下記のように設定されています。 スタンダードブラウザ(IE9, Firefox, Chrome, Safari, Operaなど) 背景色がグレー IE8 背景色がピンク IE7 or IE8互換モード 背景色がグリーン IE6 背景色がブルー 下記はデモページをIETesterで表示したものです。 IETesterの詳しい説明は、「IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester」を参照ください。 デモページ(※IE8で表示) IE9もWin7+IE9で確認したところ、背景はグレーに表示されていました。 [a
ログインフォームを実装する際に、大切な7つの要素と重要な1つの機能を紹介します。 元記事では下記のCSS3で実装されたフォームもダウンロードできます。 フォームのタイトル このフォームが何についてのものであるか手短に説明されたタイトル。特に、ウェブサイトの名称を記すことは非常に重要です。 非メンバー用のリンク 非メンバーが偶然、このページを見つけてしまうことがあるかもしれません。そして、メンバーを増やすチャンスもあるので、登録ページへの誘導も行っておきます。 ラベルとフィールド ログインフォームは通常、2つのフィールドで構成されていますが、ラベルは読みやすいようにします。 パスワードを忘れた場合 これは同じく、非常に重要なリンクです。多くのユーザーは多数のアカウントとパスワードをもっているものです。そして、しばしばそれはあなたのサイトでどれなのか忘れてしまうことがあります。 また、配置する
CSS3のテクニックはさまざまなものがありますが、その中からまさに今、そして次のプロジェクトに使用したくなるテクニックを紹介します。 The Bright (Near) Future of CSS [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 はじめに Styling HTML5 Classing like HTML5 Media Queries Styling Occasional Children Styling Occasional Columns RGB Alpha Color HSL and HSL Alpha Color Shadowy Styles Multiple Backgrounds 2D Transforms はじめに ここでフォーカスするのは、今、そして近い将来に使用するであろうスタイリングのテクニックです。HTML5の要素のスタイリング
チャイルドセレクタ(Child Selector)を使った、HTMLをできるだけ汚さないでグリッドレイアウトを作成できるCSSのフレームワークを紹介します。 Child Selector System [ad#ad-2] Child Selector Systemの主な特徴 超軽量サイズ(0.31KB) 使い方はとても簡単 余分なHTMLは最小限 コンテナはパーソナライズ可能(%, px, em) カラムのネストをサポート 条件付きコメントを使用すれば、IE5.5にも対応 Child Selector Systemのスタイルシート スタイルシートは超軽量で、下記のコードで全部です。 単位で使用している「%」は、「px, em」などに変更して使用することもできます。 div{float:left;width:100%} .right>div{float:right} .one>div{wid
jQuery.TinySlider デモ [ad#ad-2] jQuery.TinySliderの実装 HTML スライドで表示されているイメージはdiv要素の背景画像です。 <div id="slider"> <div class="image" style="background-image: url(img/img1.jpg);">Simple</div> <div class="image" style="background-image: url(img/img2.jpg);">Light</div> <div class="image" style="background-image: url(img/img3.jpg);">Easy</div> </div> JavaScript 「jquery.js」と「jquery.slider.js」を外部ファイルとし、下記のスクリプト
コンテンツを効率的に表示し、ユーザーエクスペリエンスを強化する、人気の高いデザインパターンを紹介します。 6 Popular Content Presentation Design Patterns [ad#ad-2] 下記は各ポイントを意訳したものです。 1. 価格表 2. 記事リスト 3. サムネイル画像 4. カルーセル・スライドショー 5. 水平スクロール 6. 無限スクロール 1. 価格表 価格表はサービスやプロダクトの価格を一覧できるようにしたものです。 ユーザーに基本的な機能と価格を比較させ、決断へと誘う効果があります。また、価格表自体にサインアップボタンを配置するのも効果的です。 LightCMS 2. 記事リスト 記事リストはニュースサイトやブログなどに多く見られ、よくできた記事リストにはタイトルだけでなく、記事の始まりや概略などを添えて表示します。これはユーザーにとって
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 MobilySlider 軽量ながらも高性能なコンテンツスライダー。 jShowOff さまざまなオプションを備えたコンテンツスライ
ボタンやアイコン、テキストに透明感のある光沢を与え、エレガントなスタイルにするPhotoshopのレイヤースタイルを紹介します。
補助系のメニューやちょっとしたアナウンスを掲載するのに最適なパネルをアニメーションでスライド表示させるjQueryのプラグインを紹介します。 jQuery: Plugin fixedTo デモページ [ad#ad-2] デモでは、ブラウザ枠の左と下側から2枚のパネルがアニメーションでスライド表示され、表示位置はスクロールしてもブラウザの枠に対して固定位置に表示されます。 デモページ fixedToの実装 パネルはdiv要素を使用し、テキスト・画像・リンクなどあらゆる要素を設置可能です。 [ad#ad-2] JavaScript 「jquery.js」と「jquery.fixedto.min.js」を外部ファイルとし、下記のスクリプトを記述します。 $("elemento").fixedTo({ "posicion":"left", "ancho":360, "alto":70, "ocul
CSSスプライトを使用した画像のロールオーバーにアニメーションでフェード効果を与える際の、妥当な実装方法、理想の実装方法、現実の実装方法を紹介します。 Fade Image Into Another (within a Sprite) デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 最初の方法:妥当 二番目の方法:理想 三番目の方法:現実 デモでは、上から順番に実装されています。 最初の方法:妥当 HTML 元のエレメント内にspanを一つ配置します。確かにこれは余分のマークアップと感じるかもしれませんが、spanを使用せずに疑似要素を使用すると対応ブラウザが限られてしまうのが現状です。 <a href="#" class="arrow">Arrow<span></span></a> 矢印画像はテキストを画像に置換して配置します。 .arrow { display:
Lilac @Lilaclog 杉って土壌保持力が無いから植林してもホント意味無いんだよね。私も伐採希望。時間はかかるけど、ブナやナラなどの広葉樹林の日本の森を取り戻そうよ。RT @kazu_fujisawa: 杉を早く伐採してくれ。なんでそんな簡単なことができん? 2011-03-07 23:19:35 @pukuma 土壌保持力はありますよ。ゴルフ場の芝生ですらあります。RT @Lilaclog: 杉って土壌保持力が無いから植林してもホント意味無いんだよね。私も伐採希望。時間はかかるけど、ブナやナラなどの広葉樹林の日本の森を取り戻そうよ。@kazu_fujisawa 2011-03-08 08:15:21
このウェブスペースへは、まだホームページがアップロードされていません。 早速、エックスサーバー上へファイルをアップロードしてみましょう。 アップロードの方法などは、サポートマニュアルをご参照ください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く