[<a href="https://b.hatena.ne.jp/entry.parts?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fcss-stretch-keyword.html">フレーム</a>]

プレビュー

[フレーム]

はてなブックマークボタンを作成して埋め込むこともできます

規約違反を報告

アプリのスクリーンショット

いまの話題をアプリでチェック!

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

usersに達しました!

さんが1番目にブックマークした記事「CSSのwidth: 100%;...」が注目されています。

気持ちをシェアしよう

ツイートする

CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です

幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(... 幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能なスペースいっぱいに表示され、マージンの計算も必要なくなります。 The stretch keyword: a better alternative to width: 100% in CSS? by Ollie Williams 下記は各ポイントを意訳したものです。 ※(注記)当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに width: 100%;が便利な例 width: stretch;の使い方 stretchのサポートブラウザ

ブックマークしたユーザー

y-teraoka2025年08月14日 y-teraoka
heatman2024年12月22日 heatman
malmac2024年11月29日 malmac
akira_maru2024年11月29日 akira_maru
ysirman2024年11月25日 ysirman
stntaku2024年11月25日 stntaku
akishin9992024年11月23日 akishin999
gayou2024年11月23日 gayou
o_hiroyuki2024年11月22日 o_hiroyuki
inoyy2024年11月22日 inoyy
Lhankor_Mhy2024年11月22日 Lhankor_Mhy
tomo-kn2024年11月22日 tomo-kn
sbtqe2024年11月22日 sbtqe
heguro2024年11月22日 heguro
kimizuka2024年11月22日 kimizuka
iWonder2024年11月22日 iWonder
poad10102024年11月22日 poad1010
shunutsu2-2-242024年11月22日 shunutsu2-2-24

気に入った記事をブックマーク

エントリーの編集

タイトルガイドライン

ブックマークしました

おすすめタグタグについて

よく使うタグすべて表示

CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です

おすすめタグタグについて

よく使うタグすべて表示

はてなブックマークで関心をシェアしよう

記事へのコメント25件

リンクを埋め込む

プレビュー

関連記事

usersに達しました!

CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です

ブックマークしたユーザー

ブックマークしたすべてのユーザー

同時期にブックマークされた記事

公式Twitter

はてなのサービス

よく使うタグ

よく使うタグ

はてなブックマークで
関心をシェアしよう