Technique | WEBDESIGNDAY

【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとって...

CSSプロパティーの「object-fit」を使えば、簡単にCSSだけで画像を指定したサイズ（コンテナー）にフィットさせて、かつ、はみ出すの部分はトリミングができてしまいます。要は画像として配置しているのに、「backg […]

2020/05/03

WEBデザイナーであれば1度は「Sass」という言葉を聞いたことがあるのでは？と思います。今回は「Sassには興味があるけどまだ導入できていない」、「そもそもSassって何？」という方向けに、Sassの入門的な記事を書い […]

2019/06/29

今回はグローバルメニューの登竜門、ドロップダウンメニューをCSSだけで作っていきたいと思います。「transition」でアニメーションさせつつ、ひ孫階層まで対応したコードになります。「なるべくコードはシンプルにわかり […]

2019/06/13

先日「【CSS】CSSだけで作るアコーディオンメニュー」という記事を書きましたが、お役に立てたようで、意外とページビューも良くてありがたい限りです。今回はそれにあやかってせっかくなのでjQueryとCSSで作るアコーディ […]

2019/06/03

モーダルウィンドウを実装するjQueryプラグインはたくさんありますが、わざわざプラグインを使わなくても、意外と簡単にモーダルウィンドウを実装することができます。自分で実装できれば、仕組みを理解しているのでカスタマイズや […]

2019/05/21

注意こちらの記事と同じことをCSSでもできます。ぜひチェックしてみてください。以前、「【jQuery】コピペでOK！画像や動画を全画面にフィットさせて中央に表示する」という記事を書きました。しかし実際に使っていると […]

2019/05/02

レスポンシブレイアウトでのスマホビューが圧倒的に増えて来た昨今、アコーディオンメニューは、狭い画面でユーザーが必要な情報を任意で表示することができ、ユーザビリティの観点から見ても重要なテクニックの1つです。ということで […]

2019/02/16

今回は「animation」、「keyframes」について、細かく徹底的に解説していきます。「animation」、「keyframes」については知ってはいましたが、アニメーションさせるなら「transition」 […]

2019/01/20

CSSでボックスの幅や高さを指定する場合、パーセント（％）やピクセル（px）で指定することが多いと思います。しかしViewport(vw・vh)はフルスクリーン・レンスポンシブに適したCSSの単位です。今回はこのView […]

2018/12/04

ひと昔前までは、ローディングアニメーションと言えばCSSアニメーションで円がクルクル回ってるだけだったり、ロゴが中央に表示されて消えていくだけだった印象ですが、今は趣向が凝ったローディングアニメーションのサイトがたくさん […]

2018/11/30