CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方ホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームCSSCSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方CSS2015.02.24CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方CSSでブロック要素のwidthを文字の長さに合わせるやり方をご紹介します。RWDにも対応できるので何気に覚えておくと便利だなーと思いました。これにより文字の長さに合わせたbackgroundやborderを表示させることが可能になります。display:inline-blockを使う例えばこのようなHTMLを記述したとします。class="sample">サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</div>そしてCSSで背景を指定します。#ccc;}するとwidthを指定していないので普通は以下のように背景色がテキストの長さを超えて表示されます。これをテキストの長さに合わせるためにはCSSを以下のように設定します。inline-block;}「display:inline-block」を追加することで以下のように横幅をテキストの長さに合わせることができます。これを応用するとこんな感じでリストを入れたりといったことができます。文字の長いところに自動で幅を合わせてくれるので管理もしやすいです。以下は上記のHTMLとCSSになります。5px;}というわけでブロック要素を文字の長さに合わせた横幅にするやり方でした。いくつか試してみたところこれが一番シンプルで簡単でした。MenuはCSSによるコンパクトで...CSSli要素のテキストを折り返した時に頭文字の余白を揃えるやり方またどこかで使いそうな感じがしたので記録として残しておきます。SpinnersはCSSで作成された素敵なスピナーコレクショ...CSSCSSを使って画像にホバーするとキャプションを表示させるエフェクトCSSを使ったホバーエフェクトがとてもよかったのでご紹介します。Queriesのうちの一つ、@mediaを使って...CSSulのリストを横並びにしてtext-alignを適用させる方法ちょっと悩んじゃいました。ulのli要素を横並びにしてそれにtext-...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.20いつもの音楽をハイレゾ級で。ソニーの完全ワイヤレス...ソニーからハイレゾ級高音質と優れた接続性を備えた小型・軽量の完全ワイヤレスイヤホ...2020.02.19三色ボールペンの青と緑を「黒」に変えるいつも仕事で使っているジェットストリームの三色ボールペン(+シャーペン付き)。こ...2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。