すべての記事
-
動画を使ったスタイリッシュなWebサイト14選
昨今、動画を取り入れたWEBサイトは珍しくなくなりました。 一言で動画と言っても、各Webサイトがそれぞれ趣向を凝らした表現をしていて、とても参考になります。 そこで今回は「動画を使ったスタイリッシュなWebサイト」をカテゴリーに分けて紹介していき... -
【CSS】フルスクリーン・レンスポンシブに最適なViewport (vw・vh)を覚える
CSSでボックスの幅や高さを指定する場合、パーセント（％）やピクセル（px）で指定することが多いと思います。しかしViewport(vw・vh)はフルスクリーン・レンスポンシブに適したCSSの単位です。今回はこのViewport (vw・vh)を解説して行きたいと思います。... -
境界線をあえて外す「ブロークングリッドレイアウト」の参考サイト
雑誌では昔からよく使われていた境界線をあえて外す「ブロークングリッドレイアウト」。 ここ最近のWebサイトの表現手法として、多くのWebサイトで取り入れられるようになってきました。 今回は、印象的でオリジナリティーも出しやすい、「ブロークングリ... -
Googleマップをレスポンシブに対応する方法
Googleマップを埋め込んだサイトはよく見かけますが、そのまま埋め込んだだけだとレスポンシブに対応できません。ですので今回は「Googleマップをレスポンシブに対応させる方法」をやっていきたいと思います。 まずはGoogleマップを埋め込む ご存知方も多... -
フルスクリーンナビゲーションを作る。(スプリットレイアウトバージョン)
前回「フルスクリーンナビゲーションを作る。(シンプルバージョン)」という記事を書きました。 今回はスプリットレイアウトバージョンのフルスクリーンナビゲーションを作って行きたいと思います。こんな感じになりました。 サンプル スプリットレイアウト... -
おしゃれなデザインのサイトまとめ!のまとめ
スローペースでちょこちょこ記事をアップしている当サイトですが、開始からある程度の期間が経ち、やっと少しずつ記事も増えて参りました。 そこで今回は今まで色々なテーマに沿って、おしゃれでスタイリッシュなサイトをまとめてきましたので、それらのま... -
フルスクリーンナビゲーションを作る。(シンプルバージョン)
先日「フルスクリーンナビゲーションの参考サイト15選」という記事を書きました。 今回は実践編をやっていこうと思います。シンプルに縦に並ぶフルスクーリーンナビゲーションを作ります。 サンプル1 全体のHTML まずは今回の全体のHTMLのコードです。 <... -
フルスクリーンナビゲーションの参考サイト15選
サイトユーザビリティの根幹要素であるナビゲーションは常に変化を続けています。 最近始まったわけではありませんが、フルスクリーンナビゲーションのサイトはまだまだトレンドといっても過言ではないほどよく見かけます。 フルスクリーンナビゲーション... -
ヘッダー・ナビゲーションを固定表示させるアイデア5つ
こちらの記事の内容は古くなっています。もっと簡単にヘッダーを固定表示できる最新の記事をアップしましたので、下記のリンクよりぜひそちらをご覧ください。 スクロールしても固定表示されるヘッダーは珍しくありませんが、その方法はいくつかあります。... -
モノトーンを基調としたWebサイト11選
当サイトのギャラリーでは、日本産サイトにこだわってサイト収集していますが、かなり高い頻度でモノトーンを基調としたWebサイトに出会います。 それらに共通している点はモノトーンのシンプルな色使いだからこそコントラスト（強弱）がとても秀逸だとい... -
日本産のデュオトーンのサイトまとめ＋おまけ
2016年にけっこう色々なブログで取り上げられたデュオトーンを取り入れたサイト。海外サイトでは珍しくない印象ですが、2017年12月現在、日本のサイトで探してみたらなかなか見つかりませんでした。当サイトギャラリーでは日本産サイトにこだわって集めて... -
【WordPress】コピペでOK！新着記事に「NEW」をつける方法！
WordPressでサイトやブログを制作していると、カスタマイズ要件として「新着記事にNEWアイコンを付けたい！」という要望がよくあります。 一言で新着といっても判別する方法は1つではありません。なので今回はその辺も踏まえて解説していきます。 新着記事...
