web関連 - css
-
プログラミング
【css】「counter-reset」で任意の数字から始める方法
2023/12/10プログラミングcss html scssolタグのリスト番号部分を疑似クラスを使い「counter-reset」を使って番号を表示させている時に任意の数字から始める方法 解決方法：専用のclass作成 解決方法としては、専用のclassを付与することで解決する… -
プログラミング
【CSS】改行を反映したいとき
2023/12/05プログラミングcssサーバー側で改行コードを処理してくれず、cssで改行を反映させる場合の備忘録 【解決方法】cssの「white-space: pre-wrap;」で改行を反映 cssのwhite-space: pre-wrap;を使えば… -
プログラミング
【CSS】ハンバーガーメニューを開いたときに画面下部にアドレスバー分の空白ができる件
2022/06/07プログラミングcssハンバーガーメニューを押して全画面のナビゲーションを出して、かつそのナビゲーションの後ろのサイトコンテンツをスクロールできないようにbodyに「position:fixed」かけてるとアドレスバーの高さ分の空白が画面下部… -
プログラミング
【CSS】スマホで縦書きの記述「writing-mode: vertical-rl;」が効かない
2022/05/30プログラミングcssスマホ（ios）でテーブル内のthタグを縦書き（writing-mode: vertical-rl;）しようとしたら効かなかったので備忘録 解決方法:spanタグで囲む 縦書きにしたい要素をspanタグで囲って以下の記述… -
プログラミング
【css】スマホでfilterのdrop-shadowが反映されなかった
2022/05/30プログラミングcssスマホでdrop-shadowが反映されなかった時の備忘録 解決方法 transform: translateZ(0);を使う .drop-shadow { filter: drop-shadow(14px 14px 2… -
プログラミング
【CSS】h1の隠しテキスト
2022/02/14プログラミングcssh1に設定するロゴを画像を背景で設定しないといけないときに隠しテキストと呼ばれる方法で実装した時の備忘録 h1の隠しテキストのやり方 <h1>隠しテキスト</h1> <style> h… -
プログラミング
【css】テキスト1行分の高さを求める方法
2021/10/28プログラミングcsspタグが連続する時はテキスト1行分空白を空けたいなぁって1emを指定したら「1行分？」って高さしか出ず調べた時の備忘録 テキスト1行分の求め方はline-heightに依存する pタグにline-height:1.8;と… -
プログラミング
【css】IE11でline-heightが上手く効かない時
2021/10/20プログラミングcss ieie11でline-hightを指定しているのにテキストが謎の高さを持っていた時の備忘録 display:block;を親要素に指定したら直った 以下のような構造でテキストが謎の高さを持っていた 親要素であるliにdis… -
プログラミング
【コマンドプロンプト】画像をbase64に変更する方法
2021/05/04プログラミングcss htmlsvg画像をbase64にエンコードしてHTMLやCSSとして埋め込みたかったときの備忘録 コマンドプロンプトを使ってSVG→base64にエンコード コマンドプロンプトを開いて、画像ファイルのある階層までcdコマンドで… -
プログラミング
【CSS】CSSで連番を振るcounter-incrementプロパティ
2021/04/08プログラミングcssCSSだけで要素に連番を振ることができるってことで試した時の備忘録 要素に連番を振ることができるcounter-incrementプロパティ 疑似要素::before::afterに指定をして使う <style&g…