CSS3 Menu. Free CSS Menu Maker
Fancy Drop Down Menus with Pure CSS! Create responsive, mobile-friendly web menus with CSS only. Light, fast, gorgeous menus - completely code-free. FREE download More demos Overview CSS3 is changing how we build websites. Even though many of us are still reluctant to start using CSS3 due to the lack of support in some browsers, there are those out there that are moving forward and doing some amaz
テーブルを見やすく、使いやすくするためのアルティメットガイド
ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単
無料で使えるSEOやホームページ制作に役立つツールまとめ | パシのSEOブログ
SEO対策に無駄なコストをかけないためにも、無料で使えるツールたちは欠かせない存在です。その中でも使えるヤツに限定してまとめておきます。 サイト分析ツール SEOチェキ！ URLからサイトの総合的な分析を行う。SEOチェック、Whois情報、順位チェック、HTTPヘッダ情報、ページランク偽装チェックなど。とても軽いのでかなりオススメ。 Website Explorer インストール型のサイト分析ツール。ウェブサイトの構造を探査・解析し、情報を階層表示。リダイレクト、リンク切れ、404エラーなどの調査が可能。Web型リンク切れチェックツールとしては、リンクチェッカーが便利です。 SEO-Browser サイト内のイメージやFlash、CSS、JavaScriptなどの視覚効果を排除し、検索エンジンの目線でサイト構造を分析。文字化けする場合はエンコードを指定（IEであれば、表示→エンコード→日
[CSS]スクリプトやテーブルや条件付きコメントやハック無しで実装するドロップダウン型のナビゲーション
CSS Hack、IEの条件付きコメント、table要素、JavaScriptを使用しないで、ドロップダウン型のナビゲーションを実装するスタイルシートをCSSplayから紹介します。 Two CSS menus - NO hacks, NO conditional comments, NO tables and NO javascript. demo ドロップダウンを表示するトリガーはhoverとclickの二種類があり、どちらもハック無しで実装されています。 二つとも、active時にはドロップダウンがキープされます。 ナビゲーションはリスト要素で実装されており、各親階層ごとにul要素が使用されています。 また、dl要素版も公開されています。
[CSS]サムネイル画像を表示するドロップダウン型ナビゲーション
タブ形式のドロップダウンの子要素にサムネイル画像を表示するナビゲーションのスタイルシートをCSSplayから紹介します。
My DebugBar | IETester / HomePage
DebugBar Home > Wiki > IETester :: Browser Compatibility Check for Internet Explorer Versions from 5.5 to 11 :: ANNOUNCE: If you are an Adwords user, The IETester team is proud to announce its new tool: SunnyReports, a simple and efficient Adwords reporting tools IETester is a free (both for personal and professional usage) WebBrowser that allows you to have the rendering and javascript engines of
Browsershots
No active screenshot factories. Please try again later. What is Browsershots? Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website's browser compatibility in one place. When you submit your web address, it will be added to the job queue. A number of
複数のブラウザでウェブサイトのテストができるツール「Browsera」 | ライフハッカー・ジャパン
仕事でウェブサイトのデザインや開発などに携わっている方はもちろんのこと、個人のブログやサイトでもときに必要なのが、ウェブサイトのテスト。エラーが潜んでいたり、別のブラウザで見るとレイアウトが崩れてしまっていたりでは、せっかくのウェブサイトが台無しです。そこで、複数のブラウザでウェブサイトのテストをサクっとやってくれる便利なツール「Browsera」をご紹介しましょう。 「Browsera」はウェブサイトのエラーやレイアウトをテストするためのウェブツール。同様のツールとしては様々なブラウザでウェブサイトのスクリーンショットを表示してくれる「BrowserShots」や「IETester」といったものもありますが、「Browsera」がこれらのツールよりさらに優れているのは、ブラウザのスクリーンショットを表示できるだけでなく、JavaScriptのエラーやレイアウト崩れなど、問題が起こりそうな
商用サイトでも無料の国内外のWeb制作に使える素材サイト総まとめ・2009 - かちびと. net
ローカル環境にストックしていた日本国内、海外サイトで商用OKなWeb素材を配布しているサイトのリンク集が結構な量になってきたので出来る限り多くの方とシェアしたいと思ってエントリーします。 懐の広いクリエイターさん方に感謝します。このリンク集は商用サイトでも利用が可能（Commercial use）なWebサイトの素材情報です。一応確認はしていますが、ご利用の際はご自身の目で必ずライセンスや利用規約（Terms of Use等）をご確認下さい。サイトごとに利用規約も異なります。当サイトは一切の責任を負いかねます。 日本国内、及び海外の商用OKなWeb素材配布サイトと日本語で紹介された海外記事のまとめです。 2度手間を防ぐ目的でリンクにマウスオーバーすると画像をツールチップで表示するようにしました。多少表示に時間掛かるかもしれません。 写真商用サイトでも利用できるロイヤリティフリー、パブリック
SEOを意識したサイトデザイン | パシのSEOブログ
完成したサイトにSEO対策を施すよりも、始めからSEOを考えて制作を行った方が効率も良く、バランスの取れたサイトが出来上がります。 基本となるデザインレイアウト 上図はネットで配布されているテンプレートなどで良く見かけるデザインですが、SEOを意識した簡易的なレイアウトとなるとどうしてもこんな感じになってしまいます。あくまで基本となるレイアウトですので、作るサイトにあわせ位置の調整や、必要な項目の追加を行ってください。 ヘッダー ページの見出しとなるh1と、ページの概要を説明するためのテキストを配置します。h1とテキストは全ページ異なるユニークなものを記述します。 ヘッダーの左側にはロゴを配置し必ずリンクにします。ロゴは、ソースの上部に位置し、全ページ共通のトップページへのリンクとなる為、CSSの画像置換えを使用しアンカーテキストにはメインキーワードを含ませた方が良いでしょう。 イメージリ
Lightbox 2
Overview Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers. What's New in Version 2 Image Sets: group related images and navigate through them with ease Visual Effects: fancy pants transitions Backwards Compatibility: yes! How to Use Part 1 - Setup Lightbox 2 uses the Prototype Framework and Scriptaculous Effe
Lightview “Overlay anything width style”
Lightview allows you to easily create the most beautiful overlay windows using the jQuery Javascript library. By combining support for a wide range of media with gorgeous skins and a user-friendly API, Lightview aims to push the Lightbox concept as far as possible. Lightview uses HTML5 to help you deliver the best experience across every browser. Let it enhance your media automatically or create c
GD-高速道路ゴシックJA-OTF (GD-HighwayGothicJA-OTF) 高速道路の文字を再現しよう計画 5r4ce2[Fiber Force2] pumpCurry's Website - fontJunction at hogera.com
ぱんかれはいつも「なんかないかのう」とつぶやきます。 しかし、このワードをつぶやいているときは面白いモノを作るきっかけを探しています。 高速道路フォントを作り始める前にも「なんかないかのう」とつぶやいていました。 最近はコンビニエンスにいろいろなものが簡単に実現できるようになりました。 調べることも、遊ぶことも、作ることも、何か始めることでさえ、ネットにつなげることができればすぐ完結できてしまいます。 そんな世の中を受け入れつつも、他の方の「こんなのないかのう」を満たすような、なにか変わったものをつくりたい。 サイト名称「5r4ce2(ファイバーフォースツー)」は、Fiber(繊維のような)とForce(力)、この2つを組み合わせたものです。 みなさんと、がっしり結びつきながら、新たな方向性という「力」を、世に発信していければと考えています。 いっしょに、私たちと楽しんでみませんか？ 20
無料でFlashの制作環境を構築 FlashDevelopとFlex SDKのインストール | ClockMaker Blog
FlashDevelop(フラッシュ・デベロップ)というActionScriptのエディターが非常に優秀で、これとAdobeがオープンソースで提供しているFlex SDKがあれば、お手軽かつ無料でFlashを作ることができます。 FlashDevelopはソフトの軽さと強力なコードヒント機能によってプロのFlasherから熱烈な支持を受けているエディターです。まずはコードヒント機能がどのくらい優れているか分かる90秒のライブコーディングビデオを用意しました。 FlashDevelop Code Hint Movie from clockmaker on Vimeo. コードの補間によってキータイプの量を劇的に減らせ、自動的に整形されるため見通しの良いコードが仕上がるのがおわかりになるかと思います。 では、そんな便利で高機能なFlashDevelopのインストール方法を紹介します。できる限り
JPEG画像をより美しく、より軽量に最適化するテクニック
JPEG画像をより美しく、より軽量に最適化するテクニックをSmashingMagazineから紹介します。 Clever JPEG Optimization Techniques 1. 「8ピクセル」のグリッド 2. カラーの最適化 3. JPEG最適化の一般的なTips 1. 「8ピクセル」のグリッド JPEG画像は、あなたが既に知っているように8x8のピクセルのブロックから成り立っています。画質を低くするとよく分かります。 この8x8ピクセルを利用して、JPEG画像を最適化します。 画質10で作成したサンプル 二つの正方形は同じ大きさ（8x8ピクセル）です。左上のはきれいに見え、右下のは汚く見えると思います。 これらは、それぞれ8x8のグリッドに並べたもので、左上はグリッドに揃えたもの、右下はグリッドに揃っていないものです。 保存する際に画像は、8x8ピクセルのブロックに分けられるため
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]1ピクセルのラインを巧みに使用したドロップダウン型ナビゲーション%26utm_content%3DGoogle%2520Reader)
css-lecture.com
日本橋ヨヲコ ブログデザインコンテスト | 無料ブログ JUGEM(ジュゲム)
HTMLもCSSも必要なし！誰でも簡単にWEBサイトが作れる「Moonfruit」 | ライフハッカー・ジャパン