CSS
途中からヘッダー固定にする方法！画面上部までスクロールされたら固定する
途中からヘッダー固定にする方法の紹介です。 スクロールしてグローバルメニューが画面の上部に達した時に固定するという動きを実装していきます。 実際の動きとしてはこんな感じです。 途中からヘッダー固定にす…
はにわまん 
動画をヒーローイメージのように画面いっぱいに背景表示させるCSS
背景に動画を使うための方法を紹介していきます。厳密には背景は画像しか指定できないので、「背景っぽく」CSSで表現するって感じですね。 この記事ではファーストビューの画面いっぱいに動画を表示させるための…
CSSを理解するためのWebサービス2つとおすすめ書籍を5冊
この記事ではCSSを理解するためのWebサービスとおすすめの書籍を紹介します。 基本的には手を動かして体験しまくって、自分の頭でイメージできるようになって身につくものだと思います。 CSSの基礎は無料…
CSSで倍率を表現する「%」と「em」はどう違う？特徴と用途のまとめ
レスポンシブサイトを主流になって、CSSでの表現で「%」と「em」がよく使われるようになりました。この2つの値は両方とも倍率を表すものです。 マスターするポイントとしては、「どこの値に対する倍率か？」…
レスポンシブのブレークポイントの決め方！PCデザインカンプから再現する際のベスト
「ブレークポイントをどうしよう…」、レスポンシブデザインでは常に悩みの種かもしれません。日頃コーダーとしてデザインカンプからPCデザインだけ渡されて「スマホもレスポンシブでいい感じによろし…
CSSでテーブルを作る上で実践的に覚えておきたいこと
CSSのテーブルは癖が強いというか、どういう風な仕組みで動いているか分かりにくいCSSにプロパティだと思います。 よくあるのは、レスポンシブ時にはみ出る、、、というやつですね。もともとテーブルとスマホ…
日本語の縦書きサイトで使うCSSプロパティと注意点
縦書きのサイトを作るときのCSSの使い方と注意点についてまとめました。 癖が強いので、ブラウザ間での差異がないかのチェックは入念にしておいた方がいいかもしれません。 縦書きにするCSSの指定方法 以下…
CSSで変数っぽく使えるインクリメント変数で連番がスマートに！
CSSは基本的に変数は使えませんが、連番を表現するときは動的に順番の「値（数字）」を取得してくれる関数？値？が用意されています。 よくあるのは、ブログとかのランキングで「○位」みたいな指定をするときで…
Webフォント（Googleフォント）の使い方！WindowsやMacに依存しないサイト制作
Webサイトで表示させるフォントには大きく分けると2つあります。 デバイスフォント ・・・ WindowsやMacなどのデバイスに依存 Webフォント ・・・ ネットワーク上からフォントデータを取得 …
CSSの「calc」と「nth-child」を組み合わせて余白を意識した横並び
レスポンシブサイトでアイテムを横並びにする時のCSSの指定方法です。ウインドウサイズを変更したときに、ガタガタせずにスムーズに均等に縮めたりするには、CSSのcalc関数を使って余白を計算させながらパ…