css

CSS

CSSでフッターをウィンドウ下部かページ最下部に表示する

CSSでフッターをウィンドウ下部に表示する。(ページの高さが1ページない時も下に張り付いたままにする。高さが1ページ以上あるときはページの一番下に配置する。) 方針 ページのスクロール中は表示させない。基本的にはページの最下部に表示させる。...
Javascript

Javascriptで目次のハイライト

サイドバーにある目次の現在項目を項目を分かりやすくするためハイライトするようにした。 更新 2021/11: 折りたたみ要素の展開などでページの高さが変わってもハイライトがずれないようにしました。 経緯 長い記事を読むとき、目次にハイライト...
Javascript

JavascriptでCSSアニメーションを埋め込む

Javascriptを使ってCSSでアニメーションさせる。 アニメーションはCSSに任せる Javascriptでは上手に書かないとアニメーションの動作が滑らかにならないので、アニメーションはCSSに任せる、という方針です。 とてもちょうど...
CSS

React+CSS 要素の位置を選択して切り替える

reactで要素の位置を選択して切り替える。 ReactとCSSでおこなった。 reactで要素の位置を9個の選択肢から選んで変更できるようにする。選択肢は8方向と中央。 選択肢の提示方法はCSSで調整した。グリッドレイアウトを使用。 要素...
CSS

入れ子のul/olのmargin-bottomを調整した

このブログのolとulのCSSを調整した。 更新履歴 2022/12: 再現性を確保したコードに修正。より良い手段を記載。 環境 2022/12追記: wordpressかどうかはあまり重要ではないけど一応載せておく。2バージョンで確認。 ...
React

create-react-appでのアプリにnode-sassを入れた時のエラー

create-react-appで作成したreactアプリでscssを使おうとしたら、エラーが出たときのメモ 2022/03追記: node-sassでなくsassモジュールを使うべき(後述追記参照) 環境 package.jsonは次の通...
CSS

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

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

3通りのmarquee

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

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

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

CSS text-shadowメモ

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