css

FlexboxとAuto marginを組み合わせる

css

こんな感じでコンテンツを左右(上下)に配置する時に便利。 以下のような問題(仕様)があるので、Flexboxを入れ子にした場合かつ、上下揃えをした場合は注意が必要。 css - Chrome / Safari not filling 100% height of flex parent - Stack Overflow キャプ…

ブロック要素にリンク(a tag)をつける

ブロック要素内のaタグを、要素いっぱいに広げる text-indent: -999px; などでテキストを非表示にする必要がある シンプルにaタグでブロック要素を包む ブロック要素内のテキストがリンクテキストと同じスタイルにならないように調整する(必要ならば) a { …

複数行をTruncate

css

ブラウザが限られている(Safari, Chrome) そのうち使えなくなるかもしれない heightで制限しているので、対象ブラウザ以外でもレイアウトが崩れることはない、はず .note { font-size: 16px; line-height: 1.25; width: 100px; border: 1px solid #000; over…

カラーコードの変換 (Hex -> RGB)

例えば#ff0000をrgb(255,0,0)に変換したい場合。 カラーコード(文字列)を2文字ずつに分ける 16進法を10進法に変換する import compose from 'lodash/fp/compose'; import map from 'lodash/fp/map'; function hexToRgb(hex: string): string { return comp…

画像を内接リサイズにする

css

css - Resize to fit image in div, and center horizontally and vertically - Stack Overflow transformとposition: absoluteを利用します。 前の記事のアスペクト比を保つcssを利用するとこんな感じです。 object-fitというプロパティを利用すればもっと…

アスペクト比を保つ

css

「padding-topに%を設定すると、包括しているブロックの幅を基準にする」という仕様を利用します。 padding-top - CSS | MDN 以下のコードは、アスペクト比を4:3にする場合。 .a43 { border: 1px solid #000; width: 160px; position: relative; } .a43:befo…