nDiki : CSS

CSS

Cascading Style Sheets、カスケーディングスタイルシート

スタイルシートを書くため言語。CSS 仕様においてスタイルシートは「文書の表現を指定するルールのセット」を指す。

記事

編集

Firefox 拡張 Web Developer が便利

Web

height について

関連情報

2019年10月30日 (水)

HTML・CSS についての勉強会【日記】

今年2回目の部内での HTML・CSS についての勉強会が今日あった。 複数人・複数チームでで開発保守する大規模サイトにおける共通部品化のデメリットの話など、なるほどと。

[ permalink ]
[ 10月30日全て ]

2021年1月20日 (水)

今日のさえずり: Zettlr 2日目。カスタム CSS を設定して見出しが大きすぎるの直したら使いやすくなった。

  • 21:47 Zettlr 2日目。ちょっと分かってきて楽しい。カスタム CSS を設定して見出しが大きすぎるの直したら使いやすくなった。
[ permalink ]
[ 1月20日全て ]

2021年2月22日 (月)

Obsidian Publish サイトでノート埋め込み部分のスタイルシート変更失敗

Obsidian はノートに別のノートの全体や一部を埋め込む機能があるのだけれど、埋め込むコンテンツの量が多いと全部は表示されず縦スクロールバーが出てしまう。

max-height が指定してあったので Obsidian アプリケーション用の CSS スニペットや Obsidian Publish サイト用の publish.css で max-height 設定を上書きするようにしてみた。

アプリケーションの方はうまくいったのだけれど Obsidian Publish サイトの方は何か変 (リロードすると表示されなくなったりする)。やはり埋め込みは使わないのがいいかなあ。

[ permalink ]
[ 2月22日全て ]

2021年9月19日 (日)

Obsidian の CSS スニペットから publish.css を生成する

Obsidian の表示のカスタマイズ用に複数の CSS スニペットを用意して個別に有効・無効を切り替えられるのに今頃気が付いた。

「プレビュー画面用のスタイルシートと編集画面用のスタイルシート」「Obsidian 標準の構造用のスタイルシートと独自の構造・クラス用のスタイルシート」など分けたらずいぶん見通しが良くなった。

今までアプリ用のスタイルシートと Obsidian Publish サイト用のスタイルシート (publish.css) の2重管理が手間だった。「アプリだけ用のスタイルシート」「Obsidian Publish だけ用のスタイルシート」という切り口でもファイルを分けておき、 必要な CSS ファイルだけを make でマージして publish.css を生成するようにしたら解決できた。なるほどー。

[ permalink ]
[ 9月19日全て ]

2022年1月26日 (水)

今日のさえずり: 70:20:10 モデルのソース調査

[ permalink ]
[ 1月26日全て ]

2022年3月6日 (日)

今日のさえずり: 鈴カステラいまいずこ

[ permalink ]
[ 3月6日全て ]

2022年8月30日 (火)

今日のさえずり: 唐突にTweetDeckプレビューがやってきた

[ permalink ]
[ 8月30日全て ]

2022年9月27日 (火)

自分の Tweets のいいね数・Retweets 数はやっぱり表示する

7月から Twitter のいいね数・Retweets 数を非表示にしてみている。他人の Tweets のいいね数・Retweets 数が分からないのなかなか良い。

一方で自分の Tweets のいいね数・Retweets 数はやはり知りたくて仕方ない。トライブの報酬が欲しいの。

TweetDeck については Better TweetDeck のカスタムCSSを修正して自分の Tweets のいいね数・Retweets 数は表示するようにした。 

 .stream-item:not([data-tweet-user-id='自分の ID (数字列)']) .like-count {
     display: none;
 }
 
 .stream-item:not([data-tweet-user-id='自分の ID (数字列)']) .retweet-count {
     display: none;
 }
 
 .stream-item:not([data-tweet-user-id='自分の ID (数字列)']) .reply-count {
     display: none;
 }
[ permalink ]
[ 9月27日全て ]

2023年1月14日 (土)

Google AdSense の自動広告をオフにする

Google Search Console で表示されるページ エクスペリエンスが去年秋から急激に悪くなってきた。

PC は10月27日に 良好 URL 99.2% だったのが翌日から落ち始め、1月13日には 0.2% に。モバイルは 11月4日に 良好 URL 97.9% だったのが12月25日に 0.5% まで落ち、1月13日時点では 10.7% となっている。どちらも CLS の問題が指摘されていた。

「data-ad-status パラメータを使用して、広告未配信の広告ユニットを非表示にする」ようにしていた CSS コードを1月8日の夜にコメントアウトしたが、CLS が改善される様子がないので自動広告をオフにすることにした。

[ permalink ]
[ 1月14日全て ]

2023年2月23日 (木)

Scrapbox と Obsidian Publish のスタイルシートを書く

Scrapbox のグリッド形式ページリストでもう少し文字を詰め込みたいなと思って padding を午前中に調整した。

それから午前中に Obsidian Publish のデザイン変更がリリースされたので、午後はそのスタイルシートとスクリプトのアップデート対応をした。

ライトモード前提だった色のカスタマイズは .theme-light 時にだけ反映するようにし、 Light/dark toggle も有効にしてみた。合わせて Obsidian Desktop や Obsidian Mobile で使われている CSS snippets も整理してすっきり。

英語圏のツールは見出しの文字と余白が大きく感じることが多い。 Obsidian でも見出しが小さくなるようアレンジしている。文字が大きいと画面を覗かれた時にぱっと読み取られちゃいそうで気になるというのもあるしね。

[ permalink ]

今日のさえずり: CSS とスタイルシートを使い分けずに生きてきたことを反省した

[ permalink ]
[ 2月23日全て ]
Naney の Web 日記 nDiki について・月別インデックス

About

Naney Naneymx

Naney (なにい) です。株式会社MIXIで SNS 事業の部長をしています。

※本サイトの内容は個人的見解であり所属組織とは関係ありません。

Process Time: 0.025364s / load averages: 0.49, 0.49, 0.44