要素をposition:fixed;で固定表示する際は、通常はブラウザを基準に配置することが多いと思います。 先日対応した案件で、ページトップへのボタンをブラウザの幅に関係なく親要素から○○px離れた位置に固定したい、と…
position:fixedで固定する位置を親要素基準にする方法
読み込むだけで見出しやフォームなどの見た目を整えてくれるスタイルシート「sakura」
sakuraは、CSSファイルを読み込むだけで、見出しやフォームなどの見た目を整えてくれるスタイルシートです。 デモは以下で確認できます。 デモページを見る sakuraの使い方 HTMLの<head>～&l…
PCとスマホで別々のスタイルシートを読み込む方法
PCからアクセスした場合とスマホからアクセスした場合で、読み込むスタイルシートを切り替える方法をご紹介いたします。 PCとスマホで別々のスタイルシートを読み込む方法 スタイルシートを読み込むlink要素のmedia属性に…
Photoshopの透明背景っぽい背景をCSSで実装する方法
Photoshopの透明背景っぽい背景をCSSだけで実装する方法をご紹介いたします。↓こういう背景ですね。 以下にデモも用意しましたので、ご確認いただければと思います。ページを開くと全体がPhotoshopの透明背景っぽ…
Photoshopで加工したような効果を加えることができるCSSブレンドモード「mix-blend-mode」と「background-blend-mode」
CSSブレンドモードというのは、重なり合う要素をどのようにブレンドするかをCSSで指定できるプロパティで、要素そのものに効果を指定する「mix-blend-mode」と背景の要素に効果を加える「background-bl…
Facebookも実装しているインターフェイスプレビューが導入できるスタイルシート「mocka」
mockaは、インターフェイスプレビューに対応するためのスタイルシートです。インターフェイスプレビューというのは、コンテンツが表示されるまでの間に、ダミーのコンテンツを表示しておく手法です。事前に表示される予定のコンテン…
1行追加するだけ！CSSで文字に蛍光ペン風のアンダーラインを引く方法
CSSを使って、文字に蛍光ペン風のアンダーラインを引く方法をご紹介いたします。紹介するコードをコピペすると、以下のようなアンダーラインをつけることができます。 蛍光ペン風のアンダーライン CSSで文字に蛍光ペン風のアンダ…
よくあるご質問やFAQの見た目をCSSでそれっぽく調整する
よくあるご質問やFAQなどのコンテンツをサクッとそれっぽい見た目に仕上げる方法をご紹介いたします。 紹介するCSSをコピペすれば、以下デモページのような見た目にすることができます。 デモページを見る よくあるご質問やFA…
間違った使い方をしているHTMLをハイライトしてくれるスタイルシート「debugCSS」
debugCSSは、仕様に反する使い方をしているHTMLをハイライトしてくれるスタイルシートです。CSSファイルを読み込むと、間違った使い方をしているHTMLがあったら、ハイライトして知らせてくれます。 デモはこちらから…
CSSだけで斜めの背景を実現する方法
CSSだけで、以下のページのような斜めの背景を実現する方法をご紹介いたします。 Skewed background with CSS CSSだけで斜めの背景を実現する方法 CSSで斜めの背景を実装するには、transfo…