css

画像がぼやける場合の対応

css

ロゴの表示でpcだとクッキリなのにスマホとかだとぼやける現象が発生。 画像の解像度を上げるとスマホではくっきりするけど今度はPCでぼやけてしまう。 なので拡大縮小に対応したベクター画像にするためsvg形式で保存すること。ie9以上から。 ・・・と思った…

css ie11 display-cellで画像がはみ出す件

css

ie11でdisplay-cellに指定した画像がセル内に収まらず本来のサイズで表示されてしまう件の対応。 display:tableにtable-layout: fixedを追加すればok display: table; table-layout: fixed; width:100%; /*widthの指定も必要ぽい*/

css initialはie11が対応していないので使わないこと

css

width:initial; だけだと効かないので↓のようにする width:initial; width:auto; 参考サイト initialとautoでmin-width,max-width(height)をリセット – webdev

css line-heightは単位を指定しない&1.5とかで指定すること

css

【CSS】line-heightで行間を調整する方法:おすすめの値は? ・単位を指定しなければ親や子に影響しない ・1.5とかで指定すればフォントサイズに影響しない

iphoneのsafariでcssがキャッシュされるのを防ぐ方法

css

iPhone Safari のキャッシュが鬱陶しい時の超簡単なクリア方法 - Qiita iPhone、iPad、iPod touch でプライベートブラウズをオンまたはオフにする - Apple サポート プライベートブラウズ機能を使えばよいらしい

css box-sizing:border-boxについて

css

通常cssでwidth指定してもborderとかpadding指定するとそれらの分widthの幅を超えてしまう。 しかし、box-sizing:border-boxを指定すると、borderとかpaddingも含めた上でwidthに指定した幅となる。

css remとemの違い

css

remもemもブラウザの標準フォントサイズを基準とした単位という意味では同じ。ただし、emが親要素を基準とするのに対し、remの場合は親に依存せず、あくまでhtmlのサイズを基準とする。ケース1 em html{font-size:1em} /* 1em:16px */ body {font-size:2em} …

bootstrap4 css lgサイズ以上の場合にのみcssを適用したい場合とcssのリセットについて

フォームを常に100%にしたい場合以下のようにする <form class="w-100"></form> しかしlg以上は100%にしたくなくて、元のwidthに戻したい(リセットしたい)、というケースの場合、cssとhtmlを以下のようにする。css /* lg以上限定のcss */ @media (min-width: 992px) { .w-lg-initial { w…

css display:inline-blockの便利さが分かりました

css

inline-blockすごい便利だった。今日やっと意味が分かった。例えばspanとかのinline要素はwidthとか設定しても適用されないけど、かと言ってdivとか使うと改行されちゃうし困った、ってときにinline-blockを使うとwidthが適用されかつ改行もされないことが分…

css div内のある要素だけ余白を無視したい場合はネガティブマージンを使えばよい

css

例えばdiv内に15pxのpaddingが設定されていてその中にimgタグを入れるケースでimgタグだけ15pxのpaddingの設定を無視したい場合、imgタグに-15pxのmarginを設定してやれば、imgタグにはpaddingが適用されなくなる。

css display:table display:table-cell について

css

floatとか使わなくてもtableのように分割できて便利。vertical-alignも使える。後でまとめること。

bootstrap ドロップダウンメニューがパネルの下に隠れてしまう件

z-indexも効かず、1時間はまったので(いや正確には昨日の夜これが分からなくてそのまま寝てしまったので実際は4時間は無駄にした。でもそのおかげで睡眠がとれたから±2時間のマイナスとしておこう。と思ったけど本当はその後8km走るはずだったし損失はそこそ…

YUI Compressor を使ってCSS&Javascriptを圧縮する手順

YUI Compressorのサイト YUI Compressorダウンロードページ Releases · yui/yuicompressor · GitHubコマンドプロントで以下を実行してusageが表示されること。 java -jar yuicompressor-2.4.8.jar CSSを圧縮 java -jar yuicompressor-2.4.8.jar myfile.css -…

<!DOCTYPE>タグの定義によってデザインが変わる件

css

一時間はまった。 この定義だと font-size:500%;が適用されるけど この定義だと font-size:500%;が適用されない。今後はDOCTYPEを舐めないこと。

css はみ出た文字を...表示したい

css

以下で出来たのでメモ overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap;と思ったらIE11で表示されない。css - text-overflow:ellipsis doesn't work on IE - Stack OverflowどうやらIE11だとテキストの前に<br>があると表示されなくな…

テーブルにpaddingを設定しても間隔が変化しない場合、line-heightを調整すること

css

くだらないことで20分くらい悩んでしまった