Chromeﾃﾞﾍﾞﾛｯﾊﾟｰﾂｰﾙ
【CSS ｺｰﾄﾞ】
PC用とｽﾏﾎ用CSSの切り替えができるようになったので、本命のｽﾏﾎ用CSSを作らなければなりません。
一から作る技量はないのでPC用CSSのｺﾋﾟｰを基に修正していきますが、年老いた田舎のﾗｼﾞｵ少年には強い味方があります。
Googleｸﾛｰﾑにはﾃﾞﾍﾞﾛｯﾊﾟｰﾂｰﾙ（要素の検証機能）というびっくりするくらい便利な機能が備わっており、HTMLとCSSが同時に表示されるので試行的に修正しながら、様々な大きさの端末での動きをｼﾐｭﾚｰｼｮﾝできるという素晴らしいﾂｰﾙです。
idやclassを選択するとｼﾐｭﾚｰｼｮﾝ画面の表示位置が分かるので、stylesのｺｰﾄﾞを追加・修正しながらﾚｲｱｳﾄを合わせていきます。
ﾈｯﾄ記事を参考に無手勝流で向かうには打ってつけです。
ややこしい表示領域の関係も、一目瞭然です。
【ｽﾏﾎ用CSSで、ﾚｲｱｳﾄ修正（例）】
これでできたと思ってｽﾏﾎで表示しますが、PC用ﾚｲｱｳﾄのままです。
何回も再構築をしますが表示は変わりません。？？
あーっ、ｷｬｯｼｭが効いていることに気付くまで時間が掛かりました。（汗）
ｽﾏﾎﾌﾞﾗｳｻﾞのｷｬｯｼｭをｸﾘｱすると、ｽﾏﾎ用ﾚｲｱｳﾄに更新されました。
最後はﾄｯﾌﾟ画面の印象を決める画像の調整です。
画像の原寸はPC用で、横1007×縦288ですが、ｽﾏﾎ用ﾚｲｱｳﾄで横幅100%で綺麗に可変表示させる必要があります。
Chromeﾃﾞﾍﾞﾛｯﾊﾟｰﾂｰﾙで、いろいろと試した結果、2つのｺｰﾄﾞを追加しました。
『background-size: contain;』
縦横比を保持して、表示領域に収まるように背景画像を表示します。
『padding-top: 29%;』
高さを0に指定して、paddingで領域を確保します。
paddingの高さの計算については、『表示画像の高さ ÷ 表示画像の幅 × 100』で求めます。
この場合は、『288 ÷ 1007 × 100 ≒ 29％』となり、うまく表示できるようになりました。
本来はｽﾏﾎ表示ﾌｧｰｽﾄでﾃﾞｻﾞｲﾝを一新するのがﾍﾞｽﾄですが、CSSの変更でお茶を濁す年老いた田舎のﾗｼﾞｵ少年でした。（ﾁｬﾝﾁｬﾝ）
【CSS ｺｰﾄﾞ】
PC用とｽﾏﾎ用CSSの切り替えができるようになったので、本命のｽﾏﾎ用CSSを作らなければなりません。
一から作る技量はないのでPC用CSSのｺﾋﾟｰを基に修正していきますが、年老いた田舎のﾗｼﾞｵ少年には強い味方があります。
Googleｸﾛｰﾑにはﾃﾞﾍﾞﾛｯﾊﾟｰﾂｰﾙ（要素の検証機能）というびっくりするくらい便利な機能が備わっており、HTMLとCSSが同時に表示されるので試行的に修正しながら、様々な大きさの端末での動きをｼﾐｭﾚｰｼｮﾝできるという素晴らしいﾂｰﾙです。
idやclassを選択するとｼﾐｭﾚｰｼｮﾝ画面の表示位置が分かるので、stylesのｺｰﾄﾞを追加・修正しながらﾚｲｱｳﾄを合わせていきます。
ﾈｯﾄ記事を参考に無手勝流で向かうには打ってつけです。
ややこしい表示領域の関係も、一目瞭然です。
【ｽﾏﾎ用CSSで、ﾚｲｱｳﾄ修正（例）】
これでできたと思ってｽﾏﾎで表示しますが、PC用ﾚｲｱｳﾄのままです。
何回も再構築をしますが表示は変わりません。？？
あーっ、ｷｬｯｼｭが効いていることに気付くまで時間が掛かりました。（汗）
ｽﾏﾎﾌﾞﾗｳｻﾞのｷｬｯｼｭをｸﾘｱすると、ｽﾏﾎ用ﾚｲｱｳﾄに更新されました。
最後はﾄｯﾌﾟ画面の印象を決める画像の調整です。
画像の原寸はPC用で、横1007×縦288ですが、ｽﾏﾎ用ﾚｲｱｳﾄで横幅100%で綺麗に可変表示させる必要があります。
Chromeﾃﾞﾍﾞﾛｯﾊﾟｰﾂｰﾙで、いろいろと試した結果、2つのｺｰﾄﾞを追加しました。
『background-size: contain;』
縦横比を保持して、表示領域に収まるように背景画像を表示します。
『padding-top: 29%;』
高さを0に指定して、paddingで領域を確保します。
paddingの高さの計算については、『表示画像の高さ ÷ 表示画像の幅 × 100』で求めます。
この場合は、『288 ÷ 1007 × 100 ≒ 29％』となり、うまく表示できるようになりました。
本来はｽﾏﾎ表示ﾌｧｰｽﾄでﾃﾞｻﾞｲﾝを一新するのがﾍﾞｽﾄですが、CSSの変更でお茶を濁す年老いた田舎のﾗｼﾞｵ少年でした。（ﾁｬﾝﾁｬﾝ）
コメントする