タグ

2022年10月25日のブックマーク (2件)

  • CSSの最新テクニック! シンプルなHTMLとCSSで、オフキャンバスのメニューをポップアップで実装

    この実装は、完全に想定外の発想でした! スマホでよく見かけるドロワー、オフキャンバスのメニューをポップアップで実装するCSSの最新テクニックを紹介します。 オフキャンバスも確かにポップアップと同様にページ上に浮かぶように表示されますが、ポップアップで実装できるようになるとは思いませんでした。JavaScriptはなし、HTMLCSSだけで簡単に実装できます。 Pop-up API Off Canvas Menu w/ :has() ⚡️ 実際の動作は、下記ページでご覧ください。 ※Pop-Up APIと:has()を使用しているため、ChromeでFlagを有効にする必要があります(後述)。 Pop-up API Off Canvas Menu w/ :has() ⚡️ まずは、HTMLを見てましょう。 ハンバーガーはbutton要素で、オフキャンバスはpopup属性で実装します。pop

    CSSの最新テクニック! シンプルなHTMLとCSSで、オフキャンバスのメニューをポップアップで実装
  • クルマで移動する人が使うべき、iOS 16「マップ」の新機能

    iPhone 14」など各iPhoneに9月から実装されている「iOS 16」の新機能として、「マップ」アプリでの「経由地の追加」機能がある。2022年10月24日現在、乗用車を使った場合のみで鉄道やバスには対応していないが、かなり便利な機能といえる。 「経由地を追加」ボタンをタップすることで、好きなだけ経由地を追加できる(画像=左)。実際のルートにも反映され、通常のナビ同様道路の混雑度も表示する(画像=右) 首都圏や地方の都市部となるとバスや鉄道を利用した方が交通費を抑えられるが、観光地などは乗用車を利用した方が早く、交通費も安く抑えられる場合が多い。鉄道やバスの対応も待たれるが、現在は乗用車を使った地方の観光に便利な機能、といえるだろう。 関連記事 iPhoneの秘蔵写真を「非表示」にして自分だけ見られるようにする方法 ペットの寝顔、家族に見られたら怒られるカロリーの高い事、自分だ

    クルマで移動する人が使うべき、iOS 16「マップ」の新機能