今回のWebモバイルサイト制作記事では、イメージ画像したの空白を編集する方法に関してCSS3のレイアウトモジュールflexboxにおいての消去についてレポートしてみました。すこしでも役に立つ情報掲載を大切にしています。
《モバイルサイト制作フローその1》
まずはじめに、CSSセレクタ指定を用いて余白が出ているimgタグの親要素タグにCSSセレクタを指定
ここではclass=""del_img_pad""と指定してみましょう。
《モバイルサイト制作フローその2》
次の流れとしては、確認用の背景色指定から、imgタグの余白をわかりやすくするために親タグのセレクタに背景色赤を指定
.del_img_pad{
background:red;}という操作をしていきます。
《モバイルサイト制作フローその3》
さいごに、表示確認と背景色の消去を用いて、さらにCSSプロパティと値をvertical-align: bottom;で指定し表示確認後、余白が消えていたらbackground:redを削除
.del_img_pad{
background:red;
vertical-align: bottom;}という流れでこの記事の説明は終了です。
モバイルサイト制作記事に関しての注意点があります。ブラウザのバグによる余白の隙間がでるのでfont-size:0でも対処可能だが他のフォント表示に影響等があるためvertical-align: bottom;での設定を推奨ということについては、気を付けて対応しましょう。