css

CSS フレックスボックス利用のメモ

display: flexの個人的整理使うたびに色々なサイトを巡ってしまうのもアレなので、自分のページのサイト内検索で済むようにしたくてここに整理しておく。詳細はMDNのフレックスボックスのガイドページを見るべき。ここ:CSS ...

3通りのmarquee

幅が足りない時は文字をスクロールさせる。（マーキー）電光掲示板のようなスクロール。局所的には使える。試した方法3つ marqueeタグ（廃止）を利用 CSSのanimationを利用 Javascriptで実装特に...

CSS position: absolute;の要素の中央寄せの2種の方法

position: absolute;な要素の中央寄せのメモ 2021/01追記: 各見出しを修正 translateを使う調べてみると、transform: translate(-50%);を使ったものが多い。 #parent ...

CSS text-shadowメモ

CSSのtext-shadowメモ仕様（簡単に） text-shadow: offset_x | offset_y | blur | color; offset_x 左右方向の影の位置。0だとテキストと重なる。このときでも、b...

CSSのdisplay: flex;で動的な幅変化に対応する

CSSのメモ。display: flex;で動的な横並べを行う。実現したい動作要素Aの隣にある程度の幅が空いていれば、隣に要素Bを表示したい。要素Aは固定幅を持ち、要素Bは最小幅を持ち、幅の空きに応じて横に広がる。幅に余裕のない...

グローバルなCSSをVue CLIで使う

Vue CLIでグローバルで使えるCSSを設定する環境 @vue/cli 4.0.4 sass-loader 8.0.0 簡潔にグローバルでというのはどの.vueファイルの<style></style...

Webブラウザ上でmdをhtmlに変換する簡易エディタを作った

以前、記事をMarkdownで書いてhtmlに変換してからアップするという流れを作った。しかし、bash上でコマンドによりhtmlに変換しているので、bashが操作できる環境でないと、変換作業ができない。そして最近では、iPadで記事を...

CSS 内部要素のスクロールだけ可能にする

スクロールを禁止するが内部の大きい要素のなかをスクロール可能にする。 body { overflow: hidden; } div.long-content { height: -webkit-fill-a...

CSS bootstrapのrowspanを使ったtableで上下センタリング

bootstrapでrow spanを使った時に、上下方向にセンタリングする。 CSSでvertical-align: middle;を使っても、うまくいかなかった。 /* これだとセンタリング不可 */ table.myta...

CSSの疑似クラスが便利そう

CSSの疑似クラスというものを知りました。 jQuery hover()をPCとタッチスクリーンで分ける - ikapでJavascriptでhoverを管理していた。しかし、CSSの疑似クラスを使えば、割と容易にhoverが...

タイトルとURLをコピーしました