タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
sectionやdivやpなど、ブロック要素をボーダーで囲うと、全幅（親要素の幅）になります。そのブロック要素の中のコンテンツが少なく、ボーダーの幅をコンテンツのサイズに合わせたい場合は、どう実装していますか？ ブロック要素のままでは親要素の幅になってしまうので、通常はdisplay: inline;やdisplay: inline-block;を加えると思います。 しかし、ブロック要素のwidthにfit-content値を使用すると、ブロック要素のまま（displayの値を変更せずに）コンテンツのサイズに合わせることができます。 「古い方法」「より良い方法」としたのは、上記画像の直訳です。古いからダメということではなく、より良い方法が使えるようになり、ケースバイケースで使用するのがお勧めです。 古い方法
なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用 https://zenn.dev/coedo/articles/html-css-inline-element-block-level-element この記事では、『なぜインライン要素・ブロック要素概念は依然として有用なのか』という記事（以下「元記事」といいます）の説明について見ていきます。 この記事の対象者 この記事は、ウェブ制作を学んでいる人や、「インライン要素」「ブロック要素」という用語の扱いに困っている人を想定しています。 はじめに： 結論 この記事の結論は次の2つです。 今日のHTMLから「インライン要素」「ブロックレベル要素」という表記はなくなった。 ある要素にどのような要素を入れるのかは、「インライン要素」「ブロック要素」という考え方を使わなくてもできる。 詳しく説明したいと思います。
Chrome 123で、divなどのブロック要素で垂直方向の中央にalign-contentプロパティで配置できるようになります
間もなくリリースされるChrome 123（リリース情報）で、ブロックやテーブルレイアウトでのalign-contentプロパティがサポートされます。 これにより、div要素内に簡単に垂直方向の中央に配置できるのは嬉しいニュースです。しかし、既存サイトでalign-contentプロパティをflexやgridコンテナ以外に使用している場合、Chrome 122までは何もしませんでしたが、Chrome 123以降は適用されて異なるレイアウトになってしまう可能性があります。 これは同様に間もなくリリースされるSafari 17.4にも適用されます。 Support for align-content in block and table layouts by Rachel Andrew 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、
当記事では「HTML Standardからインライン要素・ブロック要素の記述が削除されたことを受けても、それらの概念が消えたわけではない」という主張を展開しています。 そして、記事内ではMDN Web Docs にその表記があることを根拠のひとつとしています。 『MDNの記述が変更されたことの意味（inline-level element, block-level element）』に記したとおり、すでにMDNの記述は変更されています。 この記事の趣旨はそれによって変わることはありませんが、MDN から記述が消えていることにつきましては充分にご留意頂ますようお願い致します。 詳しくは記事をご確認くださいませ。 https://zenn.dev/coedo/articles/updated-mdn-contents Web制作に関するディスカッションの中で、HTML Standard の内容
【display】インラインブロック要素の性質と使い方
前回の記事では、ブロックレベル要素とインライン要素の性質と違いについて解説しました。2つの要素の性質を学んだ上で、「ブロックレベル要素を横に並べるにはどうしたらいいか」「インライン要素の横幅と高さを指定するにはどうしたらいいか」と疑問に思った方もいらっしゃると思います。今回の記事は、そんな悩みを解決できるインラインブロック要素とCSSのdisplayプロパティについて、図を用いて解説します。
見出しや段落などで外枠線をつけたい場合に、内容（中身）に合わせた横幅に指定できる「width: fit-content」と「display: inline-block」の２つの設定方法について紹介。 目次 1）ブロック要素の横幅を子要素に合わせるCSS width:fit-contentの設定 display: inline-blockの設定 1）ブロック要素の横幅を子要素に合わせるCSS 見出し「hタグ」や段落「pタグ」、『div」、「section」などで外枠線をつけたい場合に、通常はブラウザ画面や親要素に合わた横幅に広がってしまいます。 横幅のテスト（通常） width:fit-contentの設定 これを中身（子要素）に合わせた横幅に設定したい…。 設定は簡単、CSSに「width: fit-content」を設定するだけで、中身（子要素）に合わせた横幅になり、外枠線がフィットして
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSでブロック要素の幅をコンテンツのサイズぴったりにしたい時のこれからの記述方法
『なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用』という記事について
なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用
ブロック要素の横幅を内容・中身に合わせる2つの方法CSS
t.livepocket.jp
teikenshin.base.shop
news.railway-pressnet.com
infopicks.net
dc.watch.impress.co.jp
news.railway-pressnet.com