★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

「 CSS 」一覧

jQueryでanimate関数を使わずtransformプロパティをアニメーションさせる方法

jQueryでanimate関数を使わずtransformプロパティをアニメーションさせる方法

jQueryではanimate関数を使うと要素のCSSプロパティを変化させてフェードインなどのアニメ効果をつけることができますが、transformプロパティの値を変化させることはできません。そこでtransitionプロパティを使います。ここではtransitionプロパティを使って要素の回転などを行う方法を解説します。

jQuery+CSSで文字をゆらゆら揺らすアニメ効果をつける方法

jQuery+CSSで文字をゆらゆら揺らすアニメ効果をつける方法

CSS3では要素にアニメーション効果をつけるアニメーションプロパティを使うと要素に対して様々なアニメーション効果をつけられるようになりました。ここではそのアニメーションプロパティとjQueryを使って1つ1つの文字がばらばらに上下に揺れるようなアニメーション効果をつける方法について解説します。

画面をスクロールすると追従してくるボタンをCSSだけで作る方法

画面をスクロールすると追従してくるボタンをCSSだけで作る方法

画面をスクロールするとそれに追従するようなボタンはCSSだけで作ることが可能です。作り方はとても簡単でPCやスマホの表示領域(viewport)に対して位置を固定するようにpositionプロパティと位置を調整するだけです。ここではその作り方とスクリプトと組み合わせて記事トップに戻るボタンを作る方法などを解説します。

preタグ内のソースコードを画面端で折り返す方法

preタグ内のソースコードを画面端で折り返す方法

ソースコードの表示にはpreタグとcodeタグが使われますが、preタグは文章の内容をそのまま表示する要素なので1行が長いコードだとスクロールバーが表示されてしまいます。そこでpreタグにCSSを適用してソースコードが要素の端まで来た時に自動で改行を入れて折り返す方法について解説します。

要素表示時に回転・拡大・スライドしてアニメ表示する方法とアニメーション例

要素表示時に回転・拡大・スライドしてアニメ表示する方法とアニメーション例

何か動作があった時にただ要素を表示するだけでなく回転や拡大などのアニメーション効果をつけるとユーザーに興味を持ってもらいやすくなります。ここではCSSのtransformプロパティとjQueryのcss関数を使って要素に変形効果をつけ、ユニークなアニメ表示をする方法と実際のアニメ表示の例について紹介します。

画像を使わずCSSだけでシマシマ模様の枠線や区切り線を作る方法

画像を使わずCSSだけでシマシマ模様の枠線や区切り線を作る方法

従来のCSSでしましまの枠線などを作ろうとすると縞模様の画像をリピートさせる方法しかありませんでした。しかしCSSで追加されたrepeating-linear-gradientプロパティを使うと画像を使うことなくきれいな縞模様のついた枠線や区切り線を作ることが可能です。ここではそのような枠線の作り方を解説します。

CSSだけで作れるオシャレな枠線・区切り線デザインまとめ

CSSだけで作れるオシャレな枠線・区切り線デザインまとめ

枠線や区切り線を変えるとサイトがオシャレになったり、読者の注目を引いてに大事な部分を読んでもらいやすくなるなどの効果があります。そこでここではCSSだけでグラデーションやシマシマ模様のついた枠線や区切り線を作る方法について解説します。もし気に入ったデザインがあればコピー・改変して使ってください。

思わずクリックしたくなるリンクボタンデザイン6選

思わずクリックしたくなるリンクボタンデザイン6選

リンクのクリック率やコンバージョン率を高めるのに効果的なのがリンクをボタンにすることです。ただリンクを設置するより目立つボタン形式にしてホバーやクリックすると動きがあるようなボタンを作ると読者に興味を持ってもらいやすくなります。そこでここでは思わずクリックしたくなるようなリンクボタンデザインをいくつか紹介します。コピペして好きなように使ってください。

CSSだけで画像の上に文字や要素を重ねる方法

CSSだけで画像の上に文字や要素を重ねる方法

オシャレなサイトだと画像内にテキストが表示されていたり、画像中にフォームが埋め込まれていたりします。このように画像内や中央に要素を埋め込むデザインは"CSSだけ"で実現できるので、具体例や応用例を交えてそのようなデザインを作る方法を解説します。