CSS
ページトップボタンを配置する方法(位置)として、6つのパターンを紹介します。 JavaScriptは使わず、(HTMLと)CSSのみで実装します。 冒頭からクソ長いお気持ち表明を書いてしまったので、結論だけ知りたい人は下のcodepenの埋め込みまでスクロールしてく…
CSSでスクロールバーの色とかを変えたりできる。何でもはできないけど。 See the Pen Untitled by nakasu (@nakasu) on CodePen. webkit系 SafariやChromeは以下のようにしてカスタマイズ可能。 bodyのスクロールバーをカスタマイズしている。 body::-webkit…
各ブラウザのみで有効なCSSと記述するためのCSSハック方法のまとめ。 OS別の対応にはJavaScriptライブラリ使えばよさげ。 はじめに 以下のサイトで赤く表示されている方法が、現在開いているブラウザで有効な方法らしい: browserstrangeness.github.io 以下…
ヘッダーにある「ハンバーガーメニューアイコン」やフッターにある「トップへ戻るボタン」を、width を設定せず max-width のみを設定しているレスポンシブルなコンテンツ内の右端に固定する方法。 sample code See the Pen by nakasu (@nakasu) on CodePen.…
ギザギザというかジグザグのスタイルを作った。 See the Pen zigzag by nakasu (@nakasu) on CodePen. コード zigzag というクラス名の要素の擬似要素 :before や :after にジグザグを作る。 HTML: <div class="zigzag"> ジグザグ </div> scss: @mixin zigzag($color, $height, $positi…
ページの幅が小さくなったときに画像がはみ出る場合に、上左で合わせるのではなく中央に合わせる方法です。 下の埋め込みのResultだとページの幅を変えられないので、右上の「EDIT ON CODEPEN」をクリックして編集ページでウインドウ幅を変えてみてください…