ユーザーを飽きさせない！ワクワクするWebデザイン5選#2019年11月 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今月もめまぐるしく大変でしたね。お勤めご苦労様です。どうも、デザイナーのけんてぃです。 今回はミニマムなレイアウトながらも素敵な工夫のあるWebサイトをメインに、僕の好きなデザインを集めてみました。 肌ナチュール 炭酸クレンジング 公式サイト https://hadanature-rmc.jp/ こちらは炭酸を含んだ泡タイプのクレンジングで有名な肌ナチュールの公式サイトです。 ミニマムなレイアウトは清潔感があり情報の見やすさに長けている反面、単調に見える懸念があります。 ですが、今回紹介しているサイトはミニマムながらもダイナミックなレイアウトとアニメーションや配色で上手くリズムを作っているので、見ていて飽きません。 メニュー画面やストーリーページなど、どのページを見ても参考になるので他のページもぜひ回遊してみてください。 株式会社サーキュレーション https://circu.co.jp/
lite-youtube - YouTube動画の軽量埋め込み表示
YouTubeの動画埋め込み表示機能は便利で使っている人も多いかと思います。しかし、あの埋め込み表示は動作が重たく、あまり大量に埋め込むとWebブラウザの負荷が高くなります。 そこで使いたいのがlite-youtubeです。標準のツールに比べて圧倒的に軽快に動作します。 lite-youtubeの使い方 lite-youtubeで動作を表示した例。 デフォルトのiframeの場合。 lite-youtubeを使う場合のタグです。 <!-- 簡易版 --> <lite -youtube data-videoid="ogfYd705cRs"></lite> <!-- 詳細版 --> <lite -youtube data-videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/
CSS エリア内でコンテンツが追従する position:sticky; の使い方 - by Takumi Hirashima
CSS 指定エリア内でコンテンツが追従する position:sticky; の使い方を紹介します。 例えば、サイドバー内の要素をスクロールに合わせて追従させたい時に便利な方法です。 指定エリア内でコンテンツを追従させる方法 position:sticky; が動作しない時の対処方法 指定エリア内でコンテンツを追従させる方法 スクロールに合わせたコンテンツの追従は、jQuery をトリガーに、position:fixed; を付与するような実装方法がよく知られています。 けれど CSS の position:sticky; を使うと、CSSの記述だけで実装することができます。 例えば、サイドバーにあるバナーエリアを、スクロールに合わせて追従するようにするには、次のコードをバナーエリアに追加します。 .banner { position: sticky; top: 0; } まず posit
最新スタイルはこれ！ウェブデザイン見本コレクション 2019年11月度
この記事では、ウェブサイトのクリエイティブなアイデアが欲しいときに参考にしたい最新デザイン42個をまとめてご紹介します。 美しいタイポグラフィーや配色、シェイプの使い方などどれも魅力的なサイトばかりで、メッセージやコンセプトを伝えるユニークな方法が揃います。また、最新のデザイントレンドを取り入れるきっかけにも良いかもしれません。 サンプル例でわかる！注目したい2020年のWebデザイントレンド8個まとめ 最新スタイルはこれ！ウェブデザイン見本コレクション The Scott Resort & Spa スクロール追尾アニメーションを中心に、パステルカラーの配色やグリッドを崩したレイアウト、SVGアニメーションなどさまざまなトレンドを取り入れています。ランディングページ作成の参考にもどうぞ。 Rumsans ページを左右に分割し、スライダーと新着コンテンツを並べるなどブログメディアのアイデアに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
