CSSをiPhone inputボタンで有効化する知識

css iPhone input ボタン有効化知識

ホームページ制作講座のブログ記事として今回は、ボタンCSSを有効化する方法に関してスマホサイトの送信フォームで有効化についてレポートしてみました。わりと初歩的な知識や基本情報に関して記事にすることが多いです。

まずはじめに、スマホ閲覧時フォーム確認します。
スマートフォンでは送信フォームのボタンなどのパーツCSSは、独自のものが優先して表示されるため、コード化時のデザインが正常に表示されているかを確認してみましょう。

次の流れとしては、指定セレクタを特定します。
iPhoneなどでボタンパーツのCSS装飾がうまく反映されていない場合は、端末ブラウザのCSSが優先されているので、HTMLコーディング時にパーツに指定したCSS セレクタを特定という操作をしていきます。

さいごに、ベンダープレフィックスの無効化します。
セレクタを特定できたら、プロパティに以下を追加。

-webkit-appearance: none;

これはブラウザが先行で付けた見栄えの指定を無効にする記述でiPhoneなどで有効という流れでこの記事の説明は終了です。

このホームページ制作講座の記事に関しては注意点があります。個別にプロパティ指定しても、CSS反映の優先度があるのですべてが優先されてしまう場合は、一度ベンダープレフィックスの無効化(リセット)をする必要があるという点については認識しておいたほうがよいでしょう。

img画像下余白をCSS flexboxで消去する知識

知識消去 flexbox CSS img画像余白

ホームページ制作講座のブログ記事として今回は、イメージ画像したの空白を編集する方法に関してCSS3のレイアウトモジュールflexboxで消去についてレポートしてみました。わりと初歩的な知識や基本情報に関して記事にすることが多いです。

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

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

さらにCSSプロパティと値をvertical-align: bottom;で指定し表示確認後、余白が消えていたらbackground:redを削除
.del_img_pad{
background:red;
vertical-align: bottom;}という流れでこの記事の説明は終了です。

このホームページ制作講座の記事に関しては注意点があります。ブラウザのバグによる余白の隙間がでるのでfont-size:0でも対処可能だが他のフォント表示に影響等があるためvertical-align: bottom;での設定を推奨という点については認識しておいたほうがよいでしょう。

% em rem css css3 プロパティ値フォントサイズ margin padding

今回のホームページ制作講座ではCSS(カスケードスタイルシート)でパーセントやemまたはrem指定において、それぞれの相違点する一連の流れについてプロパティ値における違いを理解することに関して解説しています。

[第1の解説]
まずは、％(パーセント)について

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

[第2の工程]
次に、em(エム)について

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

[第3の工程]
最終に、rem(root em)について

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

この解説記事について補足したい点がありますが、それはemやremは小数点以下が換算しずらくなるので、参照親要素の指定値を62.5%とすることで1em=10pxなどに暗算しやすくなるが、煩雑になるだけなのであまり推奨できない点に関しては留意しておいた方がよいでしょう。