HomeMadeGarbage Loading

css

ホーム
電子工作
Raspberry Pi
IOT
音楽
Home > css
[CSSメモ] ネガティブマージンが効かない時

ネガティブマージンを指定して親要素から両端をはみ出させたいのだけど、左ははみ出るが右だけ効かなくて少しはまった・・ 原因は要素に max-width: 100% が指定されていたこと。 そのため100% 以上に広がれず、左寄りになってしまっていたのだった・・ 要素に max-width: none で解除して解決。...

Web 2019.12.27 お母ちゃん Avatar photo

[css animation] フェードイン・フェードアウト の keyframes

css の animation で フェードイン・フェードアウト フェードイン See the Pen [css animation] フェードイン・フェードアウト の keyframes by HomeMadeGarbage (@hmg) on CodePen. フェードアウト See the Pen フェードアウト by HomeMadeGarbage (@hmg) on CodePen. animation-delay: 1s; アニメーションが開始するまでのディレイ...

Web 2019.8.27 お母ちゃん

HTML と CSS だけでラジオボタンの画像選択 & 選択状態

font-awesome で アイコン選択にしてみた。 See the Pen ラジオボタンの画像選択 & 選択状態をCSSだけで実装 by HomeMadeGarbage (@hmg) on CodePen. 切り替わるテキストは position: fixed; で指定しているので実際は使えなさそう。 ソースコード head font-awsome  [crayon-638ac28f3f23d182743845/] HTML [crayon-638ac...

Web 2018.10.3 お母ちゃん

レスポンシブサイトのスマホ表示で左右に動いてしまうときの対処法

はみ出しているコンテンツは何もないのに右側に謎の余白が出来て左右に動いてしまうときの対処法 [crayon-638ac28f3f6e8830392669/] ※ max-width: 749px のところはサイトのブレークポイント...

Web 2018.9.30 お母ちゃん

セレクトボックスで表示切り替え

セレクトボックスで要素の表示をフェード切り替え See the Pen ZMKLJj by HomeMadeGarbage (@hmg) on CodePen....

Web 2018.9.5 お母ちゃん

横幅いっぱいmp4のレスポンシブ背景(キービジュアルなど)

video タグだと Chrome で動かなかったので video.js を使いました。 video.js Video.js: The Player Framework  CDNを利用する場合 head  [crayon-638ac28f3f8dd110213229/] body の上 [crayon-638ac28f3f8e2785022246/] HTML [crayon-638ac28f3f8e3119140572/] CSS [crayon-638ac28...

Web 2018.8.21 お母ちゃん

固定ヘッダのアンカーズレ対応

1. [crayon-638ac28f3fadc610426971/]   2. [crayon-638ac28f3fae1571559607/] 1でうまくいかなかったページで、、(zoomされていたり色々調整されていた)  ...

Web 2017.12.4 お母ちゃん

canvas に 縦横いっぱい&センタリングで画像を貼り付け

background-size:cover; と同じように、 縦横比を保持 表示領域いっぱい 中央寄せ 表示 See the Pen canvasに画像貼り付け by HomeMadeGarbage (@hmg) on CodePen. さんすうムズカシー...

Web 2017.11.16 お母ちゃん

Materialize & Sass でマテリアルデザインのウェブサイトを作ってみる

フレームワーク選びはこちらのページが参考になりました! SASSのインストール RubyGemsをアップデートする [crayon-638ac28f3fc7d029085149/] ここは省略可能だそうです。 Sass のインストール [crayon-638ac28f3fc81720132497/] ※ OS X 10.11 (El Capitan)  だと、「sudo gem install sass」では下記のエラーが出ました。 [crayon-638ac28f3fc82...

PC / スマホ 2016.10.8 お母ちゃん