Web制作者がチェックしておきたい、最近のWebサイトで見かけるデザインのアイデア -2018年5,6月
デザインで悩んだ時には、新鮮なアイデアに触れてみると良いインスピレーションに繋がります。最近のWebサイトで見かけるデザインのアイデアを紹介します。 今まで使用されてたデザインのトレンドにも一手間加えられて、より使いやすく、洗練されたものになっています。 3 Essential Design Trends, May 2018 3 Essential Design Trends, June 2018 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 スクリーンいっぱいの写真画像 分割スクリーンの新しい考え方 透明度を抑えたカラーオーバーレイ ナビゲーションの小型化 注意を引き付けるカットアウトとレイヤー 早回しの動画 スクリーンいっぱいの写真画像 ヒーローイメージは、スクリーンいっぱいの写真画像でさらに大きくなっています。新しい重要
jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える
jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える jQuery+CSS3を使用してスマホではハンバーガーメニューに切り替わる、固定ナビゲーションを作成してみます。 投稿日2015年12月09日 更新日2015年12月09日 PC版のナビゲーションは基本構造は下記を使用します。 jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション HTML #mobile-head はモバイル時色を付けてバーにします。 #global-nav はモバイル時ナビゲーションを開閉するボタンです。 三本の線がspanになります。 HTML <header id="top-head"> <div class="inner"> <div id="mobile-head"> <h1 class="logo">Logo</h1> <div id="
たった10行でできる！ドロワーメニューの作り方 – やってみたら、できた。
今流行のドロワーメニュー。ハンバーガーマークを押したらニョキッと出てきてバッテンを押したらニョキッといなくなるやつです。 ソースはたくさん落ちていて、それ使っても良かったんですが軽量にしたかったのと、あまり機能もいらなかったので自分で書いてみました。 コンテンツ部分がグインっと動いたりしません。コンテンツにメニューがかぶさるだけです。 サンプルページ ソースダウンロード（ZIP） ※今回紹介するソースではWindowの右から出てきます。 $(function($) { WindowHeight = $(window).height(); $('.drawr').css('height', WindowHeight); //メニューをwindowの高さいっぱいにする $(document).ready(function() { $('.btn').click(function(){ //クリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
