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

lessサンプル

lessのサンプル Contents1 lessファイル構成2 ソース3 注意点4 参考リンク lessファイル構成 header,footer sytle 変数 lib 関数 common head …

no image

Bootstrapまとめ 主に段組み関連の知識について

自分はデザインセンスが壊滅的なので、Bootstrapにいろいろと頼っております。 最初は仕事でちょこっと使う機会があり、見よう見まねでやっていましたが、理屈がわからないと応用がきかないこともあるため …

no image

css中央ぞろえ

よく出る中央ぞろえテクに関して 横センタリング   [CSS]高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ 中央センタリング たった4行! CSS3 Flex …

no image

cakePHP+bootstrapでのページャー

cakePHP+bootstrapでページャーのリンクを下記のように出力したいときのメモを。 ソース コントローラーのほうでは特に設定する必要なはく、HTMLのほうで下記のように設定すればOKです。 …

no image

レスポンシブサイト作成に関して

実務でレスポンシブを作ったので、そのまとめに関して。ちなみにPCのサイト自体も作ったことなかったのでそのまとめに関しても。 メインキャッチの処理は縦横の比率を変えない、常に要素を中央に配置するとなると …

アーカイブ