CSSReact+CSS 要素の位置を選択して切り替える
reactで要素の位置を選択して切り替える。 ReactとCSSでおこなった。 reactで要素の位置を9個の選択肢から選んで変更できるようにする。選択肢は8方向と中央。 選択肢の提示方法はCSSで調整した。グリッドレイアウトを使用。...
css
CSS
CSS入れ子のul/olのmargin-bottomを調整した
このブログのolとulのCSSを調整した。 環境 wordpress 5.7 現象 今までまあいいかで済ませていたが、改めて見てみると入れ子になっているulやolのリストの下部分の余白がよろしくない。 インスペクタで見てみ...
Reactcreate-react-appでのアプリにnode-sassを入れた時のエラー
create-react-appで作成したreactアプリでscssを使おうとしたら、エラーが出たときのメモ 環境 package.jsonは次の通り: "dependencies": { // .....
CSSCSS フレックスボックス利用のメモ
display: flexの個人的整理 使うたびに色々なサイトを巡ってしまうのもアレなので、自分のページのサイト内検索で済むようにしたくてここに整理しておく。 詳細はMDNのフレックスボックスのガイドページを見るべき。 ここ:CSS ...
Web3通りのmarquee
幅が足りない時は文字をスクロールさせる。（マーキー） 電光掲示板のようなスクロール。局所的には使える。 試した方法3つ marqueeタグ（廃止）を利用 CSSのanimationを利用 Javascriptで実装 特に...
CSSCSS position: absolute;の要素の中央寄せの2種の方法
position: absolute;な要素の中央寄せのメモ 2021/01追記: 各見出しを修正 translateを使う 調べてみると、transform: translate(-50%);を使ったものが多い。 #parent ...
CSSCSS text-shadowメモ
CSSのtext-shadowメモ 仕様（簡単に） text-shadow: offset_x | offset_y | blur | color; offset_x 左右方向の影の位置。0だとテキストと重なる。このときでも、b...
CSSCSSのdisplay: flex;で動的な幅変化に対応する
CSSのメモ。display: flex;で動的な横並べを行う。 実現したい動作 要素Aの隣にある程度の幅が空いていれば、隣に要素Bを表示したい。要素Aは固定幅を持ち、要素Bは最小幅を持ち、幅の空きに応じて横に広がる。 幅に余裕のない...
VueグローバルなCSSをVue CLIで使う
Vue CLIでグローバルで使えるCSSを設定する 環境 @vue/cli 4.0.4 sass-loader 8.0.0 簡潔に グローバルでというのはどの.vueファイルの<style></style...
WebWebブラウザ上でmdをhtmlに変換する簡易エディタを作った
以前、記事をMarkdownで書いてhtmlに変換してからアップするという流れを作った。しかし、bash上でコマンドによりhtmlに変換しているので、bashが操作できる環境でないと、変換作業ができない。 そして最近では、iPadで記事を...