head内にlinkでcss読み込んで、scriptでjs読み込んで、中で DOMContentLoaded だの jQuery(function(){}) だのやって云々とかやりますよね。これ、 link要素でCSS読み込み script要素でJavaScript読み込みの順番でやらないと上手くいかないことがあるみたい…

CSS: 条件付きコメント(class) CSS: 条件付きコメント(外部スタイルシート) CSS: CSS Hack JavaScript JavaScript: jQuery おまけ

テキストにシャドウをつける『text-shadow』で、Photoshopで作ったかのように美しい3Dやレタープレスなどのエフェクトを与えるスタイルシートを紹介します。

WordPressにはpost_class()という関数が あって、自動で要素にclassを付けてくれ るんですが、この中にアイキャッチ画像 を使用した投稿の場合にclassを追加する という、誰に需要があるのか分からない Tipsシリーズです。post_class()は僕も殆ど使ったこと…

HTML5で意味的な段落の区切れに使用するhr要素をCSS3でおしゃれにスタイリングするテクニックを紹介します。もちろん、画像は一枚も使いません。

・CSS3で実装する、簡単で美しいツールチップのチュートリアル | コリス coliss.com ・CSS3でツールチップの吹き出しを表現する｜skuare.net www.skuare.net ・CSSのみでマウスオーバー時にリンク先のURLをツールチップで表示させる - か... kachibito.net …

IE7など古いブラウザでもそれなりに表示される、CSS3で実装するツールチップのチュートリアル

CSS3まで含めたリファレンス（解説）とブラウザのサポート状況、CSSリセット、バグ対応などをCSSに関連することをまとめて公開しています【セレクタ、プロパティの名前からひくタイプのリファレンス】

CSS3アニメーションはたいていの場合、ホバー時（:hover）に仕込まれるものが多いと思います。 ここでは他の疑似クラス「:active」や「:focus」などやMedia Queriesに仕込んでみるチュートリアルを紹介します。下記は各ポイントを意訳したものです。 「:acti…

さすがデザイナーたちが作った本だけあって、装丁も美しい。見開き2ページで1トピックが簡潔にまとめられているのもいい。ページのレイアウトもきちんとした2カラム構成で読みやすい。まるでそれ自体がウェブページのようである（意図的かどうかは知らないが…

前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。今回はCSSでテキストにグラデーションをかけるテクニックについてで…

ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとな…

画像をホバーすると、小気味良いアニメーションを伴ってキャプションに替えるCSS3のテクニックを紹介します。 デモは10種類あり、CSSでここまでできるのか！って感じです。

この記事は CSS でレイアウトを組む為の基本についての記事です。ボックスモデルから始まって、通常フロー、フロート、相対配置や絶対配置、それから重なりを指定する z-index までを、私なりに仕様書や書籍、色んなWebサイトを参考にしてまとめたものです。…

紙媒体でよく見かける、見出しの両端に水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。【――――北海道を隅まで歩く―――― こんな感じにする方法】

width, heightのサイズが分からない要素を天地左右の真ん中に配置するスタイルシートのテクニックを紹介します。 要素のサイズが分かっている場合 要素のサイズが分からない場合 まとめと対応ブラウザ【左右・上下、いずれにしろ、中央に配置するのは至難の…

Flashはもちろん、jQueryなどのJavaScriptも使用せずに、CSS3アニメーションのかっこいいナビゲーションを実装するチュートリアルを紹介します。 01：エレメントのサイズ変更、背景カラーを変更。 02：アイコンのサイズ変更、テキストを天地からスライド。 0…

アニメーションを伴ったテキストシャドウや半透明を利用して、ブラーのエフェクトを使ったナビゲーションを実装するCSS3のチュートリアルを紹介します。 サイトのキャプチャBlur Menu with CSS3 Transitions 7つのデモ 7つのデモの実装7つのデモデモは7種類…

ジェネレーター：ベーシック系 ジェネレーター：ボタン、画像使わない系 制作補助、診断、確認 リファレンス、対応ブラウザなど

IE6などの非サポートブラウザも配慮した、角丸、ゼブラ柄、ハイライトなど美しくて分かりやすいテーブルを実装するCSS3のチュートリアルを紹介します。【見た目より……とは思えども】 「[CSS]さりげなく、美しくて分かりやすいテーブルにするCSS3のチュートリ…

フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるクロスブラウザ対応のスタイルシートを紹介します。「animate.css」を外部ファイルとして指定し、アニメーションを加えたいエレメントにclassを付与するだけ…

case1：画像の場合 case2：テキストが1行の場合 case3：複数行かつ行数が決まっている場合 case4：画像+テキスト1行 case5：画像+テキスト複数行【Evernote Localに全文】

jQueryじゃなくてもいいんじゃ無いか、っていう記事です。短くて使いやすいスニペットなんですが、まぁ用途 は人それぞれだと思うので適当に

Cascading Style Sheets の入門的チュートリアルですMozilla Developer Network

CSS animation の使い方が分かってきたので、プロパティなどを簡単にMozilla Developer Network 日本語版 https://developer.mozilla.org/ja/CSS/CSS_animations

[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix | コリス 「clearfix」はフロートした要素が親要素からはみ出してしまうのを回避するもので、今回は、スタイルシートの量を更に減らし（class名も短く）した「micro clearfix」です。