CSS– category –

親タグにCSSを指定、追加する場合は、jQueryを使えば、簡単に対応できます。 例えば、あるボタンの親要素ごと非表示にしたい場合は、下記のように記載します。 サンプルHTML [crayon-62b7b95965e42205799806/] jQuery [crayon-62b7b95965e49709714122/] 【...

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

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

単純に、無いフォントを指定してしまっている場合、明朝体（セリフ体）になってしまいます。 iOS　Safariのデフォルトフォントが「Serif」のようですので、次のような指定の仕方だとフォントが「明朝体（セリフ体）」になってしまいます。 [crayon-62b7b95...

CSS3のtransition で下記のように指定してもが効かない時があります。 [crayon-62b7b95966515513243395/] 要素がdisplay: inlineの場合、効かないようです。 ですので、下記のように displayに「block」か「inline-block」を指定すれば、動作するようにな...

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

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

Flexboxで子要素の上下揃えをしたいときは、下記のように　“ align-items ” で設定します。 [crayon-62b7b959667c2606323311/] 上記のみで上手く上下揃いができない場合、” margin ”の設定が原因の場合があります。 これは左右揃えの時も同じですが、” mar...

CSS3なら一つの要素に背景画像を複数指定できるので、 背景パターン切り替えごとに要素を追加しなくでもよくなる。 CSS [crayon-62b7b959668b4217929115/]  

背景色を指定したDIVの左上にGIF画像を表示する。 CSS [crayon-62b7b9596698d674012450/] ※画像URLを色指定の後に指定する必要があります。   下記でも大丈夫です。   [crayon-62b7b95966990948049013/]