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