CSS シンプルなスマホナビゲーションの実装サンプル【CSS+jQuery】
モバイル表示の際に表示するシンプルなスマホナビゲーション（ドロワーメニュー）の実装サンプルです。ハンバーガーアイコンをクリックすると、ドロワーメニューが表示されるナビゲーションです。アイコンクリック時は、×にマークに変化するアニメーションも...
CSS
CSS 
CSS HTMLで画像がリンク切れの時（存在しない時）に画像を表示しないようにする
画像のリンクが存在しない場合に画像を表示しないようにするには、imgのHTMLタグに、「 onerror="this.style.display='none';" 」を追加するだけでシンプルで簡単に表示されないようにできます。HTML +...
CSS 【CSS】transitionでwidthを変化させたい時に幅が 0px にならない
CSSの「transition」プロパティを使用して、要素の幅を0pxに変化させたいときに、完全に0にならずに、少し残ってしまう場合があります。原因として、border などを指定している場合があります。元のCSSborder:0; にして...
CSS CSSでひとつの要素に複数の背景を指定する
一つのDIV要素などに複数の背景を指定したい時ってありますよね？例えば、四隅にそれぞれ違う画像を配置する場合などです。CSSでは複数の背景画像の指定も可能です。下記の場合は、3つの画像を指定しています。background-imageで指定...
CSS 絶対配置（position: absolute;）の要素を中央配置にする方法
親要素に対して、縦横（上下左右）を中央に配置する方法です。topとleftを50%に設定し、子要素（絶対配置されている要素）をtransformのtranslate(-50%, -50%)で調整します。こうすることで、要素が中央に配置されま...
CSS CSSのdisplay: inline-block を指定している要素を中央寄せにする方法
CSSの要素に「display: inline-block 」を指定していて、中央寄せにする場合、” text-align: center; ”や ” 左右のmarginをauto （ margin:0 auto; ）にしても中央寄せになり...
CSS CSSの疑似要素 “before”や“after”内でHTMLは使える？
CSSの疑似要素 「 :before 」「 :after 」便利ですよね。私もよく使うのですが、ふと「content""」にHTMLタグは使用できるのか？と思ってしまうことがありますが、結論から言うとHTMLタグの使用はできません。「con...
CSS 【CSS】flexレイアウトで子要素を可変にする
flexレイアウトで、子要素を可変にしたい時は、「 flex-grow 」を指定するのが簡単です。子要素に、flex-growを指定します。
CSS 【コピペOK】CSSで作る動きのあるボタンのサンプル集
CSSアニメーションを使ったボタンのアイデア＆サンプル集です。コピペ後、配色をお好みの色に変更して、ご利用ください。基本のCSSまずは基本となるCSSになります。全てのボタンで共通となりますので、まずはこちらをコピーしてください。基本2につ...
CSS CSSでリンクを無効にする
レスポンシブサイトなど、どうしてもCSS側でリンクを無効にしたい時ってありますよね。そういうときは、CSSのプロパティの「 pointer-events 」を使うと便利です。リンクを無効にするリンクを有効にする逆に無効にしたリンクを有効にす...