ページ内でのリンクを貼る場合
<a href="#pagetop">ページトップへ戻る</a>
などと書きますよね。
Q&Aのページなどの場合大変便利。
でもこれ、普通にリンクを貼るだけだと瞬間的に画面が切り替わってスクロールされている感が少ない！
ちょっとこだわったサイトだとすーーっとスクロールして表示されます。
上に行ったのか下に行ったのか分かりやすく、何より今風でいいですよね。
上記を
<head> ～ </head> 内 もしくは</body>直前に挿入。
これだけで滑らかにスクロールされます。
※「リンクが ＃ で始まる場合」という指定なので別ページ間でのスムーズスクロールは不可です。
今日のお題は「きっちり」三等分できる書き方。 どんな書き方を想像しましたか？
この書き方を知るまで僕は
.col3 li { width : 33.33333% ; }
のような書き方をしていました。
実際にこの書き方をしているウェブサイトもよく見かけます。 が、性格の問題もあるかもしれませんが割り切れない 余り があるのがちょっと許せない。
width: 1/3;
みたいな書き方ができたらいいのになー って思ってました。 で、探してみたところ発見！
1/3サイズを指定する方法があったんです！ 感動(´ｪ`)
対応ブラウザ：IE9以降、Safari6以降、Google Chrome19以降、Firefox4以降
使い方：
.col3 li { width : calc(100% / 3) ; }
これだけ！ 簡単ですね。全体の幅100%の3分の1サイズという、まさに僕が探していた等分指定！！！
上記にさらにベンダープレフィックスを付け加えて・・・
li.3col { width : 33.33333% ; /* 未対応ブラウザ用フォールバック */ width : -webkit-calc(100% / 3) ; width : calc(100% / 3) ; }
これで完成形です！！
See the Pen width: calc() by maru (@maru0014) on CodePen.
ウェブページ製作で実際に使う場面としては、ランキングのトップ3を横並びにさせたい時なんかオススメです。
参考: Can I use... Support tables for HTML5, CSS3, etc
執筆時点の2015年においては未対応ブラウザに留意すべきと考えられましたが、現状の主要ブラウザは全て対応済みなのでベンダープレフィックスやフォールバックも不要かもしれません。
※個人的な意見です。実装の際はアナリティクスで利用者の使用ブラウザを調査した後判断しましょう。
見出しの背景画像として、幅1pxの画像をリピート表示させようとしたところAndroid標準ブラウザでのみ機能しなかったお話。
ChromeやSafariでは正常に表示されたがAndroid標準ブラウザのみ背景が表示されなかった。
background-sizeを backgroundプロパティにショートハンドで
例) background: url(image.jpg) repeat-x center center / contain rgba(0, 0, 0, 0);
などと書いた場合にAndroid標準ブラウザで機能しないという記事をいくつか見つけたが、今回はきちんと別で書いている。
次に考えられる要因は"サイズ指定自体が間違っている"
結論から言えばこれでした。
他のブラウザでは幅100%か原寸の幅1pxとして認識されていたautoがAndroid標準ブラウザでは読み込まれず、背景画像自体が一切表示されなかった。
今回は下記のように記述を変えることで対応。
もう一つやり方があるとすれば、リピートではなく幅100%にしてしまう方法
Android標準ブラウザでも背景画像が表示される（幅100%指定）
まぁ文字数も大して変わらないのでどちらでも良いと思いますが。
楽天 スマホ商品ページ共通説明文の画像CSSが書き換えられていた
商品ページ共通説明文の画像に対して厄介なCSSが記述されていました。
共通説明文内の画像すべてに
block表示
横幅最大100％
余白0
が、!importantで強制的に適用されるというふざけた記述。
importantつけてんじゃねえよ！ヽ(｀Д´#)ﾉ ｳﾜｰﾝ
サイドフローティングバナーなどを使っている店舗は強制的に画面幅いっぱいに表示されたり、
display:none;で一時的にバナーを非表示にしていたりする店舗は勝手にdisplay:block;で上書きされて表示されていたり・・・。
要注意ですね。
対策としては楽天のCSSよりも要素名を詳細に指定してimportantをさらに上書きすること。
#shopCommonText img よりも詳細に
div#shopCommonText img と指定し、プロパティにも !important をつければOKです。
というかんじですね。
今回の仕様変更、CSSを適用していない店舗ならばwidth="100%"の指定が省けるので大助かりでしょうけど独自にCSSを適用している店舗はorz
朝から1時間ほど無駄にしました。
Google Developers「PageSpeed Insights」を使えば自分のサイトの出来栄えというか改善すべき点をすべて洗い出してくれます。
100点満点中・・・61点！ のように直感的にスコアが表示されるので分かりやすい！
ちなみにこのブログCODE-LIFEはスコア61でした。
そしていろいろ修正が必要な点を指摘されるわけですが、
Google「JavaScriptを圧縮しろー」
Google「headに入れてるJavaScriptとCSS排除しろー」
Google「キャッシュつかえー」
Google「画像圧縮しろー」
ってなかんじに。
続きを読む