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