CSSで、マウスオーバー時に、徐々に色が変化したり、形が変化するようなアニメーション効果を付ける方法です。
例えば、マウスオーバー時に色を徐々に変化させたい場合には、以下のように書きます。
a{
transition:all 0.8s ease;
color:#000;
}
a:hover{
color:#fff;
}
transitionは時間的な変化を指定するCSS3のプロパティです。
本来は、
・transition-property（変化を適用するプロパティを,で指定。allですべてのプロパティ）
・transition-duration（変化が完了するまでの時間：1sで1秒）
・transition-timing-function（変化の進行割合）
・transition-delay（変化を開始する時間）
の4つのプロパティをまとめて指定するプロパティです。
この中で分かりにくいのはtransition-timimg-functionです。
これは、変化が起こる時間帯を、はじめの方に急激に起こすか、終わりの方に急激に起こすか、一定した変化にするか、といったことを決めるものです。
値には、
・ease（開始と官僚を滑らかに：初期値）
・linear（一定速度）
・ease-in（ゆっくり始まる）
・ease-out（ゆっくり終わる）
・ease-in-out（ゆっくり始まり、ゆっくり終わる）
・cubic-bezier(数値,数値,数値,数値)
があります。
上記の例ではtransition-delayは省略しています。
黒い文字が、マウスオーバーで徐々に白くなります。
GoogleMapにリンクを貼るときに、URLが長くなってしまうのを防ぐ、短縮URLの取得の方法です。 まず、GoogleMapを開きます。 左上の検索窓に住所を入力して、その住所を検索します（ここで…続きを読む
縦横比を保ったまま画像のサイズを変えて表示する方法です。 例えば、ウェブサイトをPCで閲覧するためのサイズとスマホで閲覧するサイズの2種類をCSSで切り替えてつくる場合、画像のサイズもPCとスマホによ…続きを読む
ウェブサイトをスマホ対応しようとCSSをつくり、いざ確認してみるとAndroidとiPhoneで文字サイズがかなり違う、ということが起こりました。 iPhoneの方がAndroidよりも小さく、iPh…続きを読む
ulタグを使ったリストをCSSで二段組にして表示する方法です。 HTMLのコード <h2>リスト表示</h2> <ul class=”menu”&…続きを読む
Googleカレンダーに、別のGoogleアカウントのカレンダーを同期させることはできますが、別のGoogleアカウントで複数設定しているカレンダーをそれぞれ同期させる方法がわからなかったので調べまし…続きを読む
Chromeでウェブサイトをチェックしている場合、CSSを更新した際にブラウザの更新を行って再表示しても、CSSの変更が反映されません。 これはキャッシュがChrome内に残っているために起こっている…続きを読む
FTPソフトである「FileZilla」を使ってサーバ上のファイルを削除しようとしたときに、 「8ビット文字コードへ変換するコマンドに失敗しました」 というメッセージが出てしまい、削除できないことがあ…続きを読む
Windows7からWindows10にアップグレードしたところ、Apacheが起動しなくなりました。 Apacheが起動しなくなる理由には大きく2つあります。 1つ目は、httpd.confの書き間…続きを読む
Fireworks CS6を起動しようとしたら「現在のFireworksユーザー権限では、レジストリ情報を更新することができません。Dreamweaverを併用しての起動と編集機能は、管理者権限でFi…続きを読む
CSSの設定のみで、内容が少ないページであっても、フッターは最下部に表示され、さらに内容がたくさん書いてある場合には、スクロールした最後にフッターが表示されるようにする方法です。 以前にも紹介しました…続きを読む