先日紹介した「レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編」の続編となる、リスト・カレンダー・表・フォームなどのエレメントの実装や進歩したスタイルシートのテクニック集をSmashing Magazineから紹介します。
先日紹介した「レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編」の続編となる、リスト・カレンダー・表・フォームなどのエレメントの実装や進歩したスタイルシートのテクニック集をSmashing Magazineから紹介します。
GoogleやYahoo!の検索結果の上位に来ないページやサイトは存在していても存在していないのと同等の扱いを受けてしまうため、検索エンジン対策最適化、すなわち「SEO(Search Engine Optimization)」を専門に行う業者が無数に存在しており、まことしやかにいろいろな噂や都市伝説めいた誤解が流布されています。 当然ながらこういった誤解によって最大の被害を受けるのは検索エンジンの利用者と検索エンジンを提供する側の双方です。そのため、Googleがついに重い腰を上げ、「Googleのインデックスやランク付けなどに関する10の誤解」について公式ブログで説明をし始めました。 詳細は以下から。 Webmaster Central 日本版 公式ブログ: Google のインデックスやランク付けなどに関する、10 の誤解 Official Google Webmaster Centr
デザインハック1周年記念 タメになる? ダメになる? おばかハウツー(1) 90秒でRSSアイコンを作る方法 川田十夢(cmrr_xxx) 2009/8/26 ゼロからのスタートに疲れた皆さんのためのフォトショップハウツーTipsです。おばかだけどちょっとだけタメになるハウツーをご紹介 ゼロからのスタートに疲れた皆さんのためのフォトショップハウツーのTipsです。例えるならば、冷蔵庫の余りモノを使って短時間でササっと一品作るみたいな、数種類のレトルトカレーを混ぜ合わせてプロ顔負けの味のカレーを作るみたいな、クジラって本当に捨てるところないよねみたいな、おばかだけどちょっとだけタメになるハウツーをご紹介いたします。フォトショップの最新機能は一切使っていないので、地球にも財布にもやさしい企画となっています。 90秒でRSSアイコンを作る方法 本記事は、都合により掲載を延期します。 [an er
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Sean P Aune氏がSitePointにおいて19 Firefox Add-ons For Designersのタイトルのもと、Webデザイナ向けのFirefoxエクステンションを紹介している。Webデザインの作業をおこなうにあたり、複数のプログラムを起動して使うのではなく、1つのプログラムで複数の処理を簡単に行いたいという趣旨の内容になっている。紹介されているエクステンションは次のとおり。 カラーツール ColorSuckr (画像から代表的な色を12色取り出して、そのデータからカラースキーマを作成する) ColorZilla (ページのみならずブラウザの任意のポイントのカラーをピックアップするツール。任意の2点間の距離も測定できる) F
Webアプリケーションのファンクションテストを行うツールとして注目されている「Selenium」のバージョン1.0が6月20日にリリースされました。安定性が向上するとともに、Firefox 3.0、3.5(Selenium IDEは1.0.2から、Firefox 3.5に対応)や、Internat Explorer(以下、IE) 8などの最新のWebブラウザにも対応しました。 本稿では、Selenium 1.0をベースとしたSelenium IDEとSelenium RCを利用した効果的なSeleniumの利用方法を紹介します。 Webアプリのテストで誰もがイラつく大きな課題 Webアプリケーションテストを手で行うと、非常に煩雑です。Selenium登場以前の従来のやり方では、次のような問題がありました。 回帰テストに時間がかかる バグ修正や仕様変更などで、Webアプリケーションを変更した
空白というか白の使い方がクールですね。 手軽にウェブサイトにイメージギャラリーを設置したい時にいかがでしょうか。 日本語もいけるか試したら普通にいけたのでご紹介。 使い方は以下に。 FLASHイメージギャラリーのダウンロード サンプルデモはこちら カテゴリ分けも簡単に ※ダウンロード後、ちょちょっと変更かけないと日本語に対応しません。 とりあえずダウンロードしたファイルを解凍すると以下のような展開になります。 あまり説明は不要かもしれませんが誰でも設置できるようにする為に、超簡易的な構図から。 ホントはもう少し複雑ですが、「触る部分」だけチョイスします。 index.htmlを開けばgallery.swfを読み込み、sallery.swfはgallery.xmlをよみこんでます。 gallery.xmlに画像の名前や、カテゴリ情報などが掲載されています。 まずやる事は以下の二つのファイルを
Sexy Music Album Overlays Komodo Media これは楽しい!どんな画像もCDのアルバム風にできるCSSテクニック。 どんなサイズの画像も、次のようなジュエルケースに押し込んでしまえるCSSのテクニックです。 CSSが無い状態だと次のような殺風景な状態ですが、CSSとPNGのオーバーレイによって美しいジュエルケースに入った状態になってますね。 他にもスタイルが容易されていて、CDのディスク風にする例 同じようにレコード風にする例も紹介されています。 これはすばらしいですね。応用して、ゲームソフトのパッケージ風にしてみたり、色々できそうです。 関連エントリ CSSリストに関する5つのテクニック集 CSSとdivを使った画像先読みテクニック 便利なCSSテクニック30選 本の目次部分のようなリストをCSSでデザインするテクニック
Web制作に使えるWebサービスやツールなどが様々なサイトでかなり 紹介されています。便利なものですが、多すぎて混乱するので、 備忘録的にローカルサーバーに入れたWPでリンク集を作っていました。 そろそろ数が落ち着いて来たので多くの方とシェアしたいと思い、公開してみます。 現在330ありますが、追加していく可能性があります。 リンク集は全て無料で使える事を条件に集めていました。英語が苦手な方もいらっしゃいますのでTwitterサービスのまとめ同様、日本語で使い方などを説明してくれているサイトにリンクしています。無い場合は海外サイトにリンクしていますが、その場合はアメリカの国旗をつけてあります。サイトがアメリカのものかは知りませぬ。分かりゃいいんだ、分かりゃ。 無料といえどもライセンスの縛りもありますので自己責任でご利用下さい。 使えるかどうかは個人差が生じますので何とも言えませんが、お役に
[CSS]スタイルシートの実用的なテクニック集:レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編
あ"ー。 これは凄いの一言。 もうはてブホッテントリ入りしてるものは紹介しないという私のポリシーを捻じ曲げてでも多くの人に伝えたい。 様々なシルエット、人物から植物、動物、魚などがまとめられたエントリ。 いや、これはすごいわぁ・・・。 あらゆる無料シルエットが勢ぞろい 説明は不要だろう。 すばらしいまとめエントリ。 85 Free High Quality Silhouette Sets リンク先をブックマークしておけばかなり長期的にお世話になれるはずです。 近い将来で私が使いそうなものだけピックアップ。 フッターの背景によくつかわれるやつ。 こちらも同様にフッターの背景に用いられる。 自然をイメージしたサイトに使えそう。 最近ならバリアフリー関係のサイトにもあう。 ビジネス系、SEO系、マーケティング系、ニュース系などに使えそう。 最近は実写が多いですけどね。 上と同様にビジネスシーンに
これは絶対覚えておいた方がよいシルエットの素材集。 85サイトのフリーかつハイクオリティなシルエット素材集が物凄い勢いでまとまっています。 覚えておくと色々な場面で使えることは間違いなさそう。 人型だけじゃなくて、動物や昆虫・植物などそろってます。 リンク先は以下のURLから参照してください 85 Free High Quality Silhouette Sets | Graphics
ul, ol, dl要素を使用したスタイルシートの5つのトリックをPieter Beulqueから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ol> <li><span>Lorem ipsum dolor ... elit.</span></li> <li><span>Aliquam ... eu risus.</span></li> <li><span>Vestibulum ... neque.</span></li> <li><span>Lorem ipsum dolor ... elit.</span></li> <li><span>Aliquam ... eu risus.</span></li> <li><span>Vestibulum ... neque.</span></li> </ol> </
PHPからOffice・Photoshop・PDF等の各種ファイルを操作するためのライブラ... 次の記事 ≫:アプリケーションを有無を言わさず終了させるAlt+F4の強力版が使える... 最近話題になった、デザインに役立つ美麗サイトデザイン集やロゴデザイン・写真集をまとめてみました。 沢山にあるのですが、参考にできそうなものばかりです。 サイトデザイン・サイトの特定部分のデザイン集 15 Creative WordPress Header Designs | Web Design Tutorials | Creating a Website | Learn Adobe Flash, Photoshop and Dreamweaver クリエイティブなWordPressのヘッダーデザイン集。どれもインパクト大なものばかり 25 Inspiring Examples of Sign-Up P
TOP > WebService > だんだん小さくなるドット柄の背景パターンを制作してくれる「Dotted Background Generator」 WEBデザインの印象を決定付ける大きな一つの要素の一つに背景があります。様々な背景素材やジェネレーターがWEB上で公開されていますが、今日紹介するのはだんだん小さくなるドット柄の背景パターンを制作してくれる背景ジェネレーター「Dotted Background Generator」です。 上記のように上部から下部に向ってだんだんと小さくなっていくような背景を簡単に作る事ができます。 詳しくは以下 使い方は至って簡単でドットのカラーと、背景色、そして高さを指定すればOKです。色はカラースライダーなどは実装されていませんので、指定する必要があります。また選べるカラーはドット、背景ともに2色までとなっています。背景色は2色選んだ場合はA
せっかくコンテンツを作っても、リンクがユーザにクリックされず、内容を見てもらえない、という悩みをお持ちのWEBマスターの方は多いのではないでしょうか。 今回は、携帯サイトでユーザを次ページに導くためのテクニックをご紹介します。 筆者がユーザビリティテスト(ユーザ行動観察調査)を通して得た実感として、携帯サイトの方がパソコンサイトよりも次ページへの誘導が難しいという印象があります。ある携帯の有料会員制サイトでは、「ユーザはいつも利用しているリンク以外はほとんどクリックしない」というユーザ行動が見られました。 理由として、携帯サイトは 読み込みが遅い隙間時間に利用される場合が多く、利用時間が短いパケット代がかかる などが考えられます。 そのため、携帯サイトでユーザを次ページに誘導するためには、パソコンサイト以上に誘導方法を意識する必要があります。以下、ユーザビリティテスト(ユーザ行動観察調査)
上記のように半透明な箇所がある画像の場合、PNGで保存する前にモードをグレースケールにすることは非常に重要です。 グレースケールモード:[イメージ]-[モード]-[グレースケール] 2. 色数はより少なく 画像のカラーを減らす方法として、前回紹介したポスタリゼーションに代わる方法を紹介します。 この方法は256色限定で、カラーを最適化できます。 半透明の画像からイメージ箇所のみを抽出し(半透明は削除)、インデックスカラーに変換しマスクを適用します。 詳しい手順は下記の通り。 画像を開き、[イメージ]-[複製]で画像を複製します。 複製した画像に、[フィルタ]-[PhotoWiz]-[Remove Transparency]で透明箇所を取り除きます。 ※「PhotoWiz」はRemove Transparencyを参照ください。 [イメージ]-[モード]-[インデックスカラー]を選択し、イン
Save here easily, the logo(only visible to yourself) you made and access to them later, on your next visit, you will be able to re-edit... NO DESIGN FOUND ... 1You need to enter a text into the input first.Then select options. 2Make a font choice into the list, and choose an effect (No, Outline Or Shadow). 3Choose a logo size (from 5 to 100px) in pixels. 4Choose an effect from the list : Gradient
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く