すべての記事
-
フルスクリーンナビゲーションを作る。(シンプルバージョン)
先日「フルスクリーンナビゲーションの参考サイト15選」という記事を書きました。 今回は実践編をやっていこうと思います。シンプルに縦に並ぶフルスクーリーンナビゲーションを作ります。 サンプル1 全体のHTML まずは今回の全体のHTMLのコードです。 <... -
フルスクリーンナビゲーションの参考サイト15選
サイトユーザビリティの根幹要素であるナビゲーションは常に変化を続けています。 最近始まったわけではありませんが、フルスクリーンナビゲーションのサイトはまだまだトレンドといっても過言ではないほどよく見かけます。 フルスクリーンナビゲーション... -
ページ内リンクをページ外からでもスムーズにスクロールさせる
当サイトの目次でもやってますが、縦長のランディングページなんかを作る場合、グローバルナビゲーションはページ内リンクにして、スムーズにスクロールさせるパターンがよくあります。 ですが、特定のページを別ページにしている場合、ページの外からペー... -
ヘッダー・ナビゲーションを固定表示させるアイデア5つ
こちらの記事の内容は古くなっています。もっと簡単にヘッダーを固定表示できる最新の記事をアップしましたので、下記のリンクよりぜひそちらをご覧ください。 スクロールしても固定表示されるヘッダーは珍しくありませんが、その方法はいくつかあります。... -
モノトーンを基調としたWebサイト11選
当サイトのギャラリーでは、日本産サイトにこだわってサイト収集していますが、かなり高い頻度でモノトーンを基調としたWebサイトに出会います。 それらに共通している点はモノトーンのシンプルな色使いだからこそコントラスト（強弱）がとても秀逸だとい... -
日本産のデュオトーンのサイトまとめ＋おまけ
2016年にけっこう色々なブログで取り上げられたデュオトーンを取り入れたサイト。海外サイトでは珍しくない印象ですが、2017年12月現在、日本のサイトで探してみたらなかなか見つかりませんでした。当サイトギャラリーでは日本産サイトにこだわって集めて... -
【WordPress】コピペでOK！新着記事に「NEW」をつける方法！
WordPressでサイトやブログを制作していると、カスタマイズ要件として「新着記事にNEWアイコンを付けたい！」という要望がよくあります。一言で新着といっても判別する方法は1つではありません。なので今回はその辺も踏まえて解説していきます。 新着記事... -
縦のラインを活かしたスタイリッシュなサイトデザイン10選＋1！
デザイン手法として、縦のラインを活かしたデザインが最近スタリッシュで面白いなと感じました。 あまり他のサイトでも取り上げられていないようなので、考察と合わせてまとめてみました。 縦のラインを活かしたデザインのメリット 印象に残るデザインです... -
スプリットレイアウトの作り方を解説!レスポンシブにも対応！
以前「スプリットレイアウトの参考になるサイトまとめ」という記事を書きましたが、今回は実践編として実際にスプリットレイアウトのサイトを作成していきたいと思います。 サンプル 01.スプリットレイアウトとは その名のとおり画面をスプリット＝分割す... -
画像やテキストを縦横中央に配置する方法4つ
要素をブロックの縦横中央に配置するというシーンはたくさんあります。 横の中央揃えは簡単です。「margin:0 auto」か「text-align:center」で指定できます。ですが、縦中央揃えは「margin:auto 0」というわけにはいかないのが残念というか難点です。 そこ... -
動画ファイルサイズをオンラインで軽くする方法2つ
簡単に動画をWebサイトに設置できるので、Webサイト用に動画をアップする機会も多くなってきました。 ですが、動画は画像に比べるとファイルサイズが大きくなりがちです。 動画ファイルサイズを下げたくても、専用ソフトはないし、かといってフリーソフト... -
スクロールをセクションごとに制御するプラグイン「jQuery Scrollify」を詳しく解説！
スクロールをセクションごとに制御してくれるプラグイン「jQuery Scrollify」は主に縦に長いLPなどでよく使用されているので、ちょこっとスクロールしただけで、次のセクションまでスルスルとスクロールしていくサイトに出会ったことがある方もいるはず。 ...
