開発環境は、Windows10 Pro(64bit) + Firefox 69.0.3(64bit)。例えば、ボタンをクリックして、モーダルを表示させるときなど、ウィンドウ以外の背景部分のコンテンツの上に、分かりやすくするために、透過した色の背景をオーバーレイして、クリックできない…

TwitterのDM部分は、スクロールが最初から一番下に位置していて、一番上に持っていくと、無限スクロールによって、古いDMが読み込まれるような構造です。最初に投稿した段階で、メッセージは一番下に来るようにするには、positionをabsoluteにしなくてはいけ…

幅をwidthで最初から指定せずに、文字列の長さに応じて動的に変更したい場合は、 display:inline-block; を追加すればいいんですが、これだと、 margin-left:auto; margin-right:0px; のような形で右寄せすることができません。今回はその解決メモです。 解…

開発環境は、Windows 10 Pro(64bit) + node v10.15.0。Sass(SCSS)はCSSをより短い入力で書いて、そのままではきちんと動作しないので、変換して、CSSファイルを作成する仕組みです。すでにnode.js(npm)をインストールしている前提で書いています。以下の公式…

開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。ボタンをクリックすることでページの下部に、メッセージを3秒間させるアニメーションを作成する。heightが0pxなので、読み込んだ時点では、Message部分は見えない。HTML…

object-fit-imagesというJavaScriptファイルを用いて実現します。1.下記のサイトへアクセスする GitHub - bfred-it/object-fit-images: 🗻 Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari, ... 2.右側の緑の『Clone or download』を…

display:flex;で囲って、 左寄せはmarin-right:auto; 右寄せはmargin-left:auto; 中央寄せは margin-right:auto;margin-left:auto; margin:0 auto; margin:auto; のどれか。 <div style="display:flex;"> <div style="margin-right:auto;">左寄せ</div> <div style="margin-left:auto;margin-right:auto;">中央寄せ</div> <div style="margin-left:auto;">…</div></div>

開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32bit)。 ■画像を画面中央に表示させたい ■CSS側 #img_location{ top:50%; right:50%; left:50%; bottom:50%; position:fixed; z-index:1001; } ■HTML側 <img id="img_location" src="test.png"> ↓下にテスト用の画像を置いておきます。 …