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