border-bottomなどで付けた線の色を途中で変える方法をご紹介いたします。 以下のような線を実装することができます。 CSSでborderの線の色を途中から変更する方法 borderの線の色を途中で変えるには、:…
テキストは左揃えにしたまま要素を中央寄せにする方法
テキストは左揃えのまま、要素全体は中央寄せにする方法をご紹介いたします。文字にするとわかりにくいですが、以下のような状態をCSSで実現する方法です。 テキストは左揃えにしたまま要素を中央寄せにする方法 以下のようなHTM…
CSSでスタイルをIEのみ・Firefoxのみ・Chromeのみ・Safariのみに適用する方法
各ブラウザのみにスタイルを適用する方法をご紹介いたします。 IEのみ表示が崩れるとか、Firefoxのみ違うサイズにしたい、といった場合に使えるCSSハックです。 CSSでスタイルを各ブラウザのみに適用させる方法 IEだ…
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のみで画像の右クリックを禁止する方法
以前、JavaScriptやjQueryを使って右クリックを禁止する方法をご紹介しましたが、今回はCSSのみで画像の右クリックを禁止する方法をご紹介いたします。 CSSのみで画像の右クリックを禁止する方法 CSSで画像の…
position:fixedで固定する位置を親要素基準にする方法
要素をposition:fixed;で固定表示する際は、通常はブラウザを基準に配置することが多いと思います。 先日対応した案件で、ページトップへのボタンをブラウザの幅に関係なく親要素から○○px離れた位置に固定したい、と…
読み込むだけで見出しやフォームなどの見た目を整えてくれるスタイルシート「sakura」
sakuraは、CSSファイルを読み込むだけで、見出しやフォームなどの見た目を整えてくれるスタイルシートです。 デモは以下で確認できます。 デモページを見る sakuraの使い方 HTMLの<head>~&l…