どうも7noteです。lazyloadを入れていてもスムーズにページ内リンクできる方法 以前表示速度が少し心配なサイトがあり、lazyload属性を使いつつもでもページ内リンクをさせたい場面がありました。 もし対策せずにどちらも入れてしまうと、画像が読み込まれていないかページ内リンクの高さ取得が上手くできず 画像が後から読み込まれることで高さが変わってしまい、本来の位置よりも上の方に移動してしまいます。 ですがjQueryのwhenを使うことでこの問題を解決することができます。 lazyload対応スムーズスクロールの書き方 ※jQueryを使用しています。jQueryってなんだという方はこちら $(function () { $('a[href^=#]').click(function(e) { var headerHight = 50; /* ヘッダーの高さ(50px) */ var href = $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top - headerHight; $.when( $("html, body").animate({ scrollTop: position }, 400, "swing"), e.preventDefault(), ).done(function() { var diff = target.offset().top - headerHight; if (diff === position) { } else { $("html, body").animate({ scrollTop: diff }, 10, "swing"); } }); }); }); 詳しい動きの解説は参考にさせていただいたページの書き方に載っていますので省略させていただきます。 参考：https://kaiteki-chokin.com/anchor-link-lazy-loading/ whenについて簡単に解説 whenを使うことで、複数の非同期処理が全部終わったら、続く処理を行うことができます。 今回の処理ではこれを利用し、画像がlazyloadでちゃんと読み込まれた後に正しい位置までのスクロール処理を行なっています。 まとめ jsは様々な便利なライブラリやソースがネットにあるので1つのページに様々な種類のソースを書くことは珍しくありません。 ただ、その動き方やソースの内容や特性をしっかり理解できないと相性が悪く上手く動かない事もあります。 なので自分がソースを書くことも大事ですが、他人のソースを読めることも大事だと思います。 おそまつ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
以前表示速度が少し心配なサイトがあり、lazyload属性を使いつつもでもページ内リンクをさせたい場面がありました。
もし対策せずにどちらも入れてしまうと、画像が読み込まれていないかページ内リンクの高さ取得が上手くできず 画像が後から読み込まれることで高さが変わってしまい、本来の位置よりも上の方に移動してしまいます。
ですがjQueryのwhenを使うことでこの問題を解決することができます。
※jQueryを使用しています。jQueryってなんだという方はこちら
$(function () { $('a[href^=#]').click(function(e) { var headerHight = 50; /* ヘッダーの高さ(50px) */ var href = $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top - headerHight; $.when( $("html, body").animate({ scrollTop: position }, 400, "swing"), e.preventDefault(), ).done(function() { var diff = target.offset().top - headerHight; if (diff === position) { } else { $("html, body").animate({ scrollTop: diff }, 10, "swing"); } }); }); });
詳しい動きの解説は参考にさせていただいたページの書き方に載っていますので省略させていただきます。
参考：https://kaiteki-chokin.com/anchor-link-lazy-loading/
whenを使うことで、複数の非同期処理が全部終わったら、続く処理を行うことができます。 今回の処理ではこれを利用し、画像がlazyloadでちゃんと読み込まれた後に正しい位置までのスクロール処理を行なっています。
jsは様々な便利なライブラリやソースがネットにあるので1つのページに様々な種類のソースを書くことは珍しくありません。 ただ、その動き方やソースの内容や特性をしっかり理解できないと相性が悪く上手く動かない事もあります。
なので自分がソースを書くことも大事ですが、他人のソースを読めることも大事だと思います。
~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
実装 固定させたい要素にposition: sticky;を付与する 固定させる位置top: 0;を指定する footerの場合はbottom: 0;とすれば下に固定されます。 HTML <body> <header class="ly_header">ヘッダ</header> <main class="ly_main">メインコンテンツ</main> <footer class="ly_footer">フッタ</footer> </body> CSS .ly_header { position: sticky; position: -webkit-sticky; top: 0; } See the Pen fixed-header by heeroo-ymsw (@heeroo-ymsw) on CodePen. 実装時のポイント stickyの機能の仕方 stickyを指定した要素は、それを内包するコンテナ内でのみ固定されます。 つまり、前述の例でいえば、body内で固定されていることになります。 以下の例を見れば分かりやすいかと思います。 HTML <div class="bl_contents"> <div class="bl_contents_item bl_contents_item__sticky">スティッキーアイテム</div> <div class="bl_contents_item">普通のアイテム</div> </div> <div class="bl_contents"> <p>hogehoge fugafuga</p> </div> CSS .bl_contents_item__sticky { position: sticky; top: 0; } See the Pen sticky-sample1 by heeroo-ymsw (@heeroo-ymsw) on CodePen. bl_contents_item__stickyクラスを指定した要素は、それを内包するbl_contents内でのみスティッキーを発揮することがお分かりいただけたと思います。 要素1つのみを内包する場合はstickyが機能しない 前述の内容を理解すれば当たり前だろと言いたくなるかもしれませんが、以下のような場合はstickyが機能しません。 HTML <div class="bl_contents"> <div class="bl_contents_item bl_contents_item__sticky">スティッキーアイテム</div> </div> この場合、stickyアイテムには兄弟要素がないため、stickyしたくてもする場所がありません。 よって、うまく機能しないということになります。 対応ブラウザ Can I useによると、ほぼ全ての主要ブラウザは対応しています。 Safariではベンダープレフィックスを加える必要がありますので、以下のように記述します。 prefix .stickyItem { position: -webkit-sticky; position: sticky; } position: fixed;との違い position: fixed;でもヘッダ固定はできますが、大きな違いとしては、ページレイアウト内にその要素のための空白を用意してくれないということです。 実際に見れば違いは一目瞭然です。 一番最初の例を用いて、position: fixed;にするとこうなります。 fixedを使うと、固定したい要素のwidthを指定したり、メインコンテンツにかぶらないようにmarginとったりなど、いろいろと気をつかわなければいけないことが発生します。 そのような点でstickyは簡素に記述ができ、便利です。 まとめ stickyの動きをテキストで説明するならば、以下の特徴を持っているといえます。 relativeやstaticのように、ページレイアウト内にその要素のための空間が作られる fixedのようにビューポートの同じ場所にぴたっとくっつく relativeな親要素を持つabsoluteのようにそれを内包する親要素にとどまる 参考文献 CSS Position Sticky - How It Really Works! | by Elad Shechter position - CSS: カスケーディングスタイルシート | MDN
position: sticky;
top: 0;
footerの場合はbottom: 0;とすれば下に固定されます。
bottom: 0;
<body> <header class="ly_header">ヘッダ</header> <main class="ly_main">メインコンテンツ</main> <footer class="ly_footer">フッタ</footer> </body>
.ly_header { position: sticky; position: -webkit-sticky; top: 0; }
See the Pen fixed-header by heeroo-ymsw (@heeroo-ymsw) on CodePen.
stickyを指定した要素は、それを内包するコンテナ内でのみ固定されます。 つまり、前述の例でいえば、body内で固定されていることになります。
sticky
body
以下の例を見れば分かりやすいかと思います。
<div class="bl_contents"> <div class="bl_contents_item bl_contents_item__sticky">スティッキーアイテム</div> <div class="bl_contents_item">普通のアイテム</div> </div> <div class="bl_contents"> <p>hogehoge fugafuga</p> </div>
.bl_contents_item__sticky { position: sticky; top: 0; }
See the Pen sticky-sample1 by heeroo-ymsw (@heeroo-ymsw) on CodePen.
bl_contents_item__stickyクラスを指定した要素は、それを内包するbl_contents内でのみスティッキーを発揮することがお分かりいただけたと思います。
bl_contents_item__sticky
bl_contents
前述の内容を理解すれば当たり前だろと言いたくなるかもしれませんが、以下のような場合はstickyが機能しません。
<div class="bl_contents"> <div class="bl_contents_item bl_contents_item__sticky">スティッキーアイテム</div> </div>
この場合、stickyアイテムには兄弟要素がないため、stickyしたくてもする場所がありません。 よって、うまく機能しないということになります。
Can I useによると、ほぼ全ての主要ブラウザは対応しています。 Safariではベンダープレフィックスを加える必要がありますので、以下のように記述します。
.stickyItem { position: -webkit-sticky; position: sticky; }
position: fixed;でもヘッダ固定はできますが、大きな違いとしては、ページレイアウト内にその要素のための空白を用意してくれないということです。
position: fixed;
実際に見れば違いは一目瞭然です。 一番最初の例を用いて、position: fixed;にするとこうなります。
fixedを使うと、固定したい要素のwidthを指定したり、メインコンテンツにかぶらないようにmarginとったりなど、いろいろと気をつかわなければいけないことが発生します。 そのような点でstickyは簡素に記述ができ、便利です。
fixed
stickyの動きをテキストで説明するならば、以下の特徴を持っているといえます。
relative
static
absolute
CSS Position Sticky - How It Really Works! | by Elad Shechter position - CSS: カスケーディングスタイルシート | MDN
概要 ・以下のGIFのようなことができます。 （Youtube Linkという文字をクリック→Youtube動画がポップアップ表示→✖︎で閉じる） ・Magnific_Popup というjQueryを使います。 実装 1.Magnific-Popupのファイルを入手 https://github.com/dimsemenov/Magnific-Popup/ にアクセスし、ZIPファイルをダウンロードします。 2.解凍し、必要なファイルの取り出し ZIPファイルを解凍し、distディレクトリ内にある、 jquery.magnific-popup.min.js magnific-popup.css の２つを、ご自身のプロジェクトの適切なディレクトリに移動します。 3.プロジェクト内で、ファイルの読み込み magnific-popup.css →headタグ内に、読み込むコードを記述します。 以下は、プロジェクトのcssというディレクトリ内に配置した場合の、読み込みの例です。 <head> <meta charset="utf-8"/> <title>チケット管理</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="/css/magnific-popup.css"> </head> jquery.magnific-popup.min.js →bodyタグ内に、読み込むコードを記述します。 以下は、プロジェクトのjsというディレクトリ内に配置した場合の、読み込みの例です。 ※jQueryを使用するので、別途jQuery自体の読み込みも必須かつ、jQueryの読み込みよりも後に記述する必要があると思います。以下の例では、jQueryはCDNで読み込んで、その後にmagnific-popupを読み込んでいます。 <body> <div class="container"> <h1>チケット管理</h1> {% block content %}{% endblock %} // コレは今回の実装には関係ありません </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="/js/common.js"></script> <script src="/js/jquery.magnific-popup.min.js"></script> </body> 4.「aタグ押下で、Youtube動画をポップアップ表示」というコードの実装 HTMLファイル <a class="popup-youtube" href="https://www.youtube.com/watch?v=ppWj_7iiu04">Youtube Link</a> 注意）ポップアップさせるYoutube動画のURLですが、Youtube画面の「共有」や「埋め込み」で表示されるURLをそのまま使うと、エラーが出て正しくポップアップ動作が行われません。 https://www.youtube.com/watch?v=[動画のID] という形式で記述する必要があるようです。 ダメ）https://www.youtube.com/embed/ppWj_7iiu04 OK）https://www.youtube.com/watch?v=ppWj_7iiu04 JavaScriptファイル 先ほど読み込んだjquery.magnific-popup.min.jsの中に、「ポップアップでYoutube動画を表示」という関数(magnificPopup())が用意されています。 その関数の呼び出しを行うjQueryは、別途用意する必要があります。 以下は、jsというディレクトリ内にcommon.jsというファイルを用意して、その中に記述しています。 js/common.js $(function () { // セレクタは、HTMLファイルのaタグと合わせる必要があります $('.popup-youtube').magnificPopup({ type: 'iframe' }); }); なお、このjsファイルの読み込みは、magnific-popup.min.jsの前に行いましょう。 要するに、bodyの閉じタグの直前でmagnific-popup.min.jsを読み込めば間違いありません。 <body> <div class="container"> <h1>チケット管理</h1> {% block content %}{% endblock %} // 今回の実装には関係ありません </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="/js/common.js"></script> <script src="/js/jquery.magnific-popup.min.js"></script> </body> まとめ 画面遷移せずにYoutube動画を再生、というのはスタンダードな仕様だと思いますが、 カンタンに実装できます。ぜひチャレンジしてみてください。 また、Magnific-Popupで「クリックしたら画像をポップアップ表示」という実装もできます。 サンプルはこちら https://codepen.io/collection/nLcqo/ 筆者ツイッターです。エンジニアとして一緒にがんばろう！というような発信を心がけています。 よろしければぜひフォローお願いします。 https://twitter.com/ohara5555
・以下のGIFのようなことができます。 （Youtube Linkという文字をクリック→Youtube動画がポップアップ表示→✖︎で閉じる）
・Magnific_Popup というjQueryを使います。
https://github.com/dimsemenov/Magnific-Popup/ にアクセスし、ZIPファイルをダウンロードします。
ZIPファイルを解凍し、distディレクトリ内にある、 jquery.magnific-popup.min.js magnific-popup.css の２つを、ご自身のプロジェクトの適切なディレクトリに移動します。
→headタグ内に、読み込むコードを記述します。 以下は、プロジェクトのcssというディレクトリ内に配置した場合の、読み込みの例です。
<head> <meta charset="utf-8"/> <title>チケット管理</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="/css/magnific-popup.css"> </head>
→bodyタグ内に、読み込むコードを記述します。 以下は、プロジェクトのjsというディレクトリ内に配置した場合の、読み込みの例です。 ※jQueryを使用するので、別途jQuery自体の読み込みも必須かつ、jQueryの読み込みよりも後に記述する必要があると思います。以下の例では、jQueryはCDNで読み込んで、その後にmagnific-popupを読み込んでいます。
<body> <div class="container"> <h1>チケット管理</h1> {% block content %}{% endblock %} // コレは今回の実装には関係ありません </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="/js/common.js"></script> <script src="/js/jquery.magnific-popup.min.js"></script> </body>
<a class="popup-youtube" href="https://www.youtube.com/watch?v=ppWj_7iiu04">Youtube Link</a>
注意）ポップアップさせるYoutube動画のURLですが、Youtube画面の「共有」や「埋め込み」で表示されるURLをそのまま使うと、エラーが出て正しくポップアップ動作が行われません。 https://www.youtube.com/watch?v=[動画のID] という形式で記述する必要があるようです。
ダメ）https://www.youtube.com/embed/ppWj_7iiu04 OK）https://www.youtube.com/watch?v=ppWj_7iiu04
先ほど読み込んだjquery.magnific-popup.min.jsの中に、「ポップアップでYoutube動画を表示」という関数(magnificPopup())が用意されています。 その関数の呼び出しを行うjQueryは、別途用意する必要があります。 以下は、jsというディレクトリ内にcommon.jsというファイルを用意して、その中に記述しています。
$(function () { // セレクタは、HTMLファイルのaタグと合わせる必要があります $('.popup-youtube').magnificPopup({ type: 'iframe' }); });
なお、このjsファイルの読み込みは、magnific-popup.min.jsの前に行いましょう。 要するに、bodyの閉じタグの直前でmagnific-popup.min.jsを読み込めば間違いありません。
<body> <div class="container"> <h1>チケット管理</h1> {% block content %}{% endblock %} // 今回の実装には関係ありません </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="/js/common.js"></script> <script src="/js/jquery.magnific-popup.min.js"></script> </body>
画面遷移せずにYoutube動画を再生、というのはスタンダードな仕様だと思いますが、 カンタンに実装できます。ぜひチャレンジしてみてください。 また、Magnific-Popupで「クリックしたら画像をポップアップ表示」という実装もできます。 サンプルはこちら https://codepen.io/collection/nLcqo/
筆者ツイッターです。エンジニアとして一緒にがんばろう！というような発信を心がけています。 よろしければぜひフォローお願いします。 https://twitter.com/ohara5555
わりと簡単に作れると思っていましたが、 スペースがあったときに1カウントとすると、スペースが2つ続いたときも1単語としてカウントされてしまうことに頭を悩ませました。 解決策 HTML <textarea id="count-area"></textarea> <span id="output"></span> JavaScript const input = document.getElementById('count-area'); input.addEventListener('keyup', countWords); function countWords() { // \S+の意味は「空白、タブ、改行以外が1回以上続く」 const spaces = input.value.match(/\S+/g); let words; if (spaces) { words = spaces.length; } else { words = 0; } document.getElementById('output').textContent = words + " words"; } 参考 Count words as user type - Textarea and Javascript (Youtube) 正規表現入門 レッスン7 Space (Youtube)
わりと簡単に作れると思っていましたが、 スペースがあったときに1カウントとすると、スペースが2つ続いたときも1単語としてカウントされてしまうことに頭を悩ませました。
<textarea id="count-area"></textarea> <span id="output"></span>
const input = document.getElementById('count-area'); input.addEventListener('keyup', countWords); function countWords() { // \S+の意味は「空白、タブ、改行以外が1回以上続く」 const spaces = input.value.match(/\S+/g); let words; if (spaces) { words = spaces.length; } else { words = 0; } document.getElementById('output').textContent = words + " words"; }
Count words as user type - Textarea and Javascript (Youtube) 正規表現入門 レッスン7 Space (Youtube)
Mapboxを使って地図を表示 CDN <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v/mapbox-gl.css' rel='stylesheet' /> Mapbox GL JS / マイアカウントでアクセストークンを取得 mapboxgl.accessToken = 'hoge'; mapboxglのMapオブジェクトを生成（インスタンス化） const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://hoge', center: [lon, lat], zoom: 14 }); オプション container マウントするdiv要素（not ネスト） <div id="map"></div> style マップのスタイル center [longitude, latitude] 中心地の緯度経度 zoom ズーム度 現在地を追跡 map.addControl( new mapboxgl.GeolocateControl({ positionOptions: { enableHighAccuracy: true }, trackUserLocation: true }) ); オプション addControl UIでmapを操作 GeolocateControl 位置情報を操作(類似:Geolocation API) ジオロケーション ユーザーの位置情報を扱う技術 enableHighAccuracy ・false:デフォルト ・true:高精度で現在地を取得 trackUserLocation 詳細不明 trueにするとアニメーションがつく ギアマークをクリックで現在地まで追跡 next リアルタイムに自分の居場所を保存し取り出せる Webページにいる人それぞれの位置をマップに表示
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v/mapbox-gl.css' rel='stylesheet' />
mapboxgl.accessToken = 'hoge';
const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://hoge', center: [lon, lat], zoom: 14 });
container マウントするdiv要素（not ネスト）
<div id="map"></div>
style マップのスタイル
center
[longitude, latitude]
中心地の緯度経度
zoom ズーム度
map.addControl( new mapboxgl.GeolocateControl({ positionOptions: { enableHighAccuracy: true }, trackUserLocation: true }) );
addControl UIでmapを操作
GeolocateControl 位置情報を操作(類似:Geolocation API)
ジオロケーション ユーザーの位置情報を扱う技術
enableHighAccuracy ・false:デフォルト ・true:高精度で現在地を取得
trackUserLocation 詳細不明 trueにするとアニメーションがつく
ギアマークをクリックで現在地まで追跡
リアルタイムに自分の居場所を保存し取り出せる Webページにいる人それぞれの位置をマップに表示
TL;DR Safariではなぜかinputのchangeを拾えないことがある（リロード時の挙動により差分を検知出来ない事があるんだと思う） その場合はonclickイベントでinputのvalueを空にしてやればよい onclickはonchangeよりも先に発火するのでこれで常にnullと比較でき、変更を検知できる const input = document.createElement('input'); input.type = 'file'; input.onclick = () => { this.value = null; }; input.onchange = () => { // なんか処理 };
Safariではなぜかinputのchangeを拾えないことがある（リロード時の挙動により差分を検知出来ない事があるんだと思う） その場合はonclickイベントでinputのvalueを空にしてやればよい onclickはonchangeよりも先に発火するのでこれで常にnullと比較でき、変更を検知できる
const input = document.createElement('input'); input.type = 'file'; input.onclick = () => { this.value = null; }; input.onchange = () => { // なんか処理 };
【忘備録】 ヘッダーも内容、どちらの高さも決めれない場合のフレキシブな２カラム。 【経緯】 システム系の開発していると、ユーザの入力内容によって要素の量が異なるため、 ヘッダーやメインのwidth(幅)やheight(高さ)を固定値で決め打ちするのが難しい。 これではヘッダー固定値にしてその固定値から計算して高さを出すやり方が使えなかったりする。 js使ったら現在値取得して簡単にできると思うけど、そんなのいちいち作りたくないし、 なんとかならないものかと考えに考えた挙句、これならどうだ！的なのを閃いた。 【結果】 html <div class="wrapper"> <!--- 高さが可変なヘッダー --> <header> <div>ロゴマークなど</div> <p>この要素は2行にも3行にもなるため高さ可変なると仮定</p> </header> <!--- 高さが可変な中身 --> <main> <menu> <ul> <li><a>menu1</a></li> <li><a>menu2</a></li> <li><a>menu3</a></li> <!--- このあと4,5,6...と永遠に可変（ここはスクロールにしたい） --> </ul> </menu> </main> </div> sass .wrapper { display: flex; flex-direction: column; height: 100%; overflow-y: auto; } header { position:sticky; top: 0; pointer-events: unset; z-index: 1; } main { flex: 1 0 auto; } 【説明】 とりあえずwrapperはflexにして、子要素のmainにflex:1 0 auto;を指定する。 これで内容はとりあえずウインドウの下まで伸びる。 ※headerにはheightは指定しない。 あとはheaderにstickyをsetし、上部に固定する。 これだと内容（menu）はどれだけ増えてもスクロールでいける。 【ポイント】 maenuがstickyの下に隠れた時に、menuがクリックできてしまう。 これを防ぐためにpointer-events: none;を入れたが、なぜか効かない（クリックできてしまう） pointer-events: unset;をいれたら効いたの（クリックできなくなった）でこれにしている。 なんでだろ。 とりあえず忘備録で走り書き。 また使う時が来ると思うので、その時にまたこの記事をバージョンアップ予定。
ヘッダーも内容、どちらの高さも決めれない場合のフレキシブな２カラム。
システム系の開発していると、ユーザの入力内容によって要素の量が異なるため、 ヘッダーやメインのwidth(幅)やheight(高さ)を固定値で決め打ちするのが難しい。
これではヘッダー固定値にしてその固定値から計算して高さを出すやり方が使えなかったりする。
js使ったら現在値取得して簡単にできると思うけど、そんなのいちいち作りたくないし、 なんとかならないものかと考えに考えた挙句、これならどうだ！的なのを閃いた。
<div class="wrapper"> <!--- 高さが可変なヘッダー --> <header> <div>ロゴマークなど</div> <p>この要素は2行にも3行にもなるため高さ可変なると仮定</p> </header> <!--- 高さが可変な中身 --> <main> <menu> <ul> <li><a>menu1</a></li> <li><a>menu2</a></li> <li><a>menu3</a></li> <!--- このあと4,5,6...と永遠に可変（ここはスクロールにしたい） --> </ul> </menu> </main> </div>
.wrapper { display: flex; flex-direction: column; height: 100%; overflow-y: auto; } header { position:sticky; top: 0; pointer-events: unset; z-index: 1; } main { flex: 1 0 auto; }
とりあえずwrapperはflexにして、子要素のmainにflex:1 0 auto;を指定する。 これで内容はとりあえずウインドウの下まで伸びる。 ※headerにはheightは指定しない。
あとはheaderにstickyをsetし、上部に固定する。 これだと内容（menu）はどれだけ増えてもスクロールでいける。
maenuがstickyの下に隠れた時に、menuがクリックできてしまう。 これを防ぐためにpointer-events: none;を入れたが、なぜか効かない（クリックできてしまう） pointer-events: unset;をいれたら効いたの（クリックできなくなった）でこれにしている。 なんでだろ。
とりあえず忘備録で走り書き。 また使う時が来ると思うので、その時にまたこの記事をバージョンアップ予定。
頻度高めのHTMLタグ早見表 基本構造 タグ 説明 DOCTYPE 使用するHTMLのバージョンを指定する html HTMLの文書であることを示す head HTMLのヘッダ情報で、ページの情報を記載する meta ページのメタ要素(文字コードや説明文など)を指定する title ページのタイトル(ブラウザのタブに表示される)を指定する link 参照する外部ファイル(CSS,JSなど)をロードする body HTMLのコンテンツ部分で、ブラウザに表示される コンテンツ タグ 説明 h1 ~ h6 見出しを表示する(基本的には数字順に使用する) p 文書の段落をつける img 画像を挿入する a ハイパーリンクを挿入する ul 順序なしのリストとして表示する ol 番号付きのリストとして表示する li リストの項目を表示する br 改行を入れる span インライン要素で、このタグのみの装飾ができる script スクリプトを埋め込むことができる(JS) strong 文字を太字にする(おいおい廃止される？) small 免責・警告・法的規制・著作権・ライセンスなどの注釈を表す blockquote 引用文であることを示す audio 音声データを挿入する video 動画データを挿入する フォームとその部品 タグ 説明 form フォームとして、送信する部品を囲む input type="text" １行のテキストボックス textarea 複数行のテキストボックス input type="radio" ラジオボタン input type="checkbox" チェックボックス input type="submit" 入力データの送信ボタン select セレクトボックス option セレクトボックスの選択項目 label 部品に紐づくラベル 表(テーブル) タグ 説明 table 表全体を表し、以下のタグを囲む tr 表の行を表す th 表の見出しとなるセルを表示する td 表のデータとなるセルを表示する ブロック要素 タグ 説明 div 特に意味を持たないブロック header ページ上部にあり、ロゴやタイトル、メニューバーを囲む nav メニューバーとして表示される article ページの記事となるブロックで、そこだけでも独立して記事となるように囲む section 1つのテーマをもったブロック main ページのメインコンテンツとなるブロック aside 補足情報のブロック footer ページ下部にあり、コピーライトなどを囲む
対応ブラウザをIEからChromeに変更する時の注意点その３(アドレスバーの非表示) 対応ブラウザをIEからChromeに変更する時の注意点について備忘録的に記載します。 発生問題点 IE表示時はアドレスバーを非表示としていたが（＊１）、Chromeではアドレスバーが表示されてしまう。 ＊１：window.open()のオプションlocation=noで指定していた 環境 OSはWindows10 バージョン：1803(OSビルド17134.407) Microsoft Internet Explorer バージョン：11.407.17134.0 更新バージョン：11.0.95(BK4466536) Google Chrome バージョン：76.0.3809.100(Official Build) (64ビット) 解決方法 アプリケーションモードでChromeを起動する Chrome.exe --app="対象URL" のようにしてChrome.exeのパラメータに『--app=』を指定してアプリケーションモードで起動する。 この方法を試したところ、アドレスバーは非表示になったが、なぜかウィンドウのサイズが 小さくなることがあり、それにより表示が崩れることがあるためウィンドウサイズの調整が 必要となることがあった。 参考URL https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11198959366 補足 他の解決方法として対象URLのショートカットを作成してアプリ化する方法もあるが、 タイトルがショートカット作成時の名前になってしまう等あったため不採用とした。 参考URL https://www.softantenna.com/wp/tips/chrome-app-mode/
対応ブラウザをIEからChromeに変更する時の注意点について備忘録的に記載します。
IE表示時はアドレスバーを非表示としていたが（＊１）、Chromeではアドレスバーが表示されてしまう。
＊１：window.open()のオプションlocation=noで指定していた
OSはWindows10
Microsoft Internet Explorer
Google Chrome
アプリケーションモードでChromeを起動する
Chrome.exe --app="対象URL"
のようにしてChrome.exeのパラメータに『--app=』を指定してアプリケーションモードで起動する。
この方法を試したところ、アドレスバーは非表示になったが、なぜかウィンドウのサイズが 小さくなることがあり、それにより表示が崩れることがあるためウィンドウサイズの調整が 必要となることがあった。
参考URL https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11198959366
他の解決方法として対象URLのショートカットを作成してアプリ化する方法もあるが、 タイトルがショートカット作成時の名前になってしまう等あったため不採用とした。
参考URL https://www.softantenna.com/wp/tips/chrome-app-mode/
パンくずリストの構造化データの書き方
