以下のようにテキストを左寄せではなく、均等に割り当てを行いたい このときtext-align: justifyを利用すればできると思っていたができなかったので調査した https://www.w3.org/TR/css-text-3/#text-align-property 仕様をみるとtext-align-lastで特に指定…

テーブルをCSSを使って角丸にしようとborder-radiusをつけたが丸くならなかった 原因を調べたところborder-collapse: collapse;のCSSがtableタグにあたっているとborder-radiusが効かないみたい CSS Backgrounds and Borders Module Level 3より border-coll…

以前、色をアルファチャンネルで指定したくない理由を探したことがあり、その過程でa:visited のセキュリティ対策について触れた uga-box.hatenablog.com この対策について、過去の話だが具体的にどういう攻撃の可能性があったのか知る機会があったので自分…

Webページ内の背景色などに、特定のカラーコードを用意するのではなく、カラーコードで指定した色を少し透過（アルファチャンネル）をつけて表現しているデザインをみることがあった 例えば、黒rgb(255, 255, 255)にアルファチャンネルを指定してグレーrgba(…

Safari 14.1からFlexboxでgapが使えるようになったらしい developer.mozilla.org .flexbox { display: flex; gap: 16px; } いままでmarginやpaddingを駆使していたので、すごくシンプルになった

CLSの対策としてimgタグにwidthとheightを指定したがレスポンシブデザインでブラウザ幅にあわせて画像サイズもかえると縦横比がおかしくなってしまう 調べると以下のスタイルで解決できた object-fit: contain; developer.mozilla.org object-fitは画像をボ…

ウェブページのキービジュアルに文字を載せていたが、文字の視認性が悪い なので文字に影をつける対策を考える このときCSSのText Shadowsを使ってみることにした https://drafts.csswg.org/css-text-decor-3/#text-shadow-property 完成イメージ 使い方（例…

何度も調べているのでメモ IE、Edge https://developer.mozilla.org/en-US/docs/Archive/Web/CSS/-ms-overflow-style .container { overflow: scroll; -ms-overflow-style: none; } Chrome、Safari https://developer.mozilla.org/en-US/docs/Web/CSS/::-web…

ある改行を含む文章をpタグなどで囲って表示すると間にスペースがはいる <p> Windows でコン ピュータの世界 が広がります。 </p> ↓ Windows でコン ピュータの世界 が広がります。 変なところで改行しているデータの方がおかしいのはそれとして、この空白を置換な…

こういうリンクっぽいセレクトボックスを実装したいのだが、 セレクトボックスの全体の幅は選択肢中の最長文字列に合わせてしまうので、最短文字列の場合に文字列とアイコンの間に余白ができてしまう これだと不格好なので修正したい テキストを右揃えにする…

あるページのコンテンツが少ない場合はフッターをウィンドウ下部に固定し、コンテンツがウィンドウサイズを超える場合はフッターをコンテンツの下におくというレイアウトをCSS3のflexboxを使って行っていた 実装は以下のような感じ body{ display: flex; min…

overflow: scroll で横スクロースさせて読ませるコンテンツがiOS Safariだとカクカクする これをスムーズにする（慣性スクロールにする）やり方を毎回調べては忘れてしまうので記載しておく overflow: scroll; -webkit-overflow-scrolling: touch; developer…