カテゴリー別アーカイブ: CSS3

CSSflexboxのimg画像下余白を消去する方法

Web制作の工程でレイアウトモジュールflexboxで、イメージ画像したの空白の編集が必要になったので、CSS3のレイアウトモジュールflexboxのイメージ画像したの空白を消去してみます。

はじめに最初の手順としては、まずCSSセレクタ指定をします。

余白が出ているimgタグの親要素タグにCSSセレクタを指定
ここではclass=””del_img_pad””と指定します。

 

その次に、確認用の背景色指定をします。

imgタグの余白をわかりやすくするために親タグのセレクタに背景色赤を指定
.del_img_pad{
background:red;}をします。

最後の手順としては表示確認と背景色の消去で、

さらにCSSプロパティと値をvertical-align: bottom;で指定し表示確認後、余白が消えていたらbackground:redを削除
.del_img_pad{
vertical-align: bottom;}。という方法で完了します。

 

この手順の流れで気を付けたい事が、ブラウザのバグによる余白の隙間がでるのでfont-size:0でも対処可能だが他のフォント表示に影響等があるためvertical-align: bottom;での設定を推奨という点について注意する必要があります。

CSSでプロパティ値の%、em、remを違いを理解する情報

Web制作のCSS(カスケードスタイルシート)にかかわる工程で、パーセントやemまたはrem指定についてそれぞれの相違点を情報として記録しておいた方が良いと考えたので、プロパティ値%、em、remの違いを理解することについて解説しています。

 

》ひとつめの情報-%(パーセント)。

親タグ要素のフォントサイズを相対的に参照。指定がない場合はデフォルトで16px=100%でサイズ指定という特徴があります。

 

 

》ふたつめの情報-em(エム)。

文字の高さを1emとして親タグ要素のフォントサイズを相対的に参照。%とほぼ同義でデフォルトでは16px=1emでサイズ指定という特徴があります。

 

 

》みっつめの情報-rem(root em)。

CSS3から実装された値で絶対的にrootタグであるhtmlの指定していされた値を参照。デフォルトでは16px=1remでサイズ指定という特徴があります。

 

 

その他の情報については、emやremは小数点以下が換算しずらくなるので、参照親要素の指定値を62.5%とすることで1em=10pxなどに暗算しやすくなるが、煩雑になるだけなのであまり推奨できない点という特徴があります。

CSS heightとwidthプロパティのvh/vw/vmin/vmaxの情報 height/widthについての情報。

vはviewportの意味で、PCではブラウザ領域、スマホなどでは表示領域を差し、vhやvwで指定した場合は、viewportを基準にサイズを指定するである。

その他の情報としては、相対的にサイズを指定するため、パーセント指定とおなじ種類になりますが、パーセンテージはコンテナ要素や親の要素を指定を継承し、スクロールバー幅なども含まれるため、指定する意図は異なり、少し古いブラウザだと対応されていなかったりバグが発生する可能性もあるがあり、特性としてはvwとvhはそれぞれの表示領域の100分の1値、vminとvmaxはそれぞれ表示領域の値の小さい方、大きい方の値に対しての100分の1値となることです。
情報カテゴリーとしては、プロパティについてのCSSに分類される。
情報について、検索エンジンでは
meta viewport
meta name viewport
css vw
viewport meta tag
vw css
viewport meta
html viewport
meta name viewport content width device-width
css vw support
vw vh
vh vw
viewport html
mobile viewport
vw css3
meta tag viewport
responsive sizes
html meta viewport
meta viewport tag
vw support
viewport units
vw vh css
view port
responsive text size
vh vw support
viewport mobile
vw css support
initial-scale
mobile website meta tags
name viewport
mobile website viewport
などがインデックスされている。