見よう見まねで、何とかする
【ｽﾏﾎならではの「ﾌﾘｯｸ：ｽﾜｲﾌﾟ」ｽｸﾛｰﾙ】
ｽﾏﾎ表示ができるようになったので自己満足していたのですが、もう少しやってみたいことがあります。
ｽﾏﾎといえば指一本での画面ｽｸﾛｰﾙですが、やはり横方向への「ﾌﾘｯｸ：ｽﾜｲﾌﾟ」ｽｸﾛｰﾙができるようにしてみたいものです。
以前はﾌﾟﾗｸﾞｲﾝやJavascriptなどが必要で敷居が高かったのですが、ﾈｯﾄ検索してみると「HTMLとCSSだけ」で実現できるようです。
先ずは、横ｽｸﾛｰﾙ用のﾒﾆｭｰﾘｽﾄの「ﾃﾝﾌﾟﾚｰﾄﾓｼﾞｭｰﾙ」を作成します。
【HTML ﾒﾆｭｰﾘｽﾄ】
ｽﾏﾎ表示に向かう前に、PC用Top画面でﾀｲﾙ型でﾒﾆｭｰ表示できるようにします。
PC用CSSにﾀｲﾙ型表示を記述し、ﾒﾆｭｰ画像が横一列にきれいに並ぶようにChromeﾃﾞﾍﾞﾛｯﾊﾟｰﾂｰﾙを見ながら微調整します。
【PC用CSS ﾀｲﾙ型で表示】
何とかWebsiteのTopﾍﾟｰｼﾞができました。
いよいよｽﾏﾎ用CSSですが、見よう見まねで記述します。
ﾊﾟｿｺﾝでﾀｲﾙ型に並べるためにも使っている「display: flex;」で横並びにし、「overflow-x: scroll;」でｽｸﾛｰﾙ可能にします。
ﾒﾆｭｰ画像の「max-width: px;」でｻｲｽﾞを調整して、Topﾒﾆｭｰの見え方を決めます。
「-webkit-overflow-scrolling: touch;」は、惰性付きのｽｸﾛｰﾙで、ｺﾝﾃﾝﾂはｽｸﾛｰﾙのｼﾞｪｽﾁｬｰが終了し、ﾀｯﾁﾊﾟﾈﾙから指を離した後もｽｸﾛｰﾙを続けます。
【ｽﾏﾎ用CSS ｽﾗｲﾀﾞｰで表示】
ﾒﾆｭｰ右側に「固定nextｱｲｺﾝ」を設置し、ﾒﾆｭｰが続いていることを知らせます。
【ｽﾏﾎ用CSS 右側に固定nextｱｲｺﾝ設置】
ｼﾐｭﾚｰｼｮﾝ画面ではうまくいったので、いよいよ公開します。
実際のｽﾏﾎでも動くようになったので、CMSﾃｰﾏとして保存しておきます。
この先細かい調整で失敗したとしても、ﾃｰﾏを再適用すれば簡単に現在の状態に戻ります。
技術の発達と先駆者のﾈｯﾄ記事のお陰で、年老いた田舎のﾗｼﾞｵ少年でもなんとかなりました。（ありがたいことです！！！）
【ｽﾏﾎならではの「ﾌﾘｯｸ：ｽﾜｲﾌﾟ」ｽｸﾛｰﾙ】
ｽﾏﾎ表示ができるようになったので自己満足していたのですが、もう少しやってみたいことがあります。
ｽﾏﾎといえば指一本での画面ｽｸﾛｰﾙですが、やはり横方向への「ﾌﾘｯｸ：ｽﾜｲﾌﾟ」ｽｸﾛｰﾙができるようにしてみたいものです。
以前はﾌﾟﾗｸﾞｲﾝやJavascriptなどが必要で敷居が高かったのですが、ﾈｯﾄ検索してみると「HTMLとCSSだけ」で実現できるようです。
先ずは、横ｽｸﾛｰﾙ用のﾒﾆｭｰﾘｽﾄの「ﾃﾝﾌﾟﾚｰﾄﾓｼﾞｭｰﾙ」を作成します。
【HTML ﾒﾆｭｰﾘｽﾄ】
ｽﾏﾎ表示に向かう前に、PC用Top画面でﾀｲﾙ型でﾒﾆｭｰ表示できるようにします。
PC用CSSにﾀｲﾙ型表示を記述し、ﾒﾆｭｰ画像が横一列にきれいに並ぶようにChromeﾃﾞﾍﾞﾛｯﾊﾟｰﾂｰﾙを見ながら微調整します。
【PC用CSS ﾀｲﾙ型で表示】
何とかWebsiteのTopﾍﾟｰｼﾞができました。
いよいよｽﾏﾎ用CSSですが、見よう見まねで記述します。
ﾊﾟｿｺﾝでﾀｲﾙ型に並べるためにも使っている「display: flex;」で横並びにし、「overflow-x: scroll;」でｽｸﾛｰﾙ可能にします。
ﾒﾆｭｰ画像の「max-width: px;」でｻｲｽﾞを調整して、Topﾒﾆｭｰの見え方を決めます。
「-webkit-overflow-scrolling: touch;」は、惰性付きのｽｸﾛｰﾙで、ｺﾝﾃﾝﾂはｽｸﾛｰﾙのｼﾞｪｽﾁｬｰが終了し、ﾀｯﾁﾊﾟﾈﾙから指を離した後もｽｸﾛｰﾙを続けます。
【ｽﾏﾎ用CSS ｽﾗｲﾀﾞｰで表示】
ﾒﾆｭｰ右側に「固定nextｱｲｺﾝ」を設置し、ﾒﾆｭｰが続いていることを知らせます。
【ｽﾏﾎ用CSS 右側に固定nextｱｲｺﾝ設置】
ｼﾐｭﾚｰｼｮﾝ画面ではうまくいったので、いよいよ公開します。
実際のｽﾏﾎでも動くようになったので、CMSﾃｰﾏとして保存しておきます。
この先細かい調整で失敗したとしても、ﾃｰﾏを再適用すれば簡単に現在の状態に戻ります。
技術の発達と先駆者のﾈｯﾄ記事のお陰で、年老いた田舎のﾗｼﾞｵ少年でもなんとかなりました。（ありがたいことです！！！）
コメントする