CSSCSSでフッターをウィンドウ下部かページ最下部に表示する CSSでフッターをウィンドウ下部に表示する。(ページの高さが1ページない時も下に張り付いたままにする。高さが1ページ以上あるときはページの一番下に配置する。) 方針 ページのスクロール中は表示させない。基本的にはページの最下部に表示させる。...2023.03.17CSS
CSSReact+CSS 要素の位置を選択して切り替える reactで要素の位置を選択して切り替える。 ReactとCSSでおこなった。 reactで要素の位置を9個の選択肢から選んで変更できるようにする。選択肢は8方向と中央。 選択肢の提示方法はCSSで調整した。グリッドレイアウトを使用。 要素...2021.09.08CSS
CSS入れ子のul/olのmargin-bottomを調整した このブログのolとulのCSSを調整した。 更新履歴 2022/12: 再現性を確保したコードに修正。より良い手段を記載。 環境 2022/12追記: wordpressかどうかはあまり重要ではないけど一応載せておく。2バージョンで確認。 ...2021.07.23CSS
CSSCSS フレックスボックス利用のメモ display: flexの個人的整理 使うたびに色々なサイトを巡ってしまうのもアレなので、自分のページのサイト内検索で済むようにしたくてここに整理しておく。 詳細はMDNのフレックスボックスのガイドページを見るべき。 ここ:CSS フレッ...2021.02.24CSS
CSS3通りのmarquee 幅が足りない時は文字をスクロールさせる。(マーキー) 電光掲示板のようなスクロール。局所的には使える。 試した方法3つ marqueeタグ(廃止)を利用 CSSのanimationを利用 Javascriptで実装 特に凝った動きをしな...2020.09.06CSS
CSSCSS position: absolute;の要素の中央寄せの2種の方法 position: absolute;な要素の中央寄せのメモ 2021/01追記: 各見出しを修正 translateを使う 調べてみると、transform: translate(-50%);を使ったものが多い。 #parent { ...2020.06.17CSS
CSSCSS text-shadowメモ CSSのtext-shadowメモ 仕様(簡単に) text-shadow: offset_x | offset_y | blur | color; offset_x 左右方向の影の位置。0だとテキストと重なる。このときでも、blurが大...2020.02.21CSS
CSSCSSのdisplay: flex;で動的な幅変化に対応する CSSのメモ。display: flex;で動的な横並べを行う。 実現したい動作 要素Aの隣にある程度の幅が空いていれば、隣に要素Bを表示したい。要素Aは固定幅を持ち、要素Bは最小幅を持ち、幅の空きに応じて横に広がる。 幅に余裕のないときは...2019.12.25CSS
CSSCSS 内部要素のスクロールだけ可能にする スクロールを禁止するが内部の大きい要素のなかをスクロール可能にする。 body { overflow: hidden; } div.long-content { height: -webkit-fill-availabl...2019.07.09CSS
CSSBootstrap4 要素の左右センタリング bootstrap4での要素の左右センタリングを行う bootstrap3で使っていた、.center-blockが使えない。 調べると、 html - Bootstrap 4 center-block unable to center...2018.11.25CSS