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

CSSで背景画像の出力

最近はやりのWEBデザインでよくある、大きな背景画像のなかにユーザー名とパスワードを入力させるような画面の作成方法について。

基本的な …

no image

CSS floatについて

以前もちょっと書きましたが、CSSのfloatについて。 http://skill-up-engineering.com/?p=1708への追記 親から見るとfloatした子供は存在しない状態 flo …

no image

data- HTML5のカスタムデータについて

HTML5のカスタムデータ属性について。 HTML5ではタグにdata-*とすることで任意の値を持たせることができます。 いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ 例として下記 …

no image

bulmaフレームワークに関して

以前から使っているbulmaフレームワークですが、ドキュメントをフルで読んだことがなく、いい機会なので全て読み、ポイントをメモります。 https://bulma.io/documentation/ …

no image

CSSの適用ルールと継承について

前回のエントリーでも書いたようにいまいちわかっていないことが多いので、復習します。 Contents1 セレクタの種類2 セレクタの詳細度3 継承 セレクタの種類 CSSのセレクタには下記のようなもの …