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

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のfont-familyで記号が小さく表示される状況を解決する

Webの制作過程で表示が小さい記号文字の対処が必要になったので、HTMLソースのプロパティfont-familyで解決してみます。

 

はじめに

最初の手順としては、まずCSSファイルを特定記号〇や△などを表示指定する一番最後に読み込まれるセレクタの場所を特定します。

 

その次に、

font-familyプロパティを、font-family: “”メイリオ””, Meiryo, Osaka, “”MS Pゴシック””, “”MS PGothic””,’Century Gothic’, sans-serif;
などで指定をします。

 

最後の手順としては

対象ページで、キャッシュクリア後に特定の記号の大きさが通常サイズか確認することで今回は完了です。

 

この工程の流れで気を付けたい事が、font-familyを指定しても、CSSセレクタの優先順位や読み込まれる順番などにより正しく反映されない場合があるという点について注意する必要があります。