- 投稿日：2022-01-16T22:46:28+09:00
nuxt.jsで作ったサイトでposition:stickyが効かないのはbodyにデフォルトで当たるoverflowが悪かった
先に結論：nuxt.config.jsに下記のように書くことでposition:sticky;が効くようになります nuxt.config.js bodyAttrs: { style: 'overflow: unset!important;' }, 注意点 逆にbodyにoverflow: hidden;などを当てたいときに困ります。特にモーダルとかの実装。htmlにoverflow: hidden;を設定するなどの副次的な対応が必要になると思います。 ということは、この対応法は少なくともBestな方法ではないので、他の方法があればご教授いただければ幸いです。 さて、上記でstickyが動くようになった場合、なぜそれで直るのかも一応知っておいたほうがよいかもしれないので、書いておきます。 前提１：stickyしたい要素の親にoverflowの値が設定されているとstickyが効かなくなる なお粘着要素は、直近の祖先がスクロールしない場合でも、「スクロールの仕組み」を持つ直近の祖先 (overflow が hidden, scroll, auto, overlay として作成されたもの) に「粘着」します。これによって「粘着」のふるまいを効果的に抑止します (GitHub issue on W3C CSSWG を参照)。 position - CSS: カスケーディングスタイルシート 前提２：bodyにoverflowの値がstyleで指定されている 前提１を踏まえてposition: sticky;を適用した要素の親をブラウザで順番に見ていくと、なんとbodyが下記のようになっていました。 style body { overflow: scroll!important; } このとき厄介なのがstyleによって指定されていることです。このことが意味するのは、CSSの上書きでは十中八九打ち勝てないことを意味しています。ご丁寧に!importantまでされていますので、それはより濃厚です。実際、nuxt.config.jsを編集し、bodyにclassを指定し、それによってこのoverflowを上書きすることも試しましたが無駄でした。 nuxt.config.js bodyAttrs: { class: 'overflow-unset' }, // この場合、classは当たるが、styleには打ち勝てない ということで、nuxt.config.jsでbodyにstyle属性値をセットすることで無理やりstickyを動作させるというtipsでした。
- 投稿日：2022-01-16T16:42:35+09:00
ApacheでWebサーバー備忘録
ApacheでWebサーバー備忘録 Apacheとは 無料のWebサーバーソフトウェア。現在、最も世界でShareをとっている。 1995年から歴史が長く、安定性やサブ機能の豊富さ、他ソフトウェアとの互換性の良さで定評がある。 他のweb サーバーとしては、MicrosoftのIISやnginxがよく採用されている。 Apache Install 以下のWebsiteで.Zipファイルをダウンロードする。 C:直下などで展開して、Apache/conf/httpd.confを開いて、#ServerName*をコメントアウトを外して、ServerName*とする。 ServerName www.example.com:80 あとはC:Apache24binで以下のコマンドを実行して、Apache Webサービスを開始する。 C:Apache24\bin>httpd -k start Apache起動端末なら、http://localhost/ で、その他の同LAN内端末なら http://192.168.**.***/ で、閲覧できる。 ブラウザ表示で"It works!"と出れば正常にアクセスできている。 Web page公開は適当にフォルダを作成し、C:Apache/conf/httpd.confを開いて以下の該当箇所のパスを修正する。 DocumentRoot "C:\xampp\webroot" <Directory "C:\xampp\webroot"> 公開フォルダの直下にhtmlファイルを置いて、先ほどと同様にhttp://localhost/ か http://192.168.**.***/ で開くと、web pageが表示される。※Apacheは再起動 C:\Apache24\bin>httpd -k restartする必要がある。 公開フォルダの構造 webroot/ ├─ index.html ├─ css/ ├─ style.css ├─ img/ ├─ sample.jpg index.html <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML Sample</title> <link rel="stylesheet" href="css/style.css"> <!-- <script type="text/javascript" src="sample.js"></script> --> </head> <body> <section class="wrapper"> <div class="container"> <div class="content"> <h2 class="heading">#######################</h2> <div class="list"> <div class="list-item">######################################</div> </div> </div> </div> </section> </body> </html> style.css /* container */ .wrapper{ width:100%; background-image:url(../img/sample.jpg); background-repeat:no-repeat; background-size:cover; background-position: center center; } .wrapper .container{ max-width:1000px; margin:0px auto; padding:80px 0px; } /* content */ .wrapper .content .heading{ margin:0px 0px 40px 0px; color:#ffffff; font-size: 24px; font-weight: normal; text-align: center; } @media (min-width: 992px) { .wrapper .content .list { display: flex; align-items: center; justify-content: center; } } .wrapper .content .list-item { padding:30px; line-height:1.8rem; color:#ffffff; text-align:center; } @media (min-width: 992px) { .wrapper .content .list-item { width:50%; } } 表示されるweb page Apache module install Apacheには豊富なmoduleがあり、以下のLinkで一覧が確認できる。非常に多くの"modle"が備わっています。 静的なモジュール(Install時に既に入っているもの) デフォルトでは以下のモジュールが入っている。 C:\Apache24\bin>httpd -l Compiled in modules: core.c - 常に使用可能な Apache HTTP サーバのコア機能 mod_win32.c - 起動時や再起動時に実行コードとモジュールをサーバにロードする mpm_winnt.c - Windows NT 向けに最適化されたマルチプロセッシングモジュール http_core.c - 常に使用可能な Apache HTTP サーバのコア機能 mod_so.c - 起動時や再起動時に実行コードとモジュールをサーバにロードする 動的なモジュール(Install後に追加する必要があるもの) C:\Apache24\bin>httpd -M Loaded Modules: actions_module (shared) alias_module (shared) allowmethods_module (shared) asis_module (shared) auth_basic_module (shared) authn_core_module (shared) authn_file_module (shared) authz_core_module (shared) authz_groupfile_module (shared) authz_host_module (shared) authz_user_module (shared) autoindex_module (shared) cgi_module (shared) dir_module (shared) env_module (shared) include_module (shared) isapi_module (shared) log_config_module (shared) mime_module (shared) negotiation_module (shared) setenvif_module (shared) ..... まとめ Apacheのinstallと簡単なweb siteを表示した。非常に簡単にWeb siteを立てられ、初心者でWeb siteに興味のある方は簡単にやってみるといいと思った。
- 投稿日：2022-01-16T15:14:48+09:00
備忘録）css3のテキストグラデーション
参考を見ながら適用しようとしたら詰まったのでメモ 概要 参考を見て試すも background-clip: text;が適用されず文字抜きが上手く表示されなかった 原因・結果 backgroundセレクターでは反映されず、background-image又はbackground-textでは反映されるみたい style.css /*-- NG --*/ .textGr{ color: #ae9b7a; background: linear-gradient(90deg, rgba(174,155,122,1) 0%, rgba(255,241,215,1) 50%, rgba(174,155,122,1) 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; display: inline-block; } /*-- OK --*/ .textGr{ color: #ae9b7a; background-image: linear-gradient(90deg, rgba(174,155,122,1) 0%, rgba(255,241,215,1) 50%, rgba(174,155,122,1) 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; display: inline-block; } 参考先
- 投稿日：2022-01-16T13:31:58+09:00
Siemaをスマホ対応 メモ
今回Siemaをスマホ対応させてみたメモになります。 前提として、 Siemaとは JavaScriptによる、画像スライダー https://pawelgrzybek.github.io/siema/ 詳しくは、ほかの人のこれらがわかりやすかったです。 【JavaScript】単体で使える超軽量スライダー［Siema］は初心者の方にオススメです。 https://on-ze.com/archives/6194 超軽量スライダーSiemaが最高なのでお勧めしたい https://suzumenote.com/tech/395 やりたいことは、 表示される画像をPCでは2枚、スマホでは1枚にしたい。 HTMLまたは、CSSまた、公式Siemaのオプションではできない？わからなかったので、Siemaのsiema.min.jsファイルをいじりました。 ただ、JavaScript言語が全く分からない、なので取り敢えず弄ってみましした。 （あまり時間がなかったので、JavaScriptを学ぶのはまたの機会に） 本題の追加コードですが、こちら if(document.body.scrollWidth<=750) this.perPage=1; になります。 意味は ビューポートの幅 (スクロールバーの幅を除く) が750以下なら画像の表示枚数を1にする、です。 ビューポートの幅とは、簡単にブラウザの(スクロールバーの幅を除く)横幅サイズになります。これらのサイトを参考にしました。 Element.clientWidth https://developer.mozilla.org/ja/docs/Web/API/Element/clientWidth JavaScriptでウインドウサイズを取得 https://web-designer.cman.jp/javascript_ref/window/size/ 追加コードを siema.min.jsファイル { key:"buildSliderFrame", value:function() { /*追加コード*/ if(document.body.scrollWidth<=750) this.perPage=1; ここに入れます。 場所を探すのはkey:"buildSliderFrame"を目印にすると良いと思います。 問題のなぜここの場所に入れるかが、自分でもよくわかってないです。 ここの場所に入れた経緯を書いていきます。 まず、一行で公式コードが書かれているので、{} や ; や , で改行しました。 そしてperPageの変数、が画像の表示数であることが、公式オプションから読み取れました。 なので、この変数を探しました。 (jsファイルを開くのにMery を使いましたが 検索機能 便利でした) その最中にkey:~~があり key:"Next" や key:"prev" など見たことあるものがあり、そこからkey:~~は処理内容にそった文字列だと予測、またfunctionがJavaScriptの関数であることが調べてわかりました。 なので、perPage変数がある関数の最初の行に追加コードを書いてみて、webブラウザで動作確認してみたら、key:"buildSliderFrame",の関数にのみ追加すれば、問題なく動くことがわかりました。 というのが、一連の流れになります。 ちょっとした、わかったこと。 超軽量スライダーSiemaが最高なのでお勧めしたい https://suzumenote.com/tech/395 にて multipleDrag 謎です。とのことが書いてありましたが、 表示枚数を３枚にすると、わかりやすいですが、 multipleDragをfalseにすると三枚をすべて新しい画像にスライドできなくなります。 multipleDragをtrueにすると三枚をすべて新しい画像にスライドできます。 ということです。 ちょっとした、コード。 HTML <script> var mySiema = new Siema({ selector: '.siema', duration: 500, easing: 'ease-out', perPage: 2, startIndex: 0, draggable: true, threshold: 20, loop: true, onInit: () => {}, onChange: () => {}, }); document.querySelector('.js-prev1').addEventListener('click', function() {mySiema.prev()}); document.querySelector('.js-next1').addEventListener('click', function() {mySiema.next()}); setInterval(() => mySiema.next(), 5500); </script><!-- スクロール自動化 --> CSS @media (max-width:767px){ .siema-btn ul{ display:grid; grid-template-columns: 100%; grid-template-rows: 50% 50%; } .prev{ grid-row:2/3; } .next{ grid-row:1/2; } } こちらのCSSはnext,prevボタンの表示順序がPCでは横並び、スマホなら縦並びなら、縦並びの時、prevボタンが上に来てしまうので、nextボタンを上に持ってくるCSSです。 参考にしたもの 「display:grid」の使い方について【備忘録】 https://freemas.org/making/css/display-grid PCでは横並び スマホなら縦並び nextを上に持ってきたのが右。