スクリプトを使用しないで、ツールチップがふんわりとアニメーションで浮かび上がるスタイルシートをAdmix Webから紹介します。 Creating a Bubble Coda Style with CSS3 デモページ 使用しているのはCSS3で、ふんわりと浮かび上がるアニメーションはChrome, Safariで動作可能となっています。 CSSアニメーションに未対応のFirefoxやIEなどのブラウザでは、アニメーション無しでツールチップが表示されます。 HTML HTMLはリスト要素で実装されています。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="bubblemenu"> <li> Penn Jillett <div> My favorite thing about the Internet is tha

WordPressにほんの数行記述するだけで、多くの便利な機能を付け加えるチップスをMegaMagから紹介します。 10 wordpress hacks & tricks that I like 1.コメントがついた記事をサムネイル付きで表示 サイドバーやフッタなどどこにでも、たくさんコメントがついた記事をサムネイル付きで表示します。 「http://an-alternative-image.jpg」はサムネイル画像が無い場合のデフォルトの画像を指定してください。 <textarea name="code" class="html" cols="60" rows="5"> <?php $popular = new WP_Query('orderby=comment_count&amp;posts_per_page=5'); ?> <?php while ($popular->have_po

CSS3で実装する角丸を少しでも滑らかにするスタイルシートのトリックをsitepointから紹介します。 How To Get Smoother Rounded Corners デモページ この現象は主要な各ブラウザ全てでおこる現象で、特にSafari(Mac)では顕著に現れます。 上記キャプチャはそのSafari(Mac)のもので、下記はそれを拡大したものです。 角丸の拡大 この現象は特定のカラーの組み合わせで生じるもので、特にオフホワイトの背景に対して明るいボーダーと暗いバックグランドを指定した際に見られます。 これを少しでも滑らかにするためのトリックを紹介します。 ビフォー HTML

Test your color IQは、２つの色の中間をグラデーションのように並べ替えて、「カラーIQ」を判定するオンラインサービスです。

2010年に向けて押さえておきたいウェブデザインのトレンドの14のポイントをWeb Design Ledgerから紹介します。 Web Design Trends for 2010 下記は、その意訳です。 また、同著者の別エントリーに対応したものもあります。 これはもう使用しない方がいいウェブデザインのトレンド はじめに 1. 特大のヘッダとロゴ 2. 手描き風のデザイン 3. 大胆で大きなフォント 4. タイポロジー 5. 1ページ レイアウト 6. インパクトがある画像 7. パースの活用 8. インタラクティブで直感的なデザイン 9. モーダルボックス 10. ミニマリズム 11. オーバーサイズのフッタ 12. レトロ 13. イントロボックス 14. 雑誌風のレイアウト はじめに このリストは、2009年に人気が高かったものからさらに発展するであろうトレンドを紹介しています。 ト

CSSやHTMLを知らなくても複数のカラムやグリッドレイアウト、タブ、角丸などがオンラインで簡単に作成できるLayout Generatorsを紹介します。

実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティスをDev Snippetsから紹介します。 Styling your Lists: 20+ Brilliant How to's and Best Practices

商用サイトでも無料で利用できる、ひらがな・カタカナ・漢字などが含まれている日本語のフリーフォントを紹介します。 最新版を公開！フォントの数が大幅に増えています。 2019年用、日本語のフリーフォント 366種類のまとめ

セレクトボックスの各アイテムにアイコンを配置して、グラフィカルに認識しやすくするスクリプトをMarghoob Sulemanから紹介します。

1. RSS FeedをFeedBurnerで配信 WordPressのRSS FeedsをFeedBurnerにリダイレクトさせます。 ※FeedBurnerの利用には、登録が必要です。 ルートの「.htaccess」に下記を記述します。 <textarea name="code" class="html" cols="60" rows="5"> <ifModule mod_rewrite.c> RewriteEngine on RewriteCond %{HTTP_USER_AGENT} !FeedBurner [NC] RewriteCond %{HTTP_USER_AGENT} !FeedValidator [NC] RewriteRule ^feed/?([_0-9a-z-]+)?/?$ http:///feeds.feedburner.jp/example [R=302,NC,

ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。 9 Common Usability Mistakes In Web Design 下記は、その意訳です。 1. クリックできるエリアが小さい リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。 解決方法 リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。 2. 間違った目的のためのページネーション ページネーションは、内容を複数のページに分ける時に使用します。 しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。 一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ペー

Development Seedから、グリッドやカラーチャートやフォント、スタイルシートなどの簡易リファレンスが記載された壁紙を紹介します。

ヘッダ内、ヘッダとコンテンツなど異なる色の背景の区切りに１ピクセルのラインを使用したデザインスタディをSpoonfed Designのエントリーから紹介します。

Flashを使用しないで、画像ギャラリーを実装するスクリプトやスタイルシートの紹介です。 Slideshow 2 minishowcase photo starfield simulation gal

david walsh blogのエントリーから、可読性・視認性やファイルの容量など、使い勝手を考慮した5つのスタイルシートのフォーマットを紹介します。 How I Format My CSS Files セレクタごとに1行で記述 セレクタごとに、プロパティ・値なども全てを1行に記述します。スタイルシートの行数が短くなり、ファイルサイズの軽減にもなります。 多くの人は、視認性が低くなると、意見するでしょう。

noupeのエントリー「37+ Great Ajax, CSS Tab-Based Interfaces」から、CSSとJavaScriptで実装するタブ型インターフェイス37選の紹介です。 37+ Great Ajax, CSS Tab-Based Interfaces 自動で切り替わるタブ型インターフェイス Easy Tabs 1.2 - now with autochange Rotating jQuery tabs example Tab Content Script (v 2.1) スライド式のタブ型インターフェイス Sliding Tabs Coda-Slider Perspective Tabs AJAXを使用したタブ型インターフェイス Ajax Tabs Content Script (v 2.1) 閉じることも可能なタブ型インターフェイス Tab Panels Close

Smashing Magazineのエントリー「Navigation Menus: Trends and Examples」から、最近のナビゲーションのトレンドと傾向を３ずつ紹介します。 サイトでは、他にもサンプルがたくさん紹介されています。 Navigation Menus: Trends and Examples ブロックを使用したナビゲーション

Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差 リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。 <textarea name="code" class="css" cols="60" rows="5"> ul, ol{ margin:auto -3em 1em 0; padding:0; position:rel