css
[CSSメモ] ネガティブマージンが効かない時
ネガティブマージンを指定して親要素から両端をはみ出させたいのだけど、左ははみ出るが右だけ効かなくて少しはまった・・ 原因は要素に max-width: 100% が指定されていたこと。 そのため100% 以上に広がれず、左寄りになってしまっていたのだった・・ 要素に max-width: no...
Web 2019.12.27 お母ちゃん 
[css animation] フェードイン・フェードアウト の keyframes
css の animation で フェードイン・フェードアウト フェードイン See the Pen [css animation] フェードイン・フェードアウト の keyframes by HomeMadeGarbage (@hmg) on CodePen. フェードアウト Se...
Web 2019.8.27 お母ちゃん 
HTML と CSS だけでラジオボタンの画像選択 & 選択状態
font-awesome で アイコン選択にしてみた。 See the Pen ラジオボタンの画像選択 & 選択状態をCSSだけで実装 by HomeMadeGarbage (@hmg) on CodePen. 切り替わるテキストは position: fixed; で指...
Web 2018.10.3 お母ちゃん
レスポンシブサイトのスマホ表示で左右に動いてしまうときの対処法
はみ出しているコンテンツは何もないのに右側に謎の余白が出来て左右に動いてしまうときの対処法 @media screen and (max-width: 749px) { html,body { overflow-x: hidden; } } ※ max-width: 7...
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 <link href="https://vjs.zencdn.net...
Web 2018.8.21 お母ちゃん
固定ヘッダのアンカーズレ対応
１． var pageHash = location.hash if(pageHash) { let _h = $('header').innerHeight(); var position = $(pageHash).offset().top - _h ; ...
Web 2017.12.4 お母ちゃん
canvas に 縦横いっぱい＆センタリングで画像を貼り付け
background-size:cover; と同じように、 縦横比を保持 表示領域いっぱい 中央寄せ 表示 See the Pen canvasに画像貼り付け by HomeMadeGarbage (@hmg) on CodePen. さんすうﾑｽﾞｶｼｰ...
Web 2017.11.16 お母ちゃん
Materialize & Sass でマテリアルデザインのウェブサイトを作ってみる
フレームワーク選びはこちらのページが参考になりました！ [bc url="http://eng-entrance.com/css-framework"] SASSのインストール RubyGemsをアップデートする $ sudo gem update --system Password: ...
PC / スマホ 2016.10.8 お母ちゃん
