ボタンやロゴや画像にclassを加えるだけで簡単に利用できるホバーエフェクトがまとめられたスタイルシート(SASSも有り)を紹介します。 40種類以上のCSS3アニメーションは、見てるだけでも楽しいです。 Hover.css Hover.css -GitHub Hover.cssの使い方 Hover.cssのデモ Hover.cssの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> <link href="css/hover-min.css" rel="stylesheet"> </head> 一部のエフェクトだけを使用したい場合は、そのスタイルだけコピペすればOK! Step 2:HTML あとは、ボタンやロゴや画像にclassを指定するだけで、さまざまなホバーエフェクトが利用できます。 <a class="
Yahoo! DeveloperNetwork の Best Practices for Speeding Up Your Web Site にはWebサイト高速化のルールがおよそ35項目に渡り解説されています。 Header Cleaner は乱雑なページの <head> ~ </head> 内を整形し、上記35のルールに則り スタイルシートは <head> ~ <head> に配置Javascriptはページ下部に配置 スタイルシートやJavascriptファイルをgzip圧縮 複数のスタイルシートやJavascriptファイルを結合し、HTTPリクエスト数を削減 スタイルシートやJavascriptにExpiresヘッダを追加、適切にキャッシュを制御 インラインで記述されたスタイル設定やスクリプトを外部ファイル化 重複したJavascriptファイルなどを削除 不要な meta
Adding Rounded Corners to Images UsingCSS デモ 仕組みは、矩形の画像の上下に、空のspanを2つずつ配置し、それぞれに角丸の画像を重ねて表示するものです。
というキャッチーな見出しを付けてみたけれど、(X)HTML(以下HTML)なんてのは自由に書いて、伝えたい人たちに思っている事が伝わるならば、それでいーんです。と、最初に言っておくよ。 自分の作ったWEBページのメンテナンス性を上げたいと考える人や、ソースコードを簡潔にしてダイエットしたいと思う人も中にはいるでしょう。複雑なBlogツールのテンプレートソースに四苦八苦してる人、単にW3Cの仕様に準拠させたページを作りたいと思ってる人も多いかもしれない(それは素晴らしいことだよ!)。 コンテンツの利用価値を高めたいと思っている人達、そういった方へ向けて、僕がよく見かける「もっといい方法があるよ」と思えるHTMLの記述を、代替ソースとセットで書いていきます。 項目をa要素やbrを使って整形する リストをリンクのためのA要素でマークアップして並べるという、ブログのメニュー部分などでよく見られる
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法(<div style="clear: both"></div>)を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた(「floatを繰り返すとレイアウトがくずれる」参照)。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く