カメリアの記事

意味があることやないことを綴ります

CSS

CSS の全ての値をブラウザ既定値に戻す revert.css

CSS

ブログの中で素の CSS で表示したいのにブログのテーマになっている CSS が効いて装飾されてしまうことがあります。そんなときにこの revert.css を当てれば初期化された上で自由に自作 CSS の表示を公開することができます。 どうしてブラウザ既定値なのか…

CSS でテーブルの線をどう引くか、僕の解法(角丸にも対応)

CSS

CSS でテーブルの線を引くのは簡単です。下のようにすれば問題なく引けます。 table { border-collapse: collapse; } td, th { padding: 10px; border: 1px solid #000; } でも角を丸くしようとしてもできません。論理的にこれだ!という引き方になっていな…

Normalze.css には CDN があるじゃないか

CSS

タイトルのとおりなんですが、これまで僕は Normalize.css をダウンロードしてコピペして使っていました。最近になって CDN に目覚めた僕はふと思い立って Normalize.css のページに行ってみたんですね。 サイトが GitHub にホストされているじゃないですか…

Notion の文書を両端揃えにする

CSS

自分にとって両端揃えに見えるだけで、チームの他の人には関係ないのですが。ちょっと気持ちよくなれるかな、という話です。 ユーザ CSS を使う ブラウザの拡張機能でユーザ CSS をググるといろいろと出てきます。僕は Chrome で「 User JavaScript and CSS …

flex で要素を画面中央に表示する方法

CSS

下のように記述します。 <style> body, html { height: 100%; } body { display: flex; justyfi-content: center; align-items: center; } </style> <div id="center-box">...</div> Chrome では body, html {height: 100%} の記述が不要です。

はてなブログで画像に文字を回り込ませる方法

ブログ記事に小さな画像を配置して文字を回り込ませたら素敵ですね。スマホ全盛の昨今にあって「小さな画像」という概念が生き残っているのか分かりませんが。しかしまぁブログなんて書いてる古の民は PC 前提かもしれません。そう考えるとやはり小さな画像…