CSSの変な仕様あるあるを力一杯列挙してみたFront End Programming

CSSの変な仕様あるあるを力一杯列挙してみた

CSS

現役フロントエンドエンジニアのかみーゆです。
CSSってムズくないですか?マジで。
多分初心者がつまづくであろう、なんでこーなるの?!をまとめます。思い出したら随時更新しようと思います。

まず初めに

Webサイトって横幅は決まってるけど、高さはコンテンツ量によって無限に伸びる特性があります。なので、CSSプロパティも横方向に対しては親切で縦方向に対して無頓着な仕様になっています。そんなことだけじゃないけど、色々めんどくセーなーと日頃思っていることをまとめてます。

折りたたみマージン

マージンという厄介なプロパティがあります。上下にあるとなぜか重って相殺されます。
慣れない人からするとめちゃめちゃ混乱することでしょう。

css_aruaru02.jpg

画像要素に aタグとかでラップすると下に隙間できる

マークアップ言語は英語圏の人が作ってます。imgタグはフレージングコンテンツ、つまり文字列のような振る舞いをします。

css_aruaru01.jpg

これを回避するためのコードはこちら。

img {
  vertical-align: bottom;
}

画像のアスペクト比がおかしい

昔の香港ムービーのように画像のアスペクト比がおかしいサイトがあります。
その場合は以下のコードで回避しましょう。こうしておけば高さの比率を保てくれます。

img {
  height: auto;
}

ついでに、バナーなどウィンドウ幅や親タグよりデカくてはみ出してることがありますので、それを回避するために、imgタグの初期値として以下を設定しておきましょう。
「画像要素にaタグとかでラップすると下に隙間できる」を回避したいので以下のようしておけば無駄がありません。

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

もしくは要素を dislplay: block; にすれば、インラインな振る舞いがなくなります。    

画像のアスペクト比について追記

ZEST2007miniさんよりobject-fitあるじゃないかーとのことでした。
私のブログはできるだけIEをカバーした内容で書くように心がけてるのですっ飛ばしてました。object-fit-imagesというJSを使えばIE対応可能だそうです。

object-fit-images

CSS プロパティ object-fit について

img や video コンテナーにどのようにはめ込むかを設定するプロパティ。

object-fit

img {
   ojfect-fit: contain;
}
  • contain…アスペクト比を維持したままコンテンツボックスに収まる。アスペクト比が合わない場合は余白ができる。
  • cover…アスペクト比を維持したまま、要素のコンテンツボックス全体を埋める。アスペクト比と合わない場合は、画像が切り取られる。
  • fill…オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は引き伸ばされます。
  • none…置換コンテンツは、拡大縮小されません。
  • scale-down…オブジェクトの実際のサイズが小さいほうを採用します。

パディングの縦方向を%指定したら変な値になる

パディングの縦の挙動が不思議。なぜか横幅を参照して算出してくれます。
なので、それを利用して Google マップや YouTube などの iframe をレスポンシブ化できます。

css_aruaru02.jpg

アスペクト比16:9の場合、以下のようなコードになります。
9 ÷ 16 = 0.5625 なので 56.25% になります。

.iframeWrapper {
  height: 0;
  width: 100%;
  padding-top: 56.25% ;
  position: relative;
  overflow: hidden;
}.iframeWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

高さを 100vh 指定したら、iPhone の Safari で見るとフッターメニュー分隙間ができる

スクロール方向によってフッターに iPhone 独自のメニューが出現するせいで、そのメニュー分は viewport の height として換算されません。そんな時は height: 100%; で回避。

アンドロイドで明朝体が使えない

機種依存でも明朝体は品があっていいですよね。アンドロイドユーザーってなんでみんな変なフォント使ってるんでしょう?使いたければWebフォントで代用しましょう!

游ゴシック、游明朝IEでバグる

もうメイリオ使いましょう。以下のようにハックすればOK。

_:-ms-fullscreen, :root body {
  //ここにフォントファミリーの設定
}

パディングが要素からはみ出す

CSS をリセットするときにボーダーもパディングも内側に含めましょう。

* {
  box-sizing: border-box;
}

クリアフィックス、、、、やめましょ

親要素に擬似用を無理くり追加してfloat解除するのやめましょ。

css_aruaru04.png
もうすでに使える便利な CSS のレイアウトモジュールはあります。
現時点では flex を積極的に使って、IE の利用者が格段に減ったら grid を使いましょう。
それにしても Win ユーザーってなんであんなに頑固にIEを使い続けるんだろう。。。。ラストモヒカンすぎて涙がちょちょぎれます。

まとめ

現時点で思いつくだけの CSS の変だなーと思うところと回避方法を書いてみました。
思い出せたらまた追記します。
皆さんのコーディングライフの一助となれば幸いです。
最後までお読みいただきありがとうございました。

関連記事もあわせてお読みください

Read More Blogs

Web制作に関する人気の記事

セブ島・海外移住に関する人気の記事

キャリアアップ・ライフスタイルに関する人気の記事

管理人について

IT戦士:かみーゆ

私、フロントエンドエンジニアのかみーゆです。日本でフロントエンドを中心に約10年Web制作 →→→ セブ島に転職してエンジニア講師 →→→ オフショア開発担当者(イマココ)。13歳の頃から「好きなように生きて好きなように死ぬ」が人生のKPI。なので、「楽しいか」、「かっこいいか」でやることを判断・取捨択一しています。好きなものは肉とビール。

About Me