クロスブラウザ対応、CSS3をベースにして作成したナビゲーションのテンプレート集を紹介します。 HTML/CSSの初心者の人でも簡単に利用できると思います。

サムネイル画像をドラッグして、大きい画像の表示領域をその動作に合わせてスクロールさせるスクリプトを紹介します。 jQuery Image Scroller Plugin デモページ このスクリプトは作者がPUMAのサイトを構築する際に使用したスクリプトをjQueryのプラグインとして作り直したとのことです。 PUMAで使用されているのは、下記のページです。 <textarea name="code" class="html" cols="60" rows="5"> <div class="image-scroller"> <img src="images/feature.jpg" alt="" class="feature-image" height="1280" width="960" /> <div class="preview"> <img src="images/preview.j

Twitterで紹介したら、好評だったのでブログでもご紹介。 CSS3 PlaygroundはCSS3のスタイルシートをブラウザでの表示確認をしながら、スタイルシートを生成できるオンラインサービスです。 CSS3 Playground 現在対応しているのは、下記のスタイルです。 角丸とボックスシャドウ テキストシャドウ CSS3 Transform（回転・変形） ボーダー・背景周り テキスト周り

プロフェッショナル向きに開発された、HTML5+CSS3+jQueryなど直接実装に関わるファイルから、robots.txt, .htaccessなどサーバー関連のファイルも一式にまとまったテンプレートを紹介します。 HTML5 Boilerplate 昨日、当サイトで紹介した「HTML5 Reset」もHTML5+CSS3をベースに開発されたテンプレートセットですが、こちらはよりプロフェッショナル向けに開発されたものとなっています。 下記にその特徴を。 HTML5 Boilerplateの主な特長 クロスブラウザ対応（IE6も） HTML5対応 キャッシュの最適化と圧縮でGrade-Aのパフォーマンス モバイルブラウザへの最適化 クロスブラウザ対応のためにIEでは特定のclassを用意 プリント用のスタイルシート、パフォーマンスの最適化 HTML5でより早いページロードにする「.htac

jQuery Show Password Plugin デモページ 実装は既存のフォームにも簡単に組み込めます。 HTML デモのHTMLはシンプルです。 可視化は、パスワードのclass名を参照しています。 <textarea name="code" class="html" cols="60" rows="5"> <form action="#"> <ol class="forms"> <li> <label for="username">Username</label> <input type="text" id="username" /> </li> <li> <label for="password">Password</label> <input type="password" id="password" class="password" /> </li> <li class=

Webkit系ブラウザのSafariでよく見かける、角丸のにじみを解消するスタイルシートを紹介します。 Fixing the background 'bleed' Safariでborderとborder-radiusを使用した際に背景色が角丸の箇所でにじむのを解消するには、下記のスタイルシートを該当箇所に追記します。

Photoshopでつくるタイポグラフィのチュートリアルの紹介です。 Create an Editable On Screen Text Effect Sparkling Text Metal Tex

設置も簡単、カスタマイズも容易、フォームのテキストボックスとテキストエリアにテキストを表示するスクリプトを紹介します。 表示するテキストにはclassを付与できます（Demo 3参照）。 jQuery Textbox Hinter Plugin デモページ 主な特長 シンプルで軽量 スクリプトの知識は不要 表示するテキストにclassを付与できる textareaにもテキスト表示が可 クロスブラウザ対応 カスタマイズが簡単 デモと実装方法 実装は簡単で、フォームの各パーツに任意のclassを与え、テキストはJavaScriptに記述します。

HTML5+CSS3の環境で汎用的に利用できるHTML・スタイルシート・スクリプトなどのファイルを一式にまとめたテンプレートを紹介します。 ファイル構成：コメント無し版 各ファイルの説明 index.html HTML5の要素を配置した汎用的に利用できるHTMLファイル。各スタイルシートファイルも埋め込まれています。 css/main.css @import用のスタイルシートです。 css/reset.css Eric Meyerの「Reset CSS」です。 css/core.css ベースとなるスタイルが定義されています。 css/_patches 各ブラウザ用のスタイルシートです。 css/_print プリント用のスタイルシートです。 js Modernizrがセットされています。

ソーシャルメディアマーケティングの主軸＝SMO（Social Media Optimization）とは（後編） 2010年8月9日 TEXT：小川 浩（株式会社モディファイ CEO 兼クリエイティブディレクター） 本記事は「ソーシャルメディアマーケティングの主軸＝SMO（Social Media Optimization）とは（前編）」の続編になります。前編をまだお読みいただいていない方は前編からお読みください。 SMOとは「ソーシャルメディア最適化」の略であり、「SEO」（Search Engine Optimization：検索エンジン最適化）に対比する用語だ。言葉自体は2006年ごろには存在していた。「SEO」が検索エンジンから自社サイトへのトラフィックを最大化することであるように、ソーシャルメディアからのトラフィックを最大化するのが「SMO」だ。 SMOがいかに重要かを考えるには

ウェブサイトを構築する際、FlashとjQueryは非常に魅力的なツールです。コンテンツを実装する際にどちらを使用すべきか迷うこともあると思います。 両方の特徴を把握し、実装する際に適切に選択するための重要なファクターを紹介します。 A Closer Look at Choosing Between Flash and jQuery 下記は各ポイントを意訳したものです。 はじめに 1. FlashとjQuery どちらにするか重要なファクター 2. jQueryとFlashサイトのショーケース まとめ はじめに HTML5の登場により、それがFlashを破るか否かに関わらずこれらはウェブコミュニティで議論の的でした。この議論が活発に行われる中、Flash vs. JavaScriptの話題は少し失われていました。 ここではJavaScriptの中から特に人気の高い「jQuery」をとりあげ

Inset Border Effect jQuery Plugin by Robin Thrift This plugin puts a border around the targeted elements (typically images), but unlike normal CSS borders it covers up part of the image. When the element is hovered over, the border animates to the sides, revealing the whole image. DOWNLOAD v1.0 Usage Simple: $("img").insetBorder(); All options: $("img").insetBorder({ speed : 1000, // 1000 = 1 seco

Liebe Besucher von FootballPantherShops.com, Wir möchten Sie darüber informieren, dass die Webseite FootballPantherShops.com nicht mehr weitergeführt wird. Diese Entscheidung wurde getroffen, um Ihnen eine noch bessere Nutzererfahrung zu bieten und Sie auf neue, spannende Inhalte aufmerksam zu machen. Während die Seite nicht mehr aktiv ist, empfehlen wir Ihnen zwei hervorragende Alternativen, die

北朝鮮の公式サイトのソースを見てみると、http://www.korea-dpr.com/ocn/というアドレスへのリンクを、なんと872個のstrongタグで囲んでいるんですよね... こんなhtml見たことないよママ... どういう意味があるんだろう...SEO...なのかな... [北朝鮮公式サイト via Daily WTF via The Daily What] Adam Frucci（いちる）