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