それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由

2024/03/23 125 users 欧文 wbr 改行位置 単語 前提

inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語... 続きを読む

CSSでブロック要素の幅をコンテンツのサイズぴったりにしたい時のこれからの記述方法 | コリス

2021/08/04 191 users コリス section inline CSS div

sectionやdivやpなど、ブロック要素をボーダーで囲うと、全幅（親要素の幅）になります。そのブロック要素の中のコンテンツが少なく、ボーダーの幅をコンテンツのサイズに合わせたい場合は、どう実装していますか？ ブロック要素のままでは親要素の幅になってしまうので、通常はdisplay: inline;やdisplay: inline-block... 続きを読む

CSSだけでマウスホバー時にtableの行と列とセルを別の色でハイライトさせる | かちびと.net

2019/10/13 29 users table CSS セル overflow result

Result こういうの。項目が多いほどセルは小さくなりがちだし何のデータを見ているかユーザーは混乱しがちなので閲覧してるデータの可視性を高めよう、みたいなやつです CSSだけで実装しています css table { overflow: hidden; display: inline-block; border-collapse: collapse; } td, th { border: 1px solid #999; ... 続きを読む

CSSを使ってテキストカラーを半々に表示させる方法 | NxWorld

2017/10/02 91 users NxWorld 半々 relative CSS CodePen

CSSを使ってテキストカラーが左右または上下で異なるカラーで表示されている見栄えを実装する方法を紹介します。 ※以下でそれぞれ紹介しているCSSは必要な記述のみ抜き出した形で紹介しているので、デモと全く同じ見栄えにしたい場合はCodePenの表示を切り替えてCSSを確認してください。 また、 position: relative; と display: inline-block; の部分は使用する... 続きを読む

CSS Grid Layoutを使う前に知っておきたい、floatやflexboxなど既存の実装にどのような影響を与えるか | コリス

2017/03/29 58 users Flexbox コリス float Grid 実装

CSS Grid Layout は先日リリースされたChrome 57がサポートし、デスクトップ用のすべてのブラウザで利用できるようになりました。 floatやflexbox、vertical-alignやinline-blockなど、Webページでよく使用するレイアウトの実装に、CSS Grid Layoutがどのような影響を与えるかについて紹介します。 Grid “fallbacks” and... 続きを読む

あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | デザイン | POSTD

2016/08/05 579 users POSTD display プロパ inline Flex

CSSプロパティの1つであるdisplayはCSSレイアウトに用いるプロパティの中でも極めて重要なものです。block、inline、none、さらにtableやinline-blockは今ではかなり一般的になってきました。一方新たに登場したflexやgridはレイアウト用に作られたものです。これらについて紹介します。CSSプロパティの1つである display は、CSSレイアウトに用いるプロパ... 続きを読む

[css] floatを使わないで要素を横に並べる方法を使ったデザイン例 - NAVER まとめ

2014/10/25 335 users float CSS NAVER display 要素

ul,olのリストを横並びにするとき、floatを使う人も多いと思いますが、僕はdisplay: inline-block;を使って横並びにする方法が好きで良く使ってます。この方法は手軽で便利ですが意図しない隙間が生まれるというデメリットがあるので、その解決法も一緒にご紹介します。 続きを読む

[CSS]ふわりと浮かんだ感じの美しいシャドウを適用して画像を配置するギャラリー用のスタイルシート | コリス

2013/04/02 60 users コリス ベンダープレフィックス CSS グリッド 実装

inline-blockを使ってシンプルなグリッドで、ふわりと浮かんだ感じの美しいシャドウを適用して画像を配置するギャラリー用のスタイルシートを紹介します。 Gallery -Inline Block Grid デモ 実装 デモ デモは、最新のモダンブラウザでご覧ください。 ※CSS3はベンダープレフィックスの記述なしです。 Gallery -Inline Block Grid 実装 Step 1... 続きを読む

[CSS]レスポンシブ対応、ナビゲーションを水平の真ん中に配置するテクニックのまとめ | コリス

2013/03/07 189 users コリス display CSS ナビゲーション 真ん中

リスト要素で配置したナビゲーションをページの中央にフィットさせ、水平方向の真ん中に配置するスタイルシートのさまざまなテクニックを紹介します。 それぞれの利点や欠点、実装のポイント、対応ブラウザなど、今すぐに役立つテクニックです！ How to shrinkwrap and center elements horizontally デモ 実装: display:inline-block 実装: po... 続きを読む

ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。

2009/09/09 417 users display ishida バシャログ XHTML サンプル

こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです... 続きを読む