すべての記事
-
ドロワーメニューを採用した参考サイト
ドロワーメニューとは? 「ドロワー」とは「タンスや机の引き出し」といった意味合いの単語になります。 Webデザインではサイトのコンテンツとは別に、画面外から「引き出して」表示するナビゲーションになります。 Webサイトごとスライドして表示したり、... -
意外と簡単！モーダルウィンドウをプラグインなしで作る
モーダルウィンドウを実装する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サイトで取り入れられるようになってきました。 今回は、印象的でオリジナリティーも出しやすい、「ブロークングリ... -
Googleマップをレスポンシブに対応する方法
Googleマップを埋め込んだサイトはよく見かけますが、そのまま埋め込んだだけだとレスポンシブに対応できません。ですので今回は「Googleマップをレスポンシブに対応させる方法」をやっていきたいと思います。 まずはGoogleマップを埋め込む ご存知方も多... -
フルスクリーンナビゲーションを作る。(スプリットレイアウトバージョン)
前回「フルスクリーンナビゲーションを作る。(シンプルバージョン)」という記事を書きました。 今回はスプリットレイアウトバージョンのフルスクリーンナビゲーションを作って行きたいと思います。こんな感じになりました。 サンプル スプリットレイアウト... -
おしゃれなデザインのサイトまとめ!のまとめ
スローペースでちょこちょこ記事をアップしている当サイトですが、開始からある程度の期間が経ち、やっと少しずつ記事も増えて参りました。 そこで今回は今まで色々なテーマに沿って、おしゃれでスタイリッシュなサイトをまとめてきましたので、それらのま...
