CSS CSSでリンクを無効にする
レスポンシブサイトなど、どうしてもCSS側でリンクを無効にしたい時ってありますよね。
そういうときは、CSSのプロパティの「 pointer-events 」を使うと便利です。
リンクを無効にする
リンクを有効に...
CSS
CSS CSS 【CSS】box-sizing で横幅がはみ出るのを防ぐ
CSSで、要素に padding（余白）、borderを指定した場合、その分が幅に反映される仕様です。
例えば、下記のような style を指定している、要素があるとします。
そうすると、上記要素「.box 」の横幅は...
CSS 親タグにCSSを追加・適用する
親タグにCSSを指定、追加する場合は、jQueryを使えば、簡単に対応できます。
例えば、あるボタンの親要素ごと非表示にしたい場合は、下記のように記載します。
サンプルHTML
jQuery
CSSのみで対応できるか？
ち...
CSS レスポンシブデザインで【iframe】の高さを自動的に合わせる
Youtubeなどのを埋め込みたいとき、「iframe」で埋め込むことが多いと思います。
埋め込む、iframeには高さを指定しますが、レスポンシブデザインで、画面が小さくなった時用にCSSで高さを指定する必要があります。
当然ですが、...
CSS 【CSS】CSSの「メディアクエリ」はネスト（入れ子）できる
CSSでレスポンシブデザインなどを作成する場合、メディアクエリ、（@media only screen and～）を指定してコーディングすると思います。
私の場合、幅の切り替えのポイントは、下記のようにしています。
768px
...
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 ” により、引っ張られる感じで、余白が付...
CSS Flexboxで上下揃えができない
Flexboxで子要素の上下揃えをしたいときは、下記のように “ align-items ” で設定します。
上記のみで上手く上下揃いができない場合、” margin ”の設定が原因の場合があります。
これは左右揃えの時も同じですが、” ...