iPhoneのスクロールバーをカスタマイズする時、jsで実装するとスクロールの挙動が変わる。 デフォルトの挙動を残したかったので、::-webkit-scrollbarを使おうとしたが表示されなかった。 参考URL ・iOS13でCSSでスクロールバー拡張できる::-webkit-scrollbarが使えなくなったよう https://am-yu.net/2019/09/27/ios13-webkit-scrollbar/ ・慣性スクロール実装でスクロールバーは常に表示できない？ https://fantastech.net/scroll-bar ・iOS デフォで慣性スクロールできるようになった？ https://qiita.com/cubkich/items/d192a70856e8bc63c7bc 考察 iPhoneで慣性スクロールを指定すると、::-webkit-scrollbarが使えなくなる iOS13から慣性スクロールがデフォルトになった デフォで慣性スクロールなので::-webkit-scrollbarが使えなくなる 参考URLから察するに、これが原因思われる
iPhoneのスクロールバーをカスタマイズする時、jsで実装するとスクロールの挙動が変わる。 デフォルトの挙動を残したかったので、::-webkit-scrollbarを使おうとしたが表示されなかった。
・iOS13でCSSでスクロールバー拡張できる::-webkit-scrollbarが使えなくなったよう https://am-yu.net/2019/09/27/ios13-webkit-scrollbar/
・慣性スクロール実装でスクロールバーは常に表示できない？ https://fantastech.net/scroll-bar
・iOS デフォで慣性スクロールできるようになった？ https://qiita.com/cubkich/items/d192a70856e8bc63c7bc
参考URLから察するに、これが原因思われる
iPhoneのスクロールバーをカスタマイズする時、jsで実装するとスクロールの挙動が変わる。 デフォルトの挙動を残したかったので、::-webkit-scrollbarを使おうとしたが表示されなかった。 参考URL ・iOS13でCSSでスクロールバー拡張できる::-webkit-scrollbarが使えなくなったよう https://am-yu.net/2019/09/27/ios13-webkit-scrollbar/ ・慣性スクロール実装でスクロールバーは常に表示できない？ https://fantastech.net/scroll-bar ・iOS デフォで慣性スクロールできるようになった？ https://qiita.com/cubkich/items/d192a70856e8bc63c7bc 考察 iPhoneで慣性スクロールを指定すると、::-webkit-scrollbarが使えなくなる iOS13から慣性スクロールがデフォルトになった デフォで慣性スクロールなので::-webkit-scrollbarが使えなくなる 参考URLから察するに、これが原因と思われる。 解決策（模索中） 「iOS13から慣性スクロールがデフォルトになった」のはAppleの公式発表から読み取れる。 Added support for one-finger accelerated scrolling to all frames and overflow:scroll elements eliminating the need to set-webkit-overflow-scrolling: touch. Safari 13 Release Notes https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes#3314682 「-webkit-overflow-scrolling: touch」を記述しなくても慣性スクロールになるなら、 これを打ち消せば「::-webkit-scrollbar」が使えるのでは...?? 「-webkit-overflow-scrolling: auto」と記述しましたが、うまくいきませんでした。
参考URLから察するに、これが原因と思われる。
「iOS13から慣性スクロールがデフォルトになった」のはAppleの公式発表から読み取れる。
Added support for one-finger accelerated scrolling to all frames and overflow:scroll elements eliminating the need to set-webkit-overflow-scrolling: touch.
Safari 13 Release Notes https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes#3314682
「-webkit-overflow-scrolling: touch」を記述しなくても慣性スクロールになるなら、 これを打ち消せば「::-webkit-scrollbar」が使えるのでは...??
「-webkit-overflow-scrolling: auto」と記述しましたが、うまくいきませんでした。
はじめに CSSとHTMLだけで、要素（画像など）を縦にフワフワと動かしてみます。 下記参考ページの「一番上のスマートフォン」のような動きが可能です。 【参考】 https://www.ana.co.jp/ja/jp/amc/promo/app-service/ 方法 動かしたい要素のclassに任意の文字列を設定します。 この場合は「img scr="○○○"」に対して、classを設定します。 HTML index.html <img scr="○○○" class="####"> その任意の文字列に以下のコードを設定 CSS style.css .#### { animation-name: ▲▲▲▲; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-duration: 1.5s; } 「####」に対して設定した「animation-name」内の「▲▲▲▲」に対して、以下をCSSに記入 CSS style.css @keyframes ▲▲▲▲ { 0% { transform: translate(0,0px); } 100% { transform: translate(0,-15px) } } 以上で要素「img scr="○○○" class="####"」が上下にフワフワ動きます。 ぜひお試しください！ 参考リンク 以下の記事もご参考にどうぞ。 ・cssのkeyframesで要素に動きや変化をアニメーションでつけるサンプル http://mugen00.moo.jp/web/css/keyframes-sample
CSSとHTMLだけで、要素（画像など）を縦にフワフワと動かしてみます。 下記参考ページの「一番上のスマートフォン」のような動きが可能です。 【参考】 https://www.ana.co.jp/ja/jp/amc/promo/app-service/
動かしたい要素のclassに任意の文字列を設定します。 この場合は「img scr="○○○"」に対して、classを設定します。
<img scr="○○○" class="####">
その任意の文字列に以下のコードを設定
.#### { animation-name: ▲▲▲▲; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-duration: 1.5s; }
「####」に対して設定した「animation-name」内の「▲▲▲▲」に対して、以下をCSSに記入
@keyframes ▲▲▲▲ { 0% { transform: translate(0,0px); } 100% { transform: translate(0,-15px) } }
以上で要素「img scr="○○○" class="####"」が上下にフワフワ動きます。
ぜひお試しください！
以下の記事もご参考にどうぞ。
・cssのkeyframesで要素に動きや変化をアニメーションでつけるサンプル http://mugen00.moo.jp/web/css/keyframes-sample
「おい、ダークモードには対応していないのか？」と、誰かから言われたり言われなかったり。 で、調べてみたらCSSとJSで良さげなのが見つかったので備忘録代わりに CSS @media (prefers-color-scheme: light) { /* ライトモード用CSS */ } @media (prefers-color-scheme: dark) { /* ダークモード用CSS */ } CSSの場合、まだ草案段階なので、ダークモードだけ@mediaを使っていくのが良さげ 対応率も良さげ（低いが、ダークモード対応端末だけで見るとよい割合な気がする。） Can I Use JavaScript if(window.matchMedia('(prefers-color-scheme: dark)').matches){ document.write('ダークモードだよ'); } else if (window.matchMedia('(prefers-color-scheme: light)').matches){ document.write('違うな'); } else { document.write('何者だ？'); } Can I Use まとめ なんか、業界見直したっす
「おい、ダークモードには対応していないのか？」と、誰かから言われたり言われなかったり。
で、調べてみたらCSSとJSで良さげなのが見つかったので備忘録代わりに
@media (prefers-color-scheme: light) { /* ライトモード用CSS */ } @media (prefers-color-scheme: dark) { /* ダークモード用CSS */ }
CSSの場合、まだ草案段階なので、ダークモードだけ@mediaを使っていくのが良さげ
@media
対応率も良さげ（低いが、ダークモード対応端末だけで見るとよい割合な気がする。）
Can I Use
if(window.matchMedia('(prefers-color-scheme: dark)').matches){ document.write('ダークモードだよ'); } else if (window.matchMedia('(prefers-color-scheme: light)').matches){ document.write('違うな'); } else { document.write('何者だ？'); }
なんか、業界見直したっす
WordPressのトップにあるindex.phpを確認。 初期設定通りであれば、 wp-blog-header.php を参照するように設定されているはず。 index.php ドキュメントルート/wp/index.php /** Loads the WordPress Environment and Template */ require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' ); wordpressが読み込む順番は、 index.php→wp-blog-header.php なので、index.phpと同じ階層に表示させたいコンテンツを配置することで、 1. 静的コンテンツを配置したディレクトリ 2. wp-blog-header.php の順番に参照します。 ここで１つ問題なになるのが、 Wordpressと静的コンテンツのディレクトリが重複してしまう場合です。 例) WordpressのURL https://sample.com/test/ 静的コンテンツとして表示させたいURL https://sample.com/test/landing この場合、ディレクトリ配下にindex.phpと同様に、 wp-blog-header.phpにリダイレクトさせることで解決できます。 ※基本はindex.phpをコピーしてパスの設定を修正するだけで大丈夫です。 cp index.php test/index.php 相対パスの設定を修正 【注意事項】 直接参照させているだけなので、ファビコンは表示されません。 僕の場合は、結局WordPressのテーマに静的ファイルを入れ込む形で実装しました。
WordPressのトップにあるindex.phpを確認。 初期設定通りであれば、 wp-blog-header.php を参照するように設定されているはず。
ドキュメントルート/wp/index.php /** Loads the WordPress Environment and Template */ require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' );
wordpressが読み込む順番は、 index.php→wp-blog-header.php
なので、index.phpと同じ階層に表示させたいコンテンツを配置することで、 1. 静的コンテンツを配置したディレクトリ 2. wp-blog-header.php の順番に参照します。
ここで１つ問題なになるのが、 Wordpressと静的コンテンツのディレクトリが重複してしまう場合です。
例) WordpressのURL https://sample.com/test/ 静的コンテンツとして表示させたいURL https://sample.com/test/landing
この場合、ディレクトリ配下にindex.phpと同様に、 wp-blog-header.phpにリダイレクトさせることで解決できます。 ※基本はindex.phpをコピーしてパスの設定を修正するだけで大丈夫です。
cp index.php test/index.php 相対パスの設定を修正
【注意事項】 直接参照させているだけなので、ファビコンは表示されません。 僕の場合は、結局WordPressのテーマに静的ファイルを入れ込む形で実装しました。
画面遷移せずにGETで値を送る方法のメモです。 HTMLで値をGET送信 a href="URL?属性名=変数名" <body> <a href="TestServlet?action=sample"></a> </body> Javaで値を受け取る request.getParameter("属性名") sは文字列「sample」を受け取ります。 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String s = request.getParameter("action");
画面遷移せずにGETで値を送る方法のメモです。
a href="URL?属性名=変数名"
<body> <a href="TestServlet?action=sample"></a> </body>
request.getParameter("属性名") sは文字列「sample」を受け取ります。
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String s = request.getParameter("action");
