CSS– category –
-
親タグにCSSを追加・適用する
親タグにCSSを指定、追加する場合は、jQueryを使えば、簡単に対応できます。 例えば、あるボタンの親要素ごと非表示にしたい場合は、下記のように記載します。 サンプルHTML [crayon-67ba028cf008c160887387/] jQuery [crayon-67ba028cf0092266457388/] 【... -
レスポンシブデザインで【iframe】の高さを自動的に合わせる
Youtubeなどのを埋め込みたいとき、「iframe」で埋め込むことが多いと思います。 埋め込む、iframeには高さを指定しますが、レスポンシブデザインで、画面が小さくなった時用にCSSで高さを指定する必要があります。 当然ですが、height（高さ）を「100%」... -
iPhone等、iOSのSafariでフォントが明朝体（Serif）になってしまう場合の対処法
CSSで、フォントの指定をゴシックに指定していても、iPhoneなどのiOSのサファリ上で、明朝体になってしまう現象が発生しました。 【font-familyに “ sans-serif ”を指定する】 指定したフォントがiOSで表示できないフォントだけを指定してしまってい... -
CSS3 transition が効かない
CSS3のtransition で下記のように指定してもが効かない時があります。 [crayon-67ba028cf09d5269487195/] 要素がdisplay: inlineの場合、効かないようです。 ですので、下記のように displayに「block」か「inline-block」を指定すれば、動作するようにな... -
横幅がはみ出てブラウザの横するロールバーが出てしまう
ちょっと初心者的なんですが、ハマってしまったのでメモです。 要素に対して、横幅100％にしているんですが、ブラウザからはみ出てしまいました。 marginやpadding、box-sizeing:no-border; を設定してもはみ出るようで、Chromeの開発パネルで検証を行う... -
CSSの Position:fixed; を指定した要素の上部に余白ができる
ヘッダーなどを固定するとき、通常は “ psition:fixed; ” を使うと思います。しかし、上部に余白が出てしまう事があります。 その場合、次の要素の上マージン ” margin-top ” により、引っ張られる感じで、余白が付いてしまう場合が多いです。 例えば、要... -
【CSS】flexboxの上下揃え（align-items）の設定が効かない
Flexboxで子要素の上下揃えが効かない！って時ないですか？ Flexboxで子要素の上下揃えをしたいときは、下記のように “ align-items ” で設定します。 [crayon-67ba028cf0ecf053550238/] 上記のみで上手く上下揃いができない場合、” margin ”の設定が原因... -
[css3] backgroundで背景画像を複数指定する
CSS3なら一つの要素に背景画像を複数指定できるので、 背景パターン切り替えごとに要素を追加しなくでもよくなる。 CSS [crayon-67ba028cf108d455055360/] -
【CSS】1つの要素に「背景色」と「背景画像」どちらも設定する
背景色を指定したDIVの左上にGIF画像を表示する。CSS [crayon-67ba028cf1201419600711/] ※画像URLを色指定の後に指定する必要があります。 下記でも大丈夫です。 [crayon-67ba028cf1204251518691/]
12