背景のあるボックス要素のボーダーを背景と重ならないように指定する方法

CSSのbackgrond-imageで指定した画像はボックス要素の境界線(border)やpaddingの余白部分にも重なって表示されます。この重なり方を変更することができるCSSが、background-clipです[…]

CSS | Posted on 2017/02/25 17:37

固定ヘッダー使用時にページ内リンクのための余白を空ける方法

position:fixed;を使用したスティッキーヘッダーを設置したとき、ヘッダー部分と内部リンクのジャンプ先の要素が重なってしまうことがあります。WordPressの管理画面にログインした状態でプレビューすると、ペー[…]

CSS | Posted on 2017/02/24 18:51

transform: skewを利用した斜めに傾いたグローバルナビゲーションの作り方

ひさしぶりにCSSの小ネタを紹介します。 CSS3のtransformを利用して、斜めに傾いているグローバルナビゲーションを作ります。 とりあえず↓のcodepenのデモをご覧ください。 See the Pen tran[…]

CSS | Posted on 2016/03/28 20:38

疑似クラス nth-child で特定の範囲の要素を指定する方法

今日はCSSの小ネタを紹介します。 CSSには「nth-child」という疑似クラスがあり、先頭からXX番目の要素を選択したいときなどに使われます。 ここで順序リストのHTMLをサンプルとしてとりあげます。 [crayo[…]

CSS | Posted on 2016/01/16 17:36

background-position で「右から」とか「下から」などを指定する方法

CSS2.1ではbackground-positionプロパティを使用したさい、左から何ピクセル、上から何ピクセルといったように左や上からしか位置を指定できませんでしたが、CSS3になり、右から何ピクセル、下から何ピクセ[…]

CSS | Posted on 2014/11/18 20:24

スマホサイトで端末の向きによらず文字サイズを固定する方法

最近、RWDのコーディングをする機会があって、普段は使わないiPhoneのsafariとにらめっこしましてした。RWDについては詳しいサイトや参考書があるので、それを参考にしてください、ということで、コーディングの段階で[…]

CSS | Posted on 2014/03/23 13:57