かすが– Author –

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

今回は「animation」、「keyframes」について、細かく徹底的に解説していきます。 「animation」、「keyframes」については知ってはいましたが、アニメーションさせるなら「transition」でいいんじゃない？と思って使っていませんでした。 しかし、当サイ...

昨今、動画を取り入れたWEBサイトは珍しくなくなりました。 一言で動画と言っても、各Webサイトがそれぞれ趣向を凝らした表現をしていて、とても参考になります。 そこで今回は「動画を使ったスタイリッシュなWebサイト」をカテゴリーに分けて紹介していき...

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

雑誌では昔からよく使われていた境界線をあえて外す「ブロークングリッドレイアウト」。 ここ最近のWebサイトの表現手法として、多くのWebサイトで取り入れられるようになってきました。 今回は、印象的でオリジナリティーも出しやすい、「ブロークングリ...

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

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

スローペースでちょこちょこ記事をアップしている当サイトですが、開始からある程度の期間が経ち、やっと少しずつ記事も増えて参りました。 そこで今回は今まで色々なテーマに沿って、おしゃれでスタイリッシュなサイトをまとめてきましたので、それらのま...

先日「フルスクリーンナビゲーションの参考サイト15選」という記事を書きました。 今回は実践編をやっていこうと思います。シンプルに縦に並ぶフルスクーリーンナビゲーションを作ります。 サンプル1 全体のHTML まずは今回の全体のHTMLのコードです。 <...

サイトユーザビリティの根幹要素であるナビゲーションは常に変化を続けています。 最近始まったわけではありませんが、フルスクリーンナビゲーションのサイトはまだまだトレンドといっても過言ではないほどよく見かけます。 フルスクリーンナビゲーション...

flexboxとは flexboxとは「Flexible Box Layout Module」のことで、CSSでのレイアウト設定を簡単にするレイアウトモジュールです。 今までjavascript・jQueryで行っていたような複雑なレイアウトもとてもシンプルに設定できます。数年前まではflexboxをサ...

当サイトの目次でもやってますが、縦長のランディングページなんかを作る場合、グローバルナビゲーションはページ内リンクにして、スムーズにスクロールさせるパターンがよくあります。 ですが、特定のページを別ページにしている場合、ページの外からペー...