レスポンシブサイトでタブ切り替えを実装する際、ウィンドウサイズが大きい場合はそのままタブ切り替えの見栄えで、ウィンドウサイズが小さくなったときには表示幅などの兼ね合いで違った見せ方にすることがあります。 そのような時に見かけるのが多いものとしては、ウィンドウサイズが小さいときはタブ切り替えではなくアコーディオンに変化させたり、他にはSmartNewsなどで採用されているようなタブの見栄えはそのままにしつつタブ部分をスワイプ(スクロール)できるようにしたものなどありますが、それらとは違った見せ方としてウィンドウサイズが小さいときは切り替えにselect要素を用いるという動きを実装することがあったので、実装方法を備忘録兼ねて紹介します。 先にざっくりとした動きを説明すると、表示・非表示の切り替えは単純にCSSのMedia Queriesを用いて、jQueryではそれぞれのナビが切り替わったタイ
Stripe.Com Navigation A morphing dropdown that animates according to the size of its content. A few weeks ago stripe.com launched a new website design. It looks awesome. One thing we dig in particular is the morphing navigation dropdown: instead of hiding and showing a new dropdown “container” when the user switches from one navigation item to the other, they animate the dropdown background to mak
PHPカンファレンス2020での講演資料です。 アジェンダ 誤解1: Cookieは誤解がいっぱい 誤解2: 脆弱性があるページにのみ影響がある 誤解3: 脆弱なECサイトはセキュリティコードを保存している 誤解4: クレジットカードをサイトに保存すると漏洩リスクが高まる 誤解5: ハッシュ値で保存されたパスワードは復元されない 誤解6: 高価なSSL証明書ほど暗号強度が高い 誤解7: TRACEメソッドの有効化は危険な脆弱性である 誤解8: 怪しいサイトを閲覧すると情報が盗まれたりウイルスに感染する 誤解9: イントラのウェブサイトは外部からは攻撃できない 誤解10: セキュリティ情報はウェブで収集する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く