スムースムース WordPress、HTML、CSS、PHPなどのWEBデザイン、マウスやキーボードなどガジェットの紹介
単純に、無いフォントを指定してしまっている場合、明朝体（セリフ体）になってしまいます。 iOS Safariのデフォルトフォントが「Serif」のようですので、次のような指定の仕方だとフォントが「明朝体（セリフ体）」になってしまいます。 [crayon-607b42bd81ec1944969617/] ですので、次のように、きちんと「Serif」を指定する必要があります。 [crayon-607b […]
下記のように指定してもアニメーションが効かない時があります。 [crayon-607b42bd821e6236173769/] 要素がdisplay: inlineの場合、効かないようです。 ですので、下記のように displayに「block」か「inline-block」を指定すれば、動作するようになります。 [crayon-607b42bd821e9442047884/]
ちょっと初心者的なんですが、ハマってしまったのでメモです。 要素に対して、横幅100％にしているんですが、ブラウザからはみ出てしまいました。 marginやpadding、box-sizeing:no-border; を設定してもはみ出るようで、Chromeの開発パネルで検証を行うとどうやら、body要素が問題っぽい。 調べてみると下記のように、htmlに「overflow: auto;」、bod […]
ヘッダーなどを固定するとき、通常は “ psition:fixed; ” を使うと思います。 しかし、上部に余白が出てしまう事があります。 その場合、次の要素の上マージン ” margin-top ” により、引っ張られる感じで、余白が付いてしまう場合が多いです。 例えば、要素 “header” に “ position:fixed; ” 、 次の要素、contents を固定ヘッダー分下げようと […]
Flexboxで子要素の上下揃えをしたいときは、下記のように “ align-items ” で設定します。 [crayon-607b42bd82527103235824/] 上記のみで上手く上下揃いができない場合、” margin ”の設定が原因の場合があります。 これは左右揃えの時も同じですが、” margin : auto ; ” を指定していると上手く設定できません。 ですので、子要素側に […]
CSS3なら一つの要素に背景画像を複数指定できるので、 背景パターン切り替えごとに要素を追加しなくでもよくなる。 CSS [crayon-607b42bd82648560725982/]
背景色を指定したDIVの左上にGIF画像を表示する。 CSS [crayon-607b42bd82755985896097/] ※画像URLを色指定の後に指定する必要があります。 下記でも大丈夫です。 [crayon-607b42bd82757230168877/] [crayon-607b42bd82759843673149/] [crayon-607b42bd8275a44190 […]
