お世話になっております。
フォームブリッジのロゴをPCとスマホそれぞれに最適化したいです。
カスタマイズ方法等あれば教えて下さい。（※JS,CSSともに初心者です）
よろしくお願い致します。
ロゴのスマホ最適化はできました。
img {
width:100%;
max-width: 100%;
height: auto;
}
ただ、PCで見ると、左に寄ってしまいます。
こちらを中央に表示させることはできますでしょうか。
教えてください。
宜しくお願い致します。
Cstapです。
メディアクエリというものを使うと実現できます。
スマホの様にスクリーンの幅が狭い時にCSSを適用させたい場合、例えば以下のように記述します。
@media (max-width: 414px) { img { width:100%; max-width: 100%; height: auto; }}
メディアクエリについては、
https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_types
こういったサイトが参考になります。
syunta様
ご回答ありがとうございます。
こちらで出来ました！
ちなみに、もう１点質問させていただきました、
下記の件についてもご教授頂けると幸いです。
＞ロゴがPCで見ると、左に寄ってしまいます。
＞こちらを中央に表示させることはできますでしょうか。
.fb-header > a { margin: 0 auto;}
カスタマイズで上記のような css を読み込ませれば可能かと思います。
.fb-header というクラスはフォームブリッジの主要構成要素にデフォルトで付与されるのでご活用ください。
https://form.kintoneapp.com/help/customize
タイトルの時と中央寄せの方法が異なるのはCSSにはブロック要素とインライン要素というものがあるためです。
https://developer.mozilla.org/ja/docs/Web/HTML/Inline_elements
こういったサイトが参考になります。
syunta様
ご回答ありがとうございます。
こちらで出来ました！
大変助かりました！
ありがとうございました。