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

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …

no image

一般的なWebサイト制作について

実務で通常のWebサイトを作成するというお仕事が。 Webサイトを改めて作成するっていう経験からはだいぶ遠のいてましたんで、これを機にスキルをまとめたいなーって思います。 サイト作成といっても本格的な …

no image

デザイ二ングインターフェイスのまとめ

デザイ二ングインターフェイスを今まで読んで実務にすぐ生かせそうな&ポイントとなりそうな箇所のまとめ Contents1 ユーザーを理解する2 ユーザーの行動パターン3 ポジショニング(情報の配置) 4 …

no image

lessについて(CSSライブラリ)

Contents1 lessって?1.1 スコープが使える1.2 変数が使える1.3 関数化1.4 インポート2 インストール3 コンパイル lessって? CSSの保守性を向上させるライブラリ。これ …

no image

checkboxのカスタマイズ

ブラウザのディフォルトではなくcheckboxをカスタマイズしたいとき。 やったことなかったんですが、やってみると結構面白い。 Contents1 ソース2 参考リンク ソース まずはソースを。 ht …