CSSアニメーションを使って、要素をクルッと回転させる方法をご紹介いたします。 簡単なデモページを作成したので、動きについては以下デモページをご確認ください。 デモページを見る CSSアニメーションで要素をクルッと回転さ…
CSSアニメーションで要素をクルッと回転させる方法
日本語Webフォント「Noto Sans JP」の導入手順
日本語Webフォントの「Noto Sans JP」をサイトで使うための手順をご紹介いたします。 簡単に綺麗なWebフォントが導入できますので、Webフォントの導入を検討されている方は、ぜひお試しください。 Noto Sa…
CSSのみでメガメニューを実装する方法
jQueryプラグインなどを使わずに、CSSのみでメガメニューを実装する方法をご紹介いたします。 以下デモページのようなメガメニューを作成します。デモページでは、”メニュー1″にマウスホバーすると…
簡単に装飾されたチェックボックスが実装できるCSSライブラリ「CSS Checkbox Library」
CSS Checkbox Libraryは、チェックボックスを装飾するためのCSSライブラリです。CSSファイルを読み込んで、チェックボックスを内包する要素にクラスを追加するだけで、装飾されたチェックボックスを実装するこ…
CSSで作る三角形のコードが生成できるWEBサービス「CSS三角形作成ツール」
CSS三角形作成ツールは、三角形のCSSコードを生成することができるジェネレーターです。三角形のタイプや大きさを指定するだけで、三角形を実現するためのCSSコードが取得できます。 CSS三角形作成ツールの使い方 CSS三…
CSSのみで画像の右クリックを禁止する方法
以前、JavaScriptやjQueryを使って右クリックを禁止する方法をご紹介しましたが、今回はCSSのみで画像の右クリックを禁止する方法をご紹介いたします。 CSSのみで画像の右クリックを禁止する方法 CSSで画像の…
position:fixedで固定する位置を親要素基準にする方法
要素をposition:fixed;で固定表示する際は、通常はブラウザを基準に配置することが多いと思います。 先日対応した案件で、ページトップへのボタンをブラウザの幅に関係なく親要素から○○px離れた位置に固定したい、と…
読み込むだけで見出しやフォームなどの見た目を整えてくれるスタイルシート「sakura」
sakuraは、CSSファイルを読み込むだけで、見出しやフォームなどの見た目を整えてくれるスタイルシートです。 デモは以下で確認できます。 デモページを見る sakuraの使い方 HTMLの<head>～&l…
PCとスマホで別々のスタイルシートを読み込む方法
PCからアクセスした場合とスマホからアクセスした場合で、読み込むスタイルシートを切り替える方法をご紹介いたします。 PCとスマホで別々のスタイルシートを読み込む方法 スタイルシートを読み込むlink要素のmedia属性に…
Photoshopの透明背景っぽい背景をCSSで実装する方法
Photoshopの透明背景っぽい背景をCSSだけで実装する方法をご紹介いたします。↓こういう背景ですね。 以下にデモも用意しましたので、ご確認いただければと思います。ページを開くと全体がPhotoshopの透明背景っぽ…