CSSで変数(カスタムプロパティ)を使う方法をご紹介いたします。 CSSで変数を使おうと思ったら、SassやLESSなどを使う必要がありましたが、IE以外の主要ブラウザでは通常のCSS内で変数が利用可能です。 CSS変数…
CSSで変数(カスタムプロパティ)を使う方法
WindowsでSassが使える環境を構築する方法
Windows10でSassが使える環境を整える手順をご紹介いたします。 Sass(Syntactically Awesome StyleSheet)とは、より効率的にCSSが書けるように拡張されたCSSのメタ言語です。…
CSSを使って1行のテキストで均等割付・両端揃えを実現する方法
1行のテキストで均等割付・両端揃えを実装する方法をご紹介いたします。CSSのみで実現でき、表などで活用できるので覚えておくと便利かと思います。 CSSを使って1行のテキストで均等割付・両端揃えを実現する方法 以下のような…
CSSを使って電話発信用のリンクをPCで無効化する方法
a要素のhref属性に「tel:電話番号」を入れることで、スマホ等でリンクをタップした際に電話発信ができます。 スマホの場合は直接電話がかけられて便利ですが、PCではクリックできないようにしたいというケースも多いかと思い…
CSSでフォームのプレースホルダーの文字色を変更する方法
フォームの入力欄に表示されているプレースホルダーの色をCSSで変更する方法をご紹介いたします。 CSSでフォームのプレースホルダーの色を変更する方法 何も指定していない場合は、以下のように少し薄めの色でプレースホルダーが…
CSSのみでページ内リンクのスムーススクロールを実現する方法
CSSだけでページ内リンクのスムーススクロールを実装する方法をご紹介いたします。 まだ、サポートしているブラウザは少ないですが、scroll-behaviorプロパティを使った方法です。 CSSのみでページ内リンクのスム…
CSSだけでカルーセルっぽい横スクロールを実装する方法
CSSだけで、カルーセル風の横スクロールを実現する方法をご紹介いたします。 以下のように右側に要素が続いていることを示しつつ、横スクロールできるようにCSSでスタイリングします。 特にスマホなどで横幅を超えてしまうけどレ…
アニメーション付きのハンバーガーメニューを簡単に設置できるスタイルシート「Hamburgers」
Hamburgersは、クラスを付与するだけで、様々なアニメーションに対応したハンバーガーメニュを実装できるスタイルシートです。 挙動については、以下デモページにてご確認いただけます。 デモページを見る Hamburge…
リンクのクリック可能範囲を広げるためのCSSテクニック
よくある以下のようなリストで、ボタンのみにリンクが付いている場合に、リンクのクリック可能な範囲を広げる方法をご紹介いたします。 挙動については、以下デモページをご参照いただければと思います。 デモページを見る 通常のリン…
CSSのみでマウスホバーした要素以外の装飾を変更する方法
CSSのみで、マウスホバーした要素以外の要素を変化させる方法をご紹介いたします。 例えば、ナビゲーションリンクなどで、マウスホバーした要素以外の文字色を変えたり、透過させたりすることが可能です。 CSSのみでマウスホバー…