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

「 CSS 」一覧

インライン要素・ブロック要素の中央寄せの5つの方法【CSS】

インライン要素・ブロック要素の中央寄せの5つの方法【CSS】

要素の中央寄せというのは様々な方法があり、ブロック要素とインライン要素では中央寄せのやり方も異なります。上下左右の中央寄せはWebデザインに欠かせないテクニックですがやり方を知っていないと悩むことになり無駄な時間を過ごすことになります。ここではそういう悩みを解決する要素の中央寄せの手法について解説します。

CSSでグラデーション有りの立体的なボタンを作る方法

CSSでグラデーション有りの立体的なボタンを作る方法

ただリンクなどを設置するよりも形状を立体的なボタンにすると読者の目を引くのでクリック率や成約率が上がることがあります。そのようなボタンをCSSで作るには要素にbox-shadowプロパティを指定すれば作成できます。それだけでもフラットな立体ボタンが作れますが、ここではさらにリアリティのあるグラデーションのかかった立体的なボタンを作る方法を解説します。

クリック・ホバーで縮小拡大するリンクボタンをCSSだけで作る方法

クリック・ホバーで縮小拡大するリンクボタンをCSSだけで作る方法

従来までは要素をアニメーションするにはjQueryなどを使う必要がありましたが、CSS3ではアニメーションプロパティが対kされたのでCSSのみで動きのあるボタンを作ることができます。ここではマウスがホバーしたり、クリックしたときにボタンの大きさが変わるボタンを作る方法を解説します。

CSSでブロック要素を横並びにする3つの方法

CSSでブロック要素を横並びにする3つの方法

ブロック要素は通常はブラウザで1つのかたまりと認識されるので前後に空白が入りますが、CSSを使うとブロック要素をインライン要素のように横並びで表示することが可能です。やり方は様々ありますが、ここではブロック要素を横並びにする3つの方法とそれぞれの方法で画面幅が狭まった時の要素の折り返し方について紹介します。