[CSS]シンプルなHTMLで角丸のタブをより美しく実装するチュートリアル
画像を使用せずに、リスト要素で実装したシンプルなHTMLで角丸のタブをより美しく実装するチュートリアルを紹介します。 (Better) Tabs with Round Out Borders [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ 実装 デモ デモはChrome, Safari, Firefox, Operaでご覧ください。 IEはたぶんIE10で対応するはずです。 デモページ 実装 まずは、HTMLから。 HTML タブをシンプルなリスト要素で実装します。 <ul class="tabrow"> <li>Lorem</li> <li>Ipsum</li> <li class="selected">Sit amet</li> <li>Consectetur adipisicing</li> </ul> [ad#ad-2] CSS CSSの実装は、少しずつキャプチャと
これはかわいい！クリスマス関連や雪の結晶などのPhotoshopのシェイプ素材のまとめ
クリスマスリーフ、クリスマスツリー、サンタ、雪だるま、スノーフレークなど、クリスマス関連のPhotoshopのシェイプ素材を紹介します。
IEの異なるバージョンごとにスタイルシートを適用する方法のおさらい
CSSやJavaScriptを使って、IE6, IE7, IE8, IE9 とIEの異なるバージョンごとにスタイルシートを適用する方法のまとめを紹介します。 Use Different Styles For Different Internet Explorer Versions [ad#ad-2] 下記は各ポイントを意訳したものです。 CSS: 条件付きコメント(class) CSS: 条件付きコメント(外部スタイルシート) CSS: CSS Hack JavaScript JavaScript: jQuery おまけ CSS: 条件付きコメント 条件付きコメントを使用して、ドキュメントの一番上の要素(html)にIE6/7/8用のclassを付与します。 HTML <!--[if IE 6]> <html class="ie6"> <![endif]--
[CSS]ボタンのホバー時にアニメーションを適用するCSS3初心者向けのチュートリアル
ボタンのフォントとカラーをセットし、下線を消します。 .buttonText { font: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; } a { color: #fff; text-decoration: none; } [ad#ad-2] 実装：アニメーションでボタンのサイズを変更 ボタンのサイズをアニメーションで変更します。 デモページ: demo 1 CSS:Basic ボタンに「display:block;」でブロック要素にし、ボタンの基本となるスタイルをセットします。 #button1 { background: #6292c2; border: 2px solid #eee; height: 28px; width: 115px; margin: 50px 0 0 50px; padding: 0 0 0 7px;
[JS]複数の表示サイズごとに異なるイベントが設定できるResponsive Web Design用のスクリプト -Breakpoints.js
Responsive Web Design用に表示サイズの複数のブレイクポイントを定義し、異なるイベントを設定できるjQueryのプラグインを紹介します。 デモページ：幅640pxで表示 デモページで設定されているブレイクポイントは下記の4つです。 1024px 768px 480px 320px [ad#ad-2] Breakpoints.jsの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="http://xoxco.com/projects/code/b
1クリックで画像から便利なカラーパレットを作成でき、共有もできるオンラインサービス -Colorpilgrim
手元やオンラインの画像からカラーパレットを1クリックですぐ簡単に作成でき、共有もできるオンラインサービスを紹介します。 もちろん、他の人が作成したカラーパレットをダウンロードすることもできます。 Colorpilgrim [ad#ad-2] Colorpilgrimでカラーパレットを見る Colorpilgrimでカラーパレットを作る Colorpilgrimでカラーパレットを見る Colorpilgrimでは数多くのカラーパレットがカテゴリごとに登録されています。 これらを見るのに登録は不要です。 ※カラーパレットのダウンロードには、登録が必要です。 下記にいくつかご紹介。
ディテールの作りこみに役立つ、全75種類のピクセルベースのパターン素材
商用でも無料で利用できる、ピクセルベースのPhotoshop用のパターン素材を紹介します。 パターンはすべてシームレス用に作られています。
[CSS]テキストに美しい3Dやレタープレスなどのエフェクトを与えるスタイルシート
テキストにシャドウをつける『text-shadow』で、Photoshopで作ったかのように美しい3Dやレタープレスなどのエフェクトを与えるスタイルシートを紹介します。 Text Effects using CSS3 [ad#ad-2] CSS3を使ったテキストエフェクトのデモ text-shadowの指定方法 CSS3を使ったテキストエフェクトの実装 CSS3を使ったテキストエフェクトのデモ text-shadowを使った3種類、@font-faceを使った1種類のデモがあります。 ブラウザは、Chrome, Safari, Firefoxでご覧ください。 デモページ text-shadowの指定方法 text-shadowの指定方法は下記のようになります。 text-shadow: h-shadow v-shadow blur color; h-shadow 水平方向のシャドウのサイズ
[JS]jQueryのプラグイン100選 -2011年総集編
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
2011年のウェブデザインのトレンドを振り返る
2011年のウェブ制作の話題の中心はHTML5とCSS3でしょう。 ここではデザイン面を中心に、2011年に人気が高かったウェブデザインのトレンドを紹介します。 Popular Web Design Trends in 2011: Over 50 Inspiring Examples [ad#ad-2] 下記は各ポイントを意訳したものです。 Responsive Web Design 点線 サークル レトロスタイル リボン マジックナンバー『3』 少しめくれてるペーパー ボーダーレス グリッド 対角線 Responsive Web Design Responsive Web Designとは、ユーザーが利用する環境（スクリーンサイズなど）に合わせて最適なレイアウトを提供する方法です。デスクトップ用のブラウザだけでなく、iPhoneなどのスマートフォン、iPadなど、あらゆるデバイスに最適な
リリースされたばかりのjQuery 1.7.1に対応したチートシート
先月、リリースされたばかりのjQuery 1.7.1に対応したチートシートを紹介します。 即ダウンロード、即保存ものですね。 jQuery 1.7 Visual Cheat Sheet [ad#ad-2] jQuery 1.7.1は1.7のバグフィックス版で、リリース情報は下記をご覧ください。 jQuery 1.7.1 Released jQuery 1.7 Released jQuery 1.7のAPIで大きく変わったのは、.on(), .off()が追加されたことです。これは既存の.bind(), .unbind()に代わるもので、他にも.on()は.delegate(), .live()、.off()は.undelegate(), .die()に代わります。 これらは1.7.1でも利用できますが、これからは.on(), .off()を使用することが推奨されています。 チートシートでは
[CSS]ol要素に頼らないナンバリングするスタイルシートのテクニック
掲載するコンテンツにナンバリングをつける際にまず思いつくのは、ol要素を使うことでしょう。確かに、ol要素はナンバリングするのに非常に合理的です。 ここでは、そのol要素を頼らずにナンバリングするテクニックを紹介します。 Numbering In Style [ad#ad-2] 下記は各ポイントを意訳したものです。 ol要素を使用しないでナンバリングをするコンテンツは、例えばデモにあるようなFAQのリストです。 このFAQのリストは、dl要素で実装されています。 dl要素でナンバリングしたデモページ ※実装は、下記で紹介。 ナンバリングの実装には擬似要素と「counter-increment」を利用しており、アイデアの元となったのは「Styling ordered list numbers」の記事です。 Styling ordered list numbers デモページ このデモでは入れ
[JS]ドラッグで移動も可能なモーダルウインドウを作成する軽量スクリプト -Simple Modal
アラート、コンファームだけでなく、AJAXコンテンツ、画像、動画など表示するモーダルウインドウを実装するスクリプトを紹介します。 Simple Modal [ad#ad-2] Simple Modalの特徴 Simple Modalのデモ Simple Modalの実装 Simple Modalのダウンロード Simple Modalの特徴 モーダルウインドウを簡単に生成します。 生成したモーダルウインドウは、ドラッグ操作で移動可能です。 コールバック関数を備えています。 画像や動画、AJAXコンテンツにも対応しています。 Simple Modalのデモ デモではSimple Modalのさまざまな実装例があります。
素敵な配色を見つける・作る、カラースキーム設計やグラデーション・パターン作成に役立つ -ColRD
さまざまなカラーパレット、グラデーション、パターンを見るだけでなく、作成して共有することもできるColRDを紹介します。 ColRD [ad#ad-2] カラーを見つける カラーを作る カラー作成に役立つツール カラーを見つける まずは、ColRDの「Discover（見つける）」から紹介します。 ColRDでは、カラーに関する4つのカテゴリが用意されています。 Discover Color Discover Palette Discover Gradient Discover Pattern
HTML5に踏み出せない人に捧げる、HTML5を使う10の理由
HTML5、使ってますか？ このサイトも未なのですが、これからHTML5を使い始めるぞっとなる10の理由を紹介します。 Top 10 Reasons to Use HTML5 Right Now [ad#ad-2] 下記は各ポイントを意訳したものです。 10. アクセシビリティ 9. ビデオとオーディオのサポート 8. Doctype 7. よりクリアなコード 6. ストレージ 5. インタラクション 4. ゲームの開発 3. 古いブラウザのサポート 2. スマートフォンへの対応 1. これからはHTML5 10. アクセシビリティ HTML5は「セマンティック」「ARIA」の2つの理由でサイトをアクセシブルにします。header, footer, nav, section, adiseなどのような要素はスクリーンリーダーにもコンテンツに容易にアクセス可能なようにします。また要素にrole
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
矢印・指さし・シンボル・丸数字など、さまざなピクトグラムが全部揃ってるDingbatsフォント -Erler Dingbats
ステンドグラスやざらっとした紙などのパターン素材とテクスチャ素材 -Diana'sCreations
[CSS]テキスト選択時のハイライトのカラーを変更するスタイルシート
漢字も揃ってる、日本語のフリーフォントのまとめ -2011年版
ジョジョの第三部にでてきそうなエジプトっぽいエレメントやシンボルのベクター素材