はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
※この記事ははてなブログ、別アカウント(hyiromori)から引っ越しました はじめに タイトルのような、とても大変な要件のテーブルを作って欲しいという要望があったので、その際に試行錯誤した結果を記録しておいたエントリです。 サンプル コードの解説 このコードではposition: stickyを使用することで、テーブルの行、列を固定しています。 position: sticky は top right bottom left と組み合わせて使うことで position: relative と position: absoluteを組み合わせたような動きが可能になる指定です。 Safari ではposition: -webkit-sticky;のようにベンダープレフィックスをつけないと動作しませんでした。 詳細はMDNの解説をご覧ください。 position: sticky の対応状況
【41】句読点などが行頭に来るかどうか決める line-break 最終更新日：2018年09月25日 （初回投稿日：2018年09月25日） line-breakプロパティは、改行ルール（禁則処理）の厳密さを指定するプロパティ。 「line-break（ライン ブレイク）」とは「改行」の意味です。 このプロパティは CJK（中国語、日本語、ハングル）のみが対象だそうです。 各ブラウザにはあらかじめデフォルトの改行ルールが設定されていて、自然改行した後の行頭に「句読点」「記号」などの約物が来ないようになっています。 日本語の場合は、撥音・拗音・促音（ん ゃ ゅ ょ っ など）も対象です。 自然改行とは、ボックスの端にテキストが達した時に自然に次の行に流れること。 <br>で強制改行した場合は、この改行ルールは適用されません。 この改行ルールを「ゆるい（loose）」から「厳密（strict
はじめに 今回解決したいのはこれです。 「overflow-wrapかけたのに改行されないしテーブルwidthもなんか勝手に伸ばされちゃってる問題」です。 こんなんHTML / CSSの初歩中の初歩じゃんwwwという方は、どうぞごゆるりとブラウザバックしてやってくださいませ… 「それ地味に悩んでた！」という方がもしいらっしゃいましたら、少しでも助けになれれば嬉しいです。というか一緒に悩みましょう。 あ、でも、もしそんな方が本当にいたら、こんなことに悩むよりも、 「全半角記号のブラウザテストだけ許容する」という呪文を唱えた方が5億倍早いです…というネタバレだけ先にしておきますね＞＜ もくじ 当記事は、以下の内容に関するメモ書きです。 CSSの改行処理プロパティのメリデメ 上記問題の暫定解決方法 対象のCSSプロパティは以下の通りです。 overflow-wrap: break-word; w
HTMLにおいて、フォーム要素のテキストエリア（textarea）の領域の拡大、縮小などのリサイズを禁止したり、サイズ変更に関する振る舞いを制限する方法についてです。 textarea の拡大機能について HTMLフォームのテキストエリア（textarea）要素は、デフォルトで下記のような「つまみ」が存在し、ドラッグすることで拡大することが可能になっています。 ユーザの操作によって、エリアの大きさが勝手に変わってしまい、予期せぬレイアウト乱れが発生してしまったりします。このようなリサイズを禁止し、サイズを固定するように対策します。 拡大・縮小を禁止し、サイズを固定する 下記のように、CSSのリサイズを制御するプロパティ（resize）を使って禁止し、サイズを固定することができます。 resizeプロパティを「none」に指定する事により完全に大きさを固定できます。 textarea { r
「ボタンを作ったけど文字が左上にぴったりくっついていてバランスが悪い。文字をボタン内で中央寄せしたいけどどうやるの？」 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について詳しくはこちら↓
親要素がdivなどのブロック要素の場合、何もしないと横幅がいっぱいになります。 下記は青背景が親要素、オレンジ背景が子要素です。後述する方法の比較のため兄弟要素にspanタグをいれています。 divの兄弟要素のspan <style> .example{ background: #77abd8; } .example>*{ background: #d3a142; } </style> <div class="example"> <a href="#">子要素(aタグ)</a> </div> <span>divの兄弟要素のspan</span> この親要素を子要素の幅に合わせましょう。
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
モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！ A (more) Modern CSS Reset by Andy Bell 他のリセットCSSが気になる人は、こちらも注目です。 A (more) Modern CSS Resetの前のバージョンも解説しています。 2023年、現在の環境に適したリセットCSSのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モダンブラウザに適切なデフォルトのリセットCSS 各リセットCSSの解説
したいよね？ 事の経緯としては、 とある新規プロジェクトで、技術選定をすることに 開発の土台はViteで、フレームワークはJSXが使えるやつに決まった さてCSSはどうやって書こうかとなる あれこれ考えて、とある方法に決めた というのをまとめた、まあポエムの域を出ないメモです。 CSS ModulesやらTailwindやらCSS-in-JSやら手法はいろいろあれど、どれが今の推しかっていう。 求めるもの 個人的に、CSSつまりはブラウザで表示されるUIをスタイリングするためのツールセットに求めるもの。 0ランタイムである 最終的に`.css`ファイルとしてブラウザで読み込まれる なんでもJSにしない CSSの書き味を損なわない だいたいのCSSセレクタが問題・制約なく動作する マークアップ部と1ファイルにコロケーションできる HTMLとCSSは同居させたい 非同期にロードできる JSと同
span 要素は「インライン要素」なので、 本来は 「width」プロパティで横幅を指定することはできません。 ですがspan 要素に対して「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 4.01では定義されていません。 境界線の消え方の違い frameborder属性で境界線を消した場合は、ブラウザにより次のような違いが出てしまいます。 IE … 2ピクセル程度の隙間が空いてしまいます Firefox … 境界線は完全に消えます IEでも完全に消したい場合（隙間をなくしたい場合）は、border属性を使用します。
この記事はCSS Advent Calendar 2022の9日目の分です。 CSSのボックスモデルにおいては、ボーダーの内辺とパディングの外辺の間にスクロールバーが配置されます。最近はどのOSでもオーバーレイスクロールバー（スクロールバーが内容の前面に覆いかぶさるようなもの）が主流となり、スクロールバーが存在してもしなくても内容の幅が変わらないようになっています。一方、クラシックスクロールバー（スクロールバーが常に表示されるようなもの）が使われる環境では、overflow: autoな要素において内容がはみ出すときとはみ出さないときで内容の幅が変わってきます。 クラシックスクロールバーが使われる環境でも内容の幅を一定に保ちたいという場合は、scrollbar-gutterプロパティを使います。scrollbar-gutter: stableを指定すれば、スクロールバーが表示されないときで
Chrome 106, Safari 16でサポートされたコンテナクエリは、親要素（コンテナ）のサイズに応じて子要素のスタイルを設定できる新機能です。しかし、これは機能の一部です。親要素のスタイルに応じて子要素のスタイルを設定できるスタイルクエリを紹介します。 たとえば、下記は右のカードの親要素に特定のスタイルが設定されており、それに応じて子要素のスタイルが適用されています。 Container Queries: Style Queries by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コンテナクエリとスタイルクエリの違い スタイルクエリの基礎知識 スタイルクエリの使い方 スタイルクエリのブラウザサポート スタイルクエリのリソース はじめに CSSのコンテナクエリは「コンテナのサイズ」だけではない
CSSで画像をハーフトーン（網点）に加工する画像の中の色や明るさの濃淡を、様々な大きさのドットで表現するハーフトーン。日本語では網点とも言うようです。どこかレトロで、アメコミタッチなこのハーフトーンを、CSSで表現してみます！ グラフィックツールを使わず、CSS だけでひとつの画像をこんな感じに加工してみます。 1. 画像を div に入れておくまずは下準備。「halftone」というクラス名をつけた div に画像を入れておきます。今回は猫ちゃんの画像を用意しました。 HTML <div class="halftone"> <img src="cat.jpg" alt="" /> </div> 2. CSS で水玉模様を作成「halftone」クラスに ::after で疑似要素を作成。 position を使って猫ちゃん画像の上に重ねます。水玉模様は円形グラデーションで作成します。この
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
