narumi

CSS

CSS動きシリーズ

カードの動き ボタン動き
jQ

ヘッダー追従

ヘッダー追従について色々な仕様
HTML

chatGPT

chatGPT試した件みんな話題のAI機能だが、使い勝手は本当に良いのだろうか?早速実践。日本語対応しているよう!jsの記述をしてもなんと回答が!役割を与えてあげて、キーワードの袋を作って以下の単語を、、と記載すると割とシンプルに機能してく...
jQ

PDF.js

簡単そうで案外苦労したPDF.js何が苦労したかというとフォルダの階層があっていなかったという初歩的なところ。。。何もカスタマイズなどしなければ特に難しくなく、単純にDLしたファイルに自分の表示させたいPDFの名称(パス)を張り替えれば大丈...
HTML

content”実体参照”

contentの中に実体参照を入れるのに意外と苦戦した件について。 簡単にul li のリストスタイル「・」を全角中黒点で反映していたのだが、リロードする際、ちょいちょい文字化けして現れるので、実体参照にしようと考えたもののうまくいかない?...
jQ

js ページ内スクロール

ヘッダー追従の場合アンカーリンクでスクロールしても上部が隠れてしまうという事件が。そう言った場合には、ヘッダーの高さを引いて遷移させる。かつ、諸々css指定して高さがリンクだけでうまく一致しなかった場合には、ヘッダーの高さプラス-数値を指定...
CSS

radial-gradient(円形グラデーション)

円形グラデーションを指定して、テキストに強調点をつけた際にブラウザではきちんと反映されるのに、スマホだとclorm、safariどちらも全く反応しなかった件について。 当初は以下の指定を参考にさせてもらった。綺麗に完成していたのだが、スマホ...
CSS

tableのscrollについて

overfrow-x:scroll; がどうにもこうにも効かなかったのだが、、、どうやらdivが今回は関与していたらしく、、、当初、divをつけずにp-table__wrapにoverfrowをかけ、p-table__bodyにwhite-...
CSS

擬似クラス指定

擬似クラスで特定の兄弟に別の指定をする。 以下はmarginを2、4、5番目のliに対して消したかった。子要素の(even)=偶数last-child=最後の子(5) .p-please__list:nth-child(even),:las...
CSS

メディアクエリ

メディアクエリの記述方法結構忘れがち。。。というかいつも確認させてもらっております。。。 @media screen and (min-width:480px) { ...} /* 画面サイズが480pxからはここを読み込む */ @med...