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 flexboxについて どんなことができるのか?

CSSを使い始めて数年がたっていますが、いまだに最適な書き方がようわかっとりません(汗) 特に難しいのが全体的なレイアウトの決定でfloatとかpositionなんかを使っていろいろと悪戦苦闘していま …

no image

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

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

no image

ドロップダウンリスト

本日はヘッダーメニューとかで見られるドロップダウンリストについて。 bootstrapを使った方法は下記に。 http://skill-up-engineering.com/?p=1157 通常のHT …

no image

css写経学習で感じたこと

こっちのブログでも書いてますが、CSSを最近写経してて気づいたことがいろいろあるんでメモリます。 常時追加予定。 Contents1 全体2 レスポンシブ3 レイアウト4 list系5 display …

no image

pcサイトのコーディングに関しての注意点。

PCサイトのコーディングをしていて気づいたことなど。 最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・ 幅が縮むということを常に意識する。 縮めた時にページが崩れた …

アーカイブ