See the Pen qiita by tomoe (@paripi) on CodePen. 同じタグにidを複数指定は、、 エラーにはならない（表示されないとかにはならない） 文法的には誤り CSSが思い通りに適用されない 【参考】 HTMLで同じタグに複数のid属性を指定することはできる？
環境 Windows10 Chrome93 Chromeでは88から、Firefoxでは89から、Safariは未対応のようです。 追記: Safari15からaspect-ratioに対応するようです。 追記の追記: iOS15とiPadOS15が9月21日にリリースされるそうです。iOSとiPadOSではその日から使えるようになります。 aspect-ratio 今回は16:9にします <div class="container"></div> .container { aspect-ratio: 16 / 9 } これだけです。とても簡単。 未対応ブラウザ <div class="container"></div> .container { position: relative } #container::before { content:""; display: block; padding-bottom: 56.25%; /* height(9) / width(16) * 100 */ } 少し使い勝手が悪いです。
通常は下のような感じ（オプションなし） $('.slider').slick(); ここでslick-slideのheightを100%にする場合は $('.slider').slick() .on('setPosition', function(event, slick) { slick.$slides.css('height', slick.$slideTrack.height() + 'px'); }); これでOK
概要 makuakeのプロジェクトで、リターンの種類が多いと、見比べるのが大変です。 そんなわけで、一覧化して見やすくしました。 環境 google chrome + css/js上書きプラグイン 上書きプラグインは、User JavaScript and CSS を使いました。 実装 makuake.com 内のページに以下のCSSとjsを適用します。 css div#return { /* 表示位置設定 */ position: fixed; bottom: 0; left: 0; z-index: 2147483647; /* 見た目の微調整 */ border: 3px solid black; margin: 10px; padding: 10px; background-color: gray; /* 横スクロールできるようにするための設定 */ width : 95vw; overflow-x: scroll; /* white-space: nowrap; これをcssで指定しておくと、 画面に収まらないところにある画像が読み込まれないので、 javascriptのonloadで指定するようにする */ /* white-space: nowrap; */ } div#return section.return-section { /* 親要素(div#return) から引き継いでしまうので、normalで上書きする */ white-space: normal; /* 横に並べる */ display: inline-block; } js (window.onload = function() { var el = document.getElementById("return"); el.style.whiteSpace = 'nowrap'; }); 結果 HD画面 4K画面 ポエム 早割りとか売り切れとか把握するのもひと手間で、もうちょっとなんとかならんのかって思って作りました。 一度、間違えてオプション足りないやつを買ってしまったこともありますorz 公式にこういう表示をさせるボタンが実装されるといいな
対象者 ハンバーガーメニュー実装を考えている方 メニューを閉じているのに中身をクリックできる不具合が出ている方 目的 ハンバーガーメニューの実装 不具合の解消 実際の手順と実例 1.前提とエラー 下記の記事を参考にハンバーガーメニューを実装しました。 しかし、閉じている状態でも中身のリンクをクリックできる不具合に遭遇したので、これを解消していきたいと思います。 2.結論(解決策) CSSが今回の原因でした。 before application.scss /* ナビが開いた状態 */ nav.globalMenuSp { position: fixed; z-index : 2; top : 0; left : 0; color: #fff; background: rgba(0,0,0,0.7); text-align: center; width: 100%; opacity: 0; transition: opacity .6s ease, visibility .6s ease; } /* このクラスを、jQueryで付与・削除する */ nav.globalMenuSp.active { opacity: 100; } after application.scss /* ハンバーガーメニューの中身 */ nav.globalMenuSp { position: fixed; z-index : 2; top : 0; left : 0; color: #fff; background: rgba(0,0,0,0.7); text-align: center; width: 100%; opacity: 0; transition: opacity .6s ease, visibility .6s ease; visibility: hidden; #ここを追加 } /* ハンバーガーメニューが動いたとき */ nav.globalMenuSp.active { opacity: 100; visibility: visible; #ここを追加 } 3.原因 opacityを0にして透明になっていても、onclickイベントを拾ってしまうでした opacityとは透明度を調整するCSSです。 また、visibilityは要素を非表示にするCSSです。 visibility は CSS のプロパティで、文書のレイアウトを変更することなく要素を表示したり非表示にしたりします。 ここではvisibility: hidden;を指定してハンバーガーメニューの中身が隠れるようにしています。 その後visibility: visible;でハンバーガーメニューが動いた際に要素が可視化されるようになっています。 参照 【JS】ハンバーガーメニューの実装方法【CSS】 ハンバーガーメニューが閉じている状態なのに、中のリンクが押せてしまう。
