いつも書き方の詳細を忘れて調べがちなのでレスポンシブ対応覚え書き。前回jQueryの場合をメモったので一応メディアクエリの場合もメモ。
いつも書き方の詳細を忘れて調べがちなのでレスポンシブ対応覚え書き。前回jQueryの場合をメモったので一応メディアクエリの場合もメモ。
READ MORE
position:stickyを使ってサイドバーをスクロールで上部に固定しようとしてうまくいかない場合の対応メモ。 gridの場合 CSS Gridは、align-items のデフォルトが strecth のため、al…
READ MORE
コンテンツ量が画面の高さより少ない時のみフッターをページ最下部に固定する方法メモ。レスポンシブ対応などでフッターの高さを固定にできない場合はpositionだとうまくいかないのでFlexboxで実現します。他にもいろいろ…
READ MORE
CSS Grid のauto-fitまたはauto-fillとminmaxで、メディアクエリを使わずにレスポンシブ対応が可能です。これは便利すぎる…！ 以下の例の場合、子要素の横幅が140pxより小さくなると自動的に改行…
READ MORE
CSS Grid で grid-template-columns を 1fr にした場合に、横幅がはみ出して横スクロールが出てしまう場合の対応メモ。どうも1frにした要素の中に横スクロール可能なコンテンツがある場合におき…
READ MORE
word-break で改行 改行しなければテキストがコンテンツボックスからあふれる場合に、単語の途中でも自動改行。 overflow-wrap で改行 次の単語が行内に収まらない場合は、単語内で改行せずに次の行に送る。…
READ MORE
aspect-ratioでアスペクト比を指定する IEのサポートが終了したので、もう aspect-ratioを使う方法でよいのではないでしょうか。 こんな感じになります。 aspect-ratioを使わない書き方 もし…
READ MORE
1行の場合 要素の横幅に合わせてテキストを丸めて末尾に3点リーダーをつけます。 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾…
READ MORE