CSS | 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

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

2019/02/16

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

2019/01/20

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

2018/12/04

Googleマップを埋め込んだサイトはよく見かけますが、そのまま埋め込んだだけだとレスポンシブに対応できません。ですので今回は「Googleマップをレンスポンシブに対応させる方法」をやっていきたいと思います。 &nbsp […]

2018/09/07

前回「フルスクリーンナビゲーションを作る。(シンプルバージョン)」という記事を書きました。今回はスプリットレイアウトバージョンのフルスクリーンナビゲーションを作って行きたいと思います。こんな感じになりました。サンプル […]

2018/07/05