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は省略しています。
黒い文字が、マウスオーバーで徐々に白くなります。
CSS3を使ってテーブルの両端の列の右側はボーダーを表示せず、それ以外のセルの右側にはボーダーを表示したい、という場合には、複数の条件を適用したセレクターを設定する方法です。 「～かつ、～」というセレ…続きを読む
縦横比を保ったまま画像のサイズを変えて表示する方法です。 例えば、ウェブサイトをPCで閲覧するためのサイズとスマホで閲覧するサイズの2種類をCSSで切り替えてつくる場合、画像のサイズもPCとスマホによ…続きを読む
Zoomを有料で契約していると、1年ごとの自動更新に設定されます。 Zoomを解約する方法を調べました。 Zoomの自動更新をキャンセルする Zoomの解約とは、契約の自動更新をさせなくすることと同義…続きを読む
ウェブサイトにメールアドレスを記載するときに、「xxx@aaa.com」のように直接表記すると、メールアドレスを収集され、スパムメールを送り付けられてしまう可能性が増えてきてしまうため、JavaScr…続きを読む
Googleカレンダーに、別のGoogleアカウントのカレンダーを同期させることはできますが、別のGoogleアカウントで複数設定しているカレンダーをそれぞれ同期させる方法がわからなかったので調べまし…続きを読む
ウェブページの内容量が少ない場合には、フッターをブラウザの表示領域最下部に表示し、内容量がある場合にはスクロールした最下部に表示する方法です。 フッターを画面最下部に表示する HTMLソース <…続きを読む
CSSを使ってウェブサイトの画面レイアウトを、スマホ用とPC用とで切り替える方法です。 画面の幅によって表示方法を切り替える スマホを認識するというよりは、画面の横幅が何ピクセル以下か、によって読み込…続きを読む
CSSの設定のみで、内容が少ないページであっても、フッターは最下部に表示され、さらに内容がたくさん書いてある場合には、スクロールした最後にフッターが表示されるようにする方法です。 以前にも紹介しました…続きを読む
ulタグを使ったリストをCSSで二段組にして表示する方法です。 HTMLのコード <h2>リスト表示</h2> <ul class=”menu”&…続きを読む
Chromeでウェブサイトをチェックしている場合、CSSを更新した際にブラウザの更新を行って再表示しても、CSSの変更が反映されません。 これはキャッシュがChrome内に残っているために起こっている…続きを読む