CSSだけでテーブルの縦横２列を固定してスクロールできるようにする
※この記事ははてなブログ、別アカウント(hyiromori)から引っ越しました はじめに タイトルのような、とても大変な要件のテーブルを作って欲しいという要望があったので、その際に試行錯誤した結果を記録しておいたエントリです。 サンプル コードの解説 このコードではposition: stickyを使用することで、テーブルの行、列を固定しています。 position: sticky は top right bottom left と組み合わせて使うことで position: relative と position: absoluteを組み合わせたような動きが可能になる指定です。 Safari ではposition: -webkit-sticky;のようにベンダープレフィックスをつけないと動作しませんでした。 詳細はMDNの解説をご覧ください。 position: sticky の対応状況
word-break - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
【41】句読点などが行頭に来るかどうか決める line-break
【41】句読点などが行頭に来るかどうか決める line-break 最終更新日：2018年09月25日 （初回投稿日：2018年09月25日） line-breakプロパティは、改行ルール（禁則処理）の厳密さを指定するプロパティ。 「line-break（ライン ブレイク）」とは「改行」の意味です。 このプロパティは CJK（中国語、日本語、ハングル）のみが対象だそうです。 各ブラウザにはあらかじめデフォルトの改行ルールが設定されていて、自然改行した後の行頭に「句読点」「記号」などの約物が来ないようになっています。 日本語の場合は、撥音・拗音・促音（ん ゃ ゅ ょ っ など）も対象です。 自然改行とは、ボックスの端にテキストが達した時に自然に次の行に流れること。 <br>で強制改行した場合は、この改行ルールは適用されません。 この改行ルールを「ゆるい（loose）」から「厳密（strict
overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していない - Qiita
overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していないHTMLCSS初心者 はじめに 今回解決したいのはこれです。 「overflow-wrapかけたのに改行されないしテーブルwidthもなんか勝手に伸ばされちゃってる問題」です。 こんなんHTML / CSSの初歩中の初歩じゃんwwwという方は、どうぞごゆるりとブラウザバックしてやってくださいませ… 「それ地味に悩んでた！」という方がもしいらっしゃいましたら、少しでも助けになれれば嬉しいです。というか一緒に悩みましょう。 あ、でも、もしそんな方が本当にいたら、こんなことに悩むよりも、 「全半角記号のブラウザテストだけ許容する」という呪文を唱えた方が5億倍早いです…というネタバレだけ先にしておきますね＞＜ もくじ 当記事は、以下の内容に関する
HTML：textareaの拡大/縮小を禁止し、サイズを固定する方法 | WWWクリエイターズ
HTMLにおいて、フォーム要素のテキストエリア（textarea）の領域の拡大、縮小などのリサイズを禁止したり、サイズ変更に関する振る舞いを制限する方法についてです。 textarea の拡大機能について HTMLフォームのテキストエリア（textarea）要素は、デフォルトで下記のような「つまみ」が存在し、ドラッグすることで拡大することが可能になっています。 ユーザの操作によって、エリアの大きさが勝手に変わってしまい、予期せぬレイアウト乱れが発生してしまったりします。このようなリサイズを禁止し、サイズを固定するように対策します。 拡大・縮小を禁止し、サイズを固定する 下記のように、CSSのリサイズを制御するプロパティ（resize）を使って禁止し、サイズを固定することができます。 resizeプロパティを「none」に指定する事により完全に大きさを固定できます。 textarea { r
CSSでボタン内の文字を中央寄せにする方法
「ボタンを作ったけど文字が左上にぴったりくっついていてバランスが悪い。文字をボタン内で中央寄せしたいけどどうやるの？」 CSSでボタン内の文字を左右中央、上下中央寄せにする方法を解説します。 左右中央寄せ 【widthなし】padding <style> .example{ /*コレ*/padding: 10px 30px; background: #e3f2fd; border: 1px solid #333; } </style> <input class="example" type="button" value="ボタン"> paddingは内側の余白を調整するCSSです。 paddingで上下、左右それぞれの数値を同じにすると実質縦も横も中央寄せにできます。 paddingについて詳しくはこちら↓
【html/CSS】幅(width)を子要素に合わせる方法
親要素がdivなどのブロック要素の場合、何もしないと横幅がいっぱいになります。 下記は青背景が親要素、オレンジ背景が子要素です。後述する方法の比較のため兄弟要素にspanタグをいれています。 divの兄弟要素のspan <style> .example{ background: #77abd8; } .example>*{ background: #d3a142; } </style> <div class="example"> <a href="#">子要素(aタグ)</a> </div> <span>divの兄弟要素のspan</span> この親要素を子要素の幅に合わせましょう。
Your code displays Japanese wrong
A static site to link people to when their code is displaying Japanese wrong. View the Project on GitHub heistak/your-code-displays-japanese-wrong Why am I here? If someone gave you a link to this page, that person probably thinks your code displays Japanese wrong. In short, from a native Japanese eye, yѳur ҭєxҭ lѳѳκs κιnd ѳf lικє ҭЋιs. This page will give you a brief description of the glyph appe
古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset
モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！ A (more) Modern CSS Reset by Andy Bell 他のリセットCSSが気になる人は、こちらも注目です。 A (more) Modern CSS Resetの前のバージョンも解説しています。 2023年、現在の環境に適したリセットCSSのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モダンブラウザに適切なデフォルトのリセットCSS 各リセットCSSの解説
朱色／バーミリオン／#ed514e十六進の色コード
十六進の色コードで朱色／バーミリオン色#ed514e赤色の明るさの中間の色合いです。光の三原色RGBにおいて色モデル#ed514eは92.94％の赤色、31.76％の绿色、30.59％の青色でできている。HSLで色彩空間#ed514eは1°度の色調、82％の彩度、62％の明るさを有している。この色は約609.9nmの波長である。 色のバリエーション反転 #12aeb125％飽和度 #ff3e3a濃淡階調 #9e9e9e25％明るく #eba09fオリジナル #ed514e25％暗く #d02f2cウェブセーフ： red #ff0000 / #f0025％不飽和度 #dd605eHTML: indianred #cd5c5c名前付き色密接関係レッド #ea5550ゼラニウムレッド #e45653トマトレッド #ea5549しゅいろJIS／しんしゅ／ほんしゅ #ef454a紅緋（べにひ） #e
2023年のCSSは0ランタイムにしたい - console.lealog();
したいよね？ 事の経緯としては、 とある新規プロジェクトで、技術選定をすることに 開発の土台はViteで、フレームワークはJSXが使えるやつに決まった さてCSSはどうやって書こうかとなる あれこれ考えて、とある方法に決めた というのをまとめた、まあポエムの域を出ないメモです。 CSS ModulesやらTailwindやらCSS-in-JSやら手法はいろいろあれど、どれが今の推しかっていう。 求めるもの 個人的に、CSSつまりはブラウザで表示されるUIをスタイリングするためのツールセットに求めるもの。 0ランタイムである 最終的に`.css`ファイルとしてブラウザで読み込まれる なんでもJSにしない CSSの書き味を損なわない だいたいのCSSセレクタが問題・制約なく動作する マークアップ部と1ファイルにコロケーションできる HTMLとCSSは同居させたい 非同期にロードできる JSと同
span要素にwidth（横幅）を指定する方法
span 要素は「インライン要素」なので、 本来は 「width」プロパティで横幅を指定することはできません。 ですが「display:inline-block;」 を指定することでインラインレベルのブロック要素となり、 width（横幅）や height（高さ）を指定することができます。 width、height を指定するサンプルコード 次のように「display:inline-block;」を指定することで、 width や height プロパティを指定できるようになります。 span { display: inline-block; width: 100px; height: 20px; } 「display:inline-block;」とは？ 「display」プロパティは、要素の表示形式を指定するプロパティです。 値として「inline-block」を指定することで、 指定さ
HTMLタグ/フレームタグ/フレームの境界線を消す（frameset） - TAG index
上記の属性は、HTML 4.01では定義されていません。 境界線の消え方の違い frameborder属性で境界線を消した場合は、ブラウザにより次のような違いが出てしまいます。 IE … 2ピクセル程度の隙間が空いてしまいます Firefox … 境界線は完全に消えます IEでも完全に消したい場合（隙間をなくしたい場合）は、border属性を使用します。
CSSでスクロールバーの有無によるがたつきをなくす: Days on the Moon
この記事はCSS Advent Calendar 2022の9日目の分です。 CSSのボックスモデルにおいては、ボーダーの内辺とパディングの外辺の間にスクロールバーが配置されます。最近はどのOSでもオーバーレイスクロールバー（スクロールバーが内容の前面に覆いかぶさるようなもの）が主流となり、スクロールバーが存在してもしなくても内容の幅が変わらないようになっています。一方、クラシックスクロールバー（スクロールバーが常に表示されるようなもの）が使われる環境では、overflow: autoな要素において内容がはみ出すときとはみ出さないときで内容の幅が変わってきます。 クラシックスクロールバーが使われる環境でも内容の幅を一定に保ちたいという場合は、scrollbar-gutterプロパティを使います。scrollbar-gutter: stableを指定すれば、スクロールバーが表示されないときで
CSSのスタイルクエリの基礎知識と使い方を解説、親要素の「スタイル」に応じて子要素のスタイルを適用
Chrome 106, Safari 16でサポートされたコンテナクエリは、親要素（コンテナ）のサイズに応じて子要素のスタイルを設定できる新機能です。しかし、これは機能の一部です。親要素のスタイルに応じて子要素のスタイルを設定できるスタイルクエリを紹介します。 たとえば、下記は右のカードの親要素に特定のスタイルが設定されており、それに応じて子要素のスタイルが適用されています。 Container Queries: Style Queries by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コンテナクエリとスタイルクエリの違い スタイルクエリの基礎知識 スタイルクエリの使い方 スタイルクエリのブラウザサポート スタイルクエリのリソース はじめに CSSのコンテナクエリは「コンテナのサイズ」だけではない
CSSで画像をハーフトーン（網点）に加工する
2022年10月19日 CSS 画像の中の色や明るさの濃淡を、様々な大きさのドットで表現するハーフトーン。日本語では網点とも言うようです。どこかレトロで、アメコミタッチなこのハーフトーンを、CSSで表現してみます！ ↑私が10年以上利用している会計ソフト！ グラフィックツールを使わず、CSSだけでひとつの画像をこんな感じに加工してみます。 1. 画像をdivに入れておく まずは下準備。「halftone」というクラス名をつけた div に画像を入れておきます。今回は猫ちゃんの画像を用意しました。 HTML <div class="halftone"> <img src="cat.jpg" alt=""> </div> 2. CSSで水玉模様を作成 「halftone」クラスに ::after で疑似要素を作成。 position を使って猫ちゃん画像の上に重ねます。水玉模様は円形グラデーシ
スタイルシート［CSS］/テキスト・フォント/要素の前後に内容を追加する - TAG index
:before と :after について :before … 要素の直前に対する指定 :after … 要素の直後に対する指定 :before と :after に関する詳細は、疑似要素の指定をご覧ください。 追加する内容 ここでは3種類の値を説明しています。（この他に、引用符を挿入することもできます） 文字列を追加する 文字列を追加する場合は、追加したい文字列を次のような形式で指定します。（文字列を引用符で囲みます） content: "追加するテキスト"; 例えば、p要素の直前に文字列を追加したい場合は、次のような指定内容になります。 p:before { content: "追加するテキスト"; } 文字列の中に引用符を入れたい場合は、次のようにバックスラッシュ（ \ ）でエスケープしておきます。 content: "追加する\"テキスト"; 画像等を追加する 画像等を追加する場合
【初心者向け】リセットCSS/ノーマライズCSSの使い方と違い
「ページ最上部に〇〇を入れたいのに、ブラウザの最上部や左右に隙間ができてしまう」という質問を、時々いただきます。ファーストビューの作成などで、多くの方が体験する“コーディング初心者あるある”ではないでしょうか。 実は、ブラウザとの間にできる隙間はブラウザ標準のCSSによるもの。 作り込まれたデザインをコーディングするには、このブラウザ標準スタイルが邪魔になることも結構あります。 また、ブラウザAでは綺麗だけどBだと変……ということも。。 こうした時に、リセットCSSというCSSファイルが活用されています。 リセットCSSの特徴や種類について見ていきましょう。 リセットCSSとは リセットCSS類は自作する？ リセットCSSの種類と特徴 A:リセットCSS B:ノーマライズCSS C:サニタイズCSS まとめ リセットCSSとは リセットCSSは「CSSをリセットするCSS」。 何のCSSを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
［html］親要素からはみ出すtextareaを簡単に修正
常に画面最下部に要素を固定するCSS - Tomcky's blog
