CSS CSSのdisplay: flex;で動的な幅変化に対応する
CSSのメモ。display: flex;で動的な横並べを行う。実現したい動作要素Aの隣にある程度の幅が空いていれば、隣に要素Bを表示したい。要素Aは固定幅を持ち、要素Bは最小幅を持ち、幅の空きに応じて横に広がる。幅に余裕のないときは、要素...
css
CSS Vue グローバルなCSSをVue CLIで使う
Vue CLIでグローバルで使えるCSSを設定する環境@vue/cli 4.0.4sass-loader 8.0.0簡潔にグローバルでというのはどの.vueファイルの<style></style>からでもという意味。package.json...
Webサービス Webブラウザ上でmdをhtmlに変換する簡易エディタを作った
以前、記事をMarkdownで書いてhtmlに変換してからアップするという流れを作った。しかし、bash上でコマンドによりhtmlに変換しているので、bashが操作できる環境でないと、変換作業ができない。そして最近では、iPadで記事を書く...
CSS CSS 内部要素のスクロールだけ可能にする
スクロールを禁止するが内部の大きい要素のなかをスクロール可能にする。body { overflow: hidden;}div.long-content { height: -webkit-fill-available; overflow: ...
CSS Bootstrap4 要素の左右センタリング
bootstrap4での要素の左右センタリングを行うbootstrap3で使っていた、.center-blockが使えない。調べると、html - Bootstrap 4 center-block unable to center - St...
CSS CSS bootstrapのrowspanを使ったtableで上下センタリング
bootstrapでrow spanを使った時に、上下方向にセンタリングする。CSSでvertical-align: middle;を使っても、うまくいかなかった。/* これだとセンタリング不可 */table.mytable1 td { ...
CSS CSSの疑似クラスが便利そう
CSSの疑似クラスというものを知りました。jQuery hover()をPCとタッチスクリーンで分ける - ikapでJavascriptでhoverを管理していた。しかし、CSSの疑似クラスを使えば、割と容易にhoverができるようだ。<...