Windows10でSassが使える環境を整える手順をご紹介いたします。 Sass(Syntactically Awesome StyleSheet)とは、より効率的にCSSが書けるように拡張されたCSSのメタ言語です。…
WindowsでSassが使える環境を構築する方法
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のみでマウスホバー…
CSSのみで要素の区切りを曲線(円弧)にする方法
CSSのみで以下のような円形の区切りを作る方法をご紹介いたします。 以前であれば、画像を設置する方法が一般的でしたが、CSSだけで実現することが可能になりました。 CSSで要素の区切りを曲線(円弧)にする方法 HTMLは…