skillup

技術ブログ

デザイン

css tips display:table,marginの相殺,font-size指定,margin上下の%など

投稿日:2017年12月30日 更新日:

昨日、喫茶店でみていた参考書でみたCSSのネタに関して忘れないようにメモ。

display:table

table-layout: fixed;で均等幅になる。%指定しなくていいかも。

また間隔を開けたいときは下記のように挿入

【スマホサイト】display:table-cellにmarginを指定したい

背景を透明に

インラインフレームの背景を透過する

inputのfocus時の青を消す

アウトラインのスタイル・太さ・色を指定する

marginの相殺

垂直marginを指定した2つのブロックレベルの要素が並んだ時大きいほうが1つのmarginとしてみなされる。

[CSS]marginの相殺を正しく理解しておこう!相殺はいつ起こるのか、相殺を回避するテクニック

対応策

marginを1方向にする。

要素をブロックレベル以外にする

上記方法で回避できない場合、paddingで対応する。

text-overflow

エリアの中に入っている文字がはみ出た時にどう対応するか。

CSSではみ出した文字を省略する「text-overflow: ellipsis;」がいつの間にかPCでも使えるようになってた!

 font-size

  • px ・・ 絶対値の指定
  • em ・・親要素に依存するため、親要素×font-size
  • rem ・・ rootサイズのemつまりhtml要素のfont-sizeに掛け算をする

CSS3のremとemの違いについて

CSSのフォントサイズ指定『px、em、%、rem』それぞれの違いと変換

margin上下の%指定は横幅が基準

これはびっくりしました。marginに限らず%指定って親要素を基準にするものだとおもってましたが、marginとpaddingの上下の%はなんと横幅を指定するようです。

使いどころとしてはJSなしでスマホサイトの高さを横幅に合わせ動的に変えたい時でしょうか。paddingとかでコントロールできそうです。特に背景画像のみの部分はこれで回避できそう。

CSS で上下 margin のパーセント (%) 指定が上手く行かない原因

-デザイン
-,

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

flexショートハンドに関して

実務でflexをちょこちょこ使うようになりました。 やはりfloatなどで組むことと比べると圧倒的に楽ですね・・・ んで、あまり理解してなかったショートハンド要はgrow,basis,shinkに関し …

no image

flexについて

CSSのflexをちょこちょこ使ってます。 以前下記リンクで超簡単なサンプルは動かしましたが、実践的なことは何もやっていませんでした。 css flexbxについてどんなことができるのか 使って思った …

no image

BrowserSyncを使ったホットリロードに関して

BrowserSyncを使ったブラウザのホットリロードに関して。 ホットリロードとは「エディタなどで更新があった際にブラウザがすぐに検知して、最新の状態に自動更新してくれる」状態にブラウザをすることで …

no image

CSS positionについて

本日はpositionについて。 要素を通常、配置される場所から別の場所に配置させたいような場合positionを使います。 Contents1 positionの使い方1.1 相対配置 relati …

no image

css animationの使い方、他スクロース量でのアニメーションなど

transitionとちょっと近いですがCSSでのanimationに関して。 HTML

CSS [crayon-67256950a3 …

アーカイブ