箱のプログラミング日記。

渋谷の自社開発企業でRails書いてます。

テーブルの長文を折り返し表示したい【Bootstrap】

テーブルの中身を折り返し表示したい場面って結構遭遇すると思いますが、 その中でも今回はBootstrapで作られたテーブルについてのお話。 問題:折り返し表示が適用されない Bootstrapでは簡単にテーブルを作ることができて便利なのですが、中身が長くなると…

テキストを折り返し表示【CSS】

CSS

HTMLを書いていて、例えばpタグの中の文章を改行させたい場合 おはようございます。 今日の天気は雨です 明日は晴れです <p>おはようございます。</p> <p>今日の天気は雨です</p> <p>明日は晴れです</p> pタグはブロック要素なので、pタグで囲まれた要素は一行を占領する。 つまり…

calc()の使い方【CSS】

CSS

CSSでレイアウトを指定したい時、 heightやwidthに対して一般的に使うのはpxとかですが、 便利に使えるcalcというものがあります。 width: calc(100% - 150px); たとえば親要素に対て二つの子要素があり その二つが横並びになっていたとします。 通常だと、…

position: absolute; がうまく使えない

CSS

HTMLで要素を絶対配置したい時に使う「position: absolute;」ですが、 いつも使い方があやふやで迷った結果思い通りに配置されないことが多いので、まとめておきます。 そもそもの用語の意味 position: relative; (相対的な) position: absolute; (絶対的…