桜満開ですね～
お花見もして、いちご狩りも行ってなんだかすでに春を満喫して
おなかいっぱいです…笑
今回は何か一つのことを紹介するのではなく
ここ最近で私が知った新たな知識をTipsでまとめておくことにします。
ウェブ制作で使用したもの、ということで特にまとまりがないですが
あくまで備忘録ということで笑
1.タブレットなどで:activeや:hoverを機能させる
PCでサイトつくって、グローバルメニューなどでhoverに指示すること
当たり前にありますよね？
今までもそれで問題なかったんですが、タブレットだけ挙動がおかしい…
しかもタブレットでトップページはhoverが効いているのに、サブページはすべて
hoverが効かないという…なんじゃこれ問題。
で、実装したのがこの属性。
<div class="hover_menu" ontouchstart=""></div>
Safari と Chrome で確認済みです。
2.PDFをサイズ指定して表示する
サイト内でPDFをリンク先にしたときにブラウザごとに表示されるサイズが異なったりします。
chromeではいい感じなのに、IEでは120％とか笑
でいろいろ調べていくとPDFにはオープンパラメーターなるものがあって実はいろいろ設定ができるのです。
以下にまとめてみました。
●50％で表示したい
<a href="リンク先.pdf#zoom=50"></div>
●2ページ目を最初に表示させたい
<a href="リンク先.pdf#page=2"></div>
●表示範囲を指定したい
<a href="リンク先.pdf#view=Fit"></div> //Fit ページ全体が収まるようにpdfを開く <a href="リンク先.pdf#view=FitH "></div>//FitH ページの横幅が収まるように開く <a href="リンク先.pdf#view=FitV "></div>//FitV ページの縦の長さが収まるように開く
※この設定はIE以外は挙動が怪しいのでご注意を。
3.CSS Grid Layout Moduleでグリッドデザインをさくさくつくる
最近出たCSSのdisplayプロパティの新しい値です。
使い方としては次のような感じ！
display: grid;
対応ブラウザとしてはモダンブラウザは大丈夫そう。
このCSS Grid Layout Module来週ブログでもう少しほった記事をかきます。
とりあえず触ってみた感覚としてはちょっと独特な感じ。
来週それをお伝えできたらいいなって思います！