CSS BoxShadow Generatorは、box-shadowのスタイルを生成できるジェネレーターです。 各種値を入力していくだけで、box-shadowのコードをリアルタイムに生成してくれます。 CSS Box…
CSSのみで要素を六角形にする方法
CSSを使って要素を六角形にする方法をご紹介いたします。 画像を使わなくても六角形を実装できるので、背景色を変えたい時などにCSSの修正のみで対応できるようになります。 CSSのみで六角形を実装する方法 上記のような六角…
CSSセレクタの詳細度を確認できるWebサービス「Specificity Calculator」
Specificity Calculatorは、CSSセレクタの詳細度を確認できるWebサービスです。 CSSでは、セレクタの詳細度が高い方を優先して適用する仕組みになっています。例えば、「.content」よりも「p.…
親要素に横幅が指定されている場合に特定の子要素だけ横幅をブラウザいっぱいまで広げるためのCSS
親要素に横幅が指定されている場合でも、部分的に親要素をはみ出してブラウザ幅いっぱいに広げる方法をご紹介いたします。 文字にするとよくわからないと思いますが、例えば基本の横幅は1000pxで1箇所だけブラウザ幅に合わせて横…
CSSとjQueryでセレクトボックスのテキストを中央寄せにする方法
CSS+jQueryを使ってセレクトボックスのテキストを中央寄せにする方法をご紹介いたします。 jQueryを使って選択されたオプションを動的に代入することで、選択中のオプションの表示にも対応しています。 jQueryを…
スマホとタブレットで:hoverの挙動を無効化する方法
スマホやタブレット等のタッチデバイスでは、リンクやボタンに指定した:hoverのスタイルが邪魔になるケースがあります。というか、タッチデバイスでは:hoverの挙動は不要ですよね。 タッチデバイスでのみ、一括して:hov…
jQueryに頼らず、JavaScriptとCSSアニメーションでスクロールエフェクトを実装する方法
jQueryを使わずにスクロールアニメーションを実装する方法をご紹介いたします。スクロールしていって可視範囲に要素が入ったら、ふわっとアニメーションしながら表示させます。 意外とコード量は少なくて済むので、スクロールアニ…
脱jQuery!素のJavaScriptでローディング画面を実装する方法
jQueryなしでサイトにローディング画面を実装する方法をご紹介いたします。 挙動については以下デモページをご参照ください。 デモページを見る 素のJavaScriptでローディング画面を実装する方法 ステップ1. HT…
input[type=”file”]の見た目を変更して選択ファイル名の表示やクリアにも対応させる方法
フォームでファイルを選択して送信できるようにするためには、以下のようなinput[type=”file”]を使うと思います。 このinput要素、デフォルトの見た目がイケてないですよね。Chrom…
項目と値を入力するだけでCSSによる円グラフのコードを作成してくれるWebサービス「CSS Pie Chart Generator」
CSS Pie Chart Generatorは、項目と値を入力していくだけで、CSSによって作られた円グラフのコードを生成してくれるWebサービスです。 ちょっとした円グラフをサイトに掲載したい時に便利です。ただ、後述…