CSS

スポンサーリンク
CSS

【コピペOK】CSSで作る動きのあるボタンのサンプル集

CSSアニメーションを使ったボタンのアイデア&サンプル集です。コピペ後、配色をお好みの色に変更して、ご利用ください。基本のCSSまずは基本となるCSSになります。全てのボタンで共通となりますので、まずはこちらをコピーしてください。基本2につ...
CSS

CSSでリンクを無効にする

レスポンシブサイトなど、どうしてもCSS側でリンクを無効にしたい時ってありますよね。そういうときは、CSSのプロパティの「 pointer-events 」を使うと便利です。リンクを無効にするリンクを有効にする逆に無効にしたリンクを有効にす...
CSS

【CSS】box-sizing で横幅がはみ出るのを防ぐ

CSSで、要素に padding(余白)、borderを指定した場合、その分が幅に反映される仕様です。例えば、下記のような style を指定している、要素があるとします。そうすると、上記要素「.box 」の横幅は、width+paddin...
CSS

親タグにCSSを追加・適用する

親タグにCSSを指定、追加する場合は、jQueryを使えば、簡単に対応できます。 例えば、あるボタンの親要素ごと非表示にしたい場合は、下記のように記載します。 サンプルHTML jQuery CSSのみで対応できるか? ちなみに、CSS...
CSS

レスポンシブデザインで【iframe】の高さを自動的に合わせる

Youtubeなどのを埋め込みたいとき、「iframe」で埋め込むことが多いと思います。埋め込む、iframeには高さを指定しますが、レスポンシブデザインで、画面が小さくなった時用にCSSで高さを指定する必要があります。当然ですが、heig...
CSS

【CSS】CSSの「メディアクエリ」はネスト(入れ子)できる

CSSでレスポンシブデザインなどを作成する場合、メディアクエリ、(@media only screen and~)を指定してコーディングすると思います。 私の場合、幅の切り替えのポイントは、下記のようにしています。 768px 600...
CSS

iPhone等、iOSのSafariでフォントが明朝体(Serif)になってしまう場合の対処法

CSSで、フォントの指定をゴシックに指定していても、iPhoneなどのiOSのサファリ上で、明朝体になってしまう現象が発生しました。font-familyに “ sans-serif  ”を指定する指定したフォントがiOSで表示できないフォ...
CSS

CSS3 transition が効かない

CSS3のtransition で下記のように指定してもが効かない時があります。 要素がdisplay: inlineの場合、効かないようです。 ですので、下記のように displayに「block」か「inline-block」を指定す...
CSS

横幅がはみ出てブラウザの横するロールバーが出てしまう

ちょっと初心者的なんですが、ハマってしまったのでメモです。 要素に対して、横幅100%にしているんですが、ブラウザからはみ出てしまいました。 marginやpadding、box-sizeing:no-border; を設定してもはみ出るよ...
CSS

CSSの Position:fixed; を指定した要素の上部に余白ができる

ヘッダーなどを固定するとき、通常は “ psition:fixed; ” を使うと思います。しかし、上部に余白が出てしまう事があります。その場合、次の要素の上マージン ” margin-top ” により、引っ張られる感じで、余白が付いてし...
スポンサーリンク