CSS– category –
-
CSSの疑似要素 “before”や“after”内でHTMLは使える？
CSSの疑似要素 「 :before 」「 :after 」便利ですよね。 私もよく使うのですが、ふと「content""」にHTMLタグは使用できるのか？と思ってしまうことがありますが、結論から言うとHTMLタグの使用はできません。 「content""」内にタグを入れれば、HTMLコー... -
【CSS】flexレイアウトで子要素を可変にする
flexレイアウトで、子要素を可変にしたい時は、「 flex-grow 」を指定するのが簡単です。 子要素に、flex-growを指定します。 [crayon-65187de95307b311643782/] -
【コピペOK】CSSで作る動きのあるボタンのサンプル集
CSSアニメーションを使ったボタンのアイデア＆サンプル集です。コピペ後、配色をお好みの色に変更して、ご利用ください。 【基本のCSS】 まずは基本となるCSSになります。全てのボタンで共通となりますので、まずはこちらをコピーしてください。 基本2につ... -
CSSでリンクを無効にする
レスポンシブサイトなど、どうしてもCSS側でリンクを無効にしたい時ってありますよね。 そういうときは、CSSのプロパティの「 pointer-events 」を使うと便利です。 【リンクを無効にする】 [crayon-65187de9535fb911743242/] 【リンクを有効にする】 逆に... -
【CSS】box-sizing で横幅がはみ出るのを防ぐ
CSSで、要素に padding（余白）、borderを指定した場合、その分が幅に反映される仕様です。 例えば、下記のような style を指定している、要素があるとします。 [crayon-65187de953791882141729/] そうすると、上記要素「.box 」の横幅は、width＋padding... -
親タグにCSSを追加・適用する
親タグにCSSを指定、追加する場合は、jQueryを使えば、簡単に対応できます。 例えば、あるボタンの親要素ごと非表示にしたい場合は、下記のように記載します。 サンプルHTML [crayon-65187de9539ca441063269/] jQuery [crayon-65187de9539cd508882747/] 【... -
レスポンシブデザインで【iframe】の高さを自動的に合わせる
Youtubeなどのを埋め込みたいとき、「iframe」で埋め込むことが多いと思います。 埋め込む、iframeには高さを指定しますが、レスポンシブデザインで、画面が小さくなった時用にCSSで高さを指定する必要があります。 当然ですが、height（高さ）を「100%」... -
【CSS】CSSの「メディアクエリ」はネスト（入れ子）できる
CSSでレスポンシブデザインなどを作成する場合、メディアクエリ、（@media only screen and～）を指定してコーディングすると思います。 私の場合、幅の切り替えのポイントは、下記のようにしています。 768px 600px 414px 375px 320px 768px を基準に設定... -
iPhone等、iOSのSafariでフォントが明朝体（Serif）になってしまう場合の対処法
CSSで、フォントの指定をゴシックに指定していても、iPhoneなどのiOSのサファリ上で、明朝体になってしまう現象が発生しました。 【font-familyに “ sans-serif ”を指定する】 指定したフォントがiOSで表示できないフォントだけを指定してしまってい... -
CSS3 transition が効かない
CSS3のtransition で下記のように指定してもが効かない時があります。 [crayon-65187de954023718147885/] 要素がdisplay: inlineの場合、効かないようです。 ですので、下記のように displayに「block」か「inline-block」を指定すれば、動作するようにな...
12