HTML/CSS– category –

CSSには幅や文字サイズを設定する時に使用する単位がpx、%、em、rem、vw、vh、vmax、vminの8種類あります。 それぞれの単位には特徴があります。その特徴を正しく理解することで、状況に応じて最適な単位を設定することができます。 本記事では、それぞれ...

本記事ではCSSを使って影を付けることができるbox-shadowの使い方について解説しています。 影はボタンをホバーした時などに表示させたり、画像の枠に影を表示させたりと使う頻度は割と高めなので頑張って習得しましょう。 box-shadowの使い方 box-shadow...

本記事では、ホバーした時に影ができるボタンをCSSのみで作成する方法について解説しています。 完成形のボタン 本記事で作成するボタンの完成形の挙動を最初に確認しておきましょう。 下記のように、マウスカーソルがボタンに乗った時(ホバー)に右下にう...

本記事では、CSSのtransform:rotate()を使って要素を回転させる方法について解説しています。 近年のwebサイトでは当たり前のようにアニメーションが使われており、transform:rotate()を使う機会も以前に比べかなり増えました。 transform:rotate()を使い...

本記事では要素を拡大・縮小させることができるtransform:scale()の使い方について解説しています。 よくブログなどでサムネイルにマウスを乗せた時に画像が拡大されるものを見かけますよね。実はあのアニメーションはtransform:scale()を使って実装されて...

本記事では、CSSで要素に傾斜を付けることができるtransform:skew()の使い方について画像付きで分かりやすく解説しています。 transform:skew()を習得することで、斜めに背景色・画像を表示することができるようになります。 サンプルコード 以降の解説で...

本記事ではCSSで表示させている背景色を2色使い、それらを縦・横・斜めに分ける方法について画像付きで分かりやすく解説しています。 仕組みを知らないと一見難しそうに見えますが、1行追加するだけで実装できるので誰でも簡単に作れます。 準備(サンプル...

本記事では、CSSで横から背景色がスライドするボタンの作り方について画像を使って分かりやすく解説しています。 完成形 まずは横から背景色がスライドしてくるボタンの完成形を確認しましょう。 See the Pen 横から背景色がスライドするボタンの作り方 完...

本記事ではCSSのtransitionプロパティの使い方について解説しています。 transitionプロパティは実務でも非常によく使うプロパティの一つです。使えるようになると様々なアニメーションを作成することができるようになるので、頑張って習得しましょう！ tr...

本記事ではCSSのanimationプロパティを使ってアニメーションを作成する方法について解説しています。 animationプロパティは、transitionプロパティと異なり詳細な設定をすることができたりアニメーションの回数を指定または無限に設定することも可能です...