すべての記事
-
object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー
CSSプロパティーの「object-fit」を使えば、簡単にCSSだけで画像を指定したサイズ（コンテナー）にフィットさせて、かつ、はみ出すの部分はトリミングができてしまいます。要は画像として配置しているのに、「background-size」と同じことができてしまいま... -
Sassは絶対使った方が良いよ！使い方入門編
WEBデザイナーであれば1度は「Sass」という言葉を聞いたことがあるのでは？と思います。今回は「Sassには興味があるけどまだ導入できていない」、「そもそもSassって何？」という方向けに、Sassの入門的な記事を書いてみました。 結論から先に言うと、初め... -
CSSだけで作るドロップダウンメニュー（多階層）
今回はグローバルメニューの登竜門、ドロップダウンメニューをCSSだけで作っていきたいと思います。「transition」でアニメーションさせつつ、ひ孫階層まで対応したコードになります。 「なるべくコードはシンプルにわかりやすく」を意識して書いて行きま... -
jQueryとCSSで作るアコーディオンメニュー
先日「【CSS】CSSだけで作るアコーディオンメニュー」という記事を書きましたが、お役に立てたようで、意外とページビューも良くてありがたい限りです。今回はそれにあやかってせっかくなのでjQueryとCSSで作るアコーディオンメニューもやっていきたいと思... -
ドロワーメニューを採用した参考サイト
ドロワーメニューとは? 「ドロワー」とは「タンスや机の引き出し」といった意味合いの単語になります。Webデザインではサイトのコンテンツとは別に、画面外から「引き出して」表示するナビゲーションになります。 Webサイトごとスライドして表示したり、メ... -
意外と簡単！モーダルウィンドウをプラグインなしで作る
モーダルウィンドウを実装するjQueryプラグインはたくさんありますが、わざわざプラグインを使わなくても、意外と簡単にモーダルウィンドウを実装することができます。自分で実装できれば、仕組みを理解しているのでカスタマイズやメンテもしやすいのが最... -
【改良版】コピペでOK！画像や動画を親要素にフィットさせて中央に表示する
こちらの記事と同じことをCSSでもできます。ぜひ下記の記事もチェックしてみてください。 以前、「【jQuery】コピペでOK！画像や動画を全画面にフィットさせて中央に表示する」という記事を書きました。 しかし実際に使っていると、なんだかと痒いころに手... -
アイソメトリックのイメージを取り入れた素敵なWebサイト10選
当サイトに掲載する素敵なWebサイトを毎日収集していて、斜め上から見たような立体的なイメージ（アイソメトリックプロジェクション）を取り入れたサイトよく見るようになりました。立体感があって印象的なデザインになるのでショーケースをまとめて見まし... -
CSSだけで作るアコーディオンメニュー
レスポンシブレイアウトでのスマホビューが圧倒的に増えて来た昨今、アコーディオンメニューは、狭い画面でユーザーが必要な情報を任意で表示することができ、ユーザビリティの観点から見ても重要なテクニックの1つです。 ということで、今回はjQueryなし... -
animation・keyframesを徹底解説
今回は「animation」、「keyframes」について、細かく徹底的に解説していきます。 「animation」、「keyframes」については知ってはいましたが、アニメーションさせるなら「transition」でいいんじゃない？と思って使っていませんでした。 しかし、当サイ... -
動画を使ったスタイリッシュなWebサイト14選
昨今、動画を取り入れたWEBサイトは珍しくなくなりました。一言で動画と言っても、各Webサイトがそれぞれ趣向を凝らした表現をしていて、とても参考になります。 そこで今回は「動画を使ったスタイリッシュなWebサイト」をカテゴリーに分けて紹介していき... -
フルスクリーン・レンスポンシブに最適なViewport (vw・vh)を覚える
CSSでボックスの幅や高さを指定する場合、パーセント（％）やピクセル（px）で指定することが多いと思います。しかしViewport(vw・vh)はフルスクリーン・レンスポンシブに適したCSSの単位です。今回はこのViewport (vw・vh)を解説して行きたいと思います。...
