html

2月メモ・リンク集

2月に調べたことのメモです。 リサイザー Show More/Less コンポーネント ドラッグアンドドロップ(dnd) Googleスプレッドシート的なスクロール AngularのDIに関して Ruby, Rails関連 VS CodeでRubyを書く その他 リサイザー angular-resizer - StackBlitz …

ブロック要素にリンク(a tag)をつける

ブロック要素内のaタグを、要素いっぱいに広げる text-indent: -999px; などでテキストを非表示にする必要がある シンプルにaタグでブロック要素を包む ブロック要素内のテキストがリンクテキストと同じスタイルにならないように調整する(必要ならば) a { …

MouseEvent, KeyboardEventを利用してHTMLElementを操作

Event - Web APIs | MDN MouseEvent - Web APIs | MDN KeyboardEvent - Web APIs | MDN HTMLElement - Web APIs | MDN EventTarget <- Node <- Element <- HTMLElement /** * ボタンのdisabled属性を変更 */ public onMouseEvent($event: MouseEvent) { cons…

ウィンドウや他の要素の高さに合わせて、スクロールコンテナの高さを調整

以下画像の、緑の高さをコントロールしたい。 一番左のFlexboxを利用する方法が簡単でよさそう。 並びをカラムに変更 height: 100% と flex-grow: 1 をうまく利用 (以下のコードはjsfiddleとほぼ同じ。) <html class="no-js" lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <base href="/"> <title></title> </base></meta></meta></head></html>

z-indexとスタック文脈

重なり順の制御をしているときに、スタック文脈というものを理解していなかったことに気づきました。 以下の記事がわかりやすかったです。MDNにはいつもお世話になります。ありがたい。 CSS の z-index の理解 - CSS | MDN z-index なしのスタック : デフォ…