JS でデバイス判定して viewport 設定

スマホでは width=device-width  を指定し、それ以外ではwidth=1200（最低表示させたいサイズ）を指定 [crayon-5bc639903dd9d987488104/] コ...

HTML / CSS / JavaScript 　2018.10.9　お母ちゃん

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

font-awesome で アイコン選択にしてみた。 @media only screen and (max-width: 749px) { .cp_embed_wrapper ifra...

HTML / CSS / JavaScript 　2018.10.3　お母ちゃん

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

はみ出しているコンテンツは何もないのに右側に謎の余白が出来て左右に動いてしまうときの対処法 [crayon-5bc639903e2e0172434037/] ※ max-width: 749px ...

HTML / CSS / JavaScript 　2018.9.30　お母ちゃん

動画背景の上に、動画の再生位置に合わせて画像・テキストを表示する

動画背景の再生位置に合わせて画像やテキスト表示する See the Pen QZwjzw by HomeMadeGarbage (@hmg) on CodePen.  timeupdate ,...

HTML / CSS / JavaScript 　2018.9.29　お母ちゃん

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

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

HTML / CSS / JavaScript 　2018.9.5　お母ちゃん

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

video タグだと Chrome で動かなかったので video.js を使いました。 video.js Video.js: The Player Framework  CDNを利用...

HTML / CSS / JavaScript 　2018.8.21　お母ちゃん

position:fixed によるアンカーリンクへの位置ずれ対策

１． [crayon-5bc639903e768927571412/]   ２． [crayon-5bc639903e76b488580750/] １でうまくいかなかったページで、...

HTML / CSS / JavaScript 　2017.12.4　お母ちゃん

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

background-size:cover; と同じように、 縦横比を保持 表示領域いっぱい 中央寄せ 表示 See the Pen canvasに画像貼り付け by Hom...

HTML / CSS / JavaScript 　2017.11.16　お母ちゃん

PhoneGap を Android 実機でデバッグ

エミュレータ環境を作成したけど、エミュレータでも動作するのにやはりAndroid 実機では動かない…。 PhoneGap build からではなく、$ phonegap run android で試...

HTML / CSS / JavaScript 　2017.11.13　お母ちゃん

PhoneGap に Canvas2ImagePlugin インストール

メモ。 PhoneGap に Canvas2ImagePlugin をインストールしようとしたところ、 [crayon-5bc639903eb5b818902354/] のコマンドが [cra...

HTML / CSS / JavaScript 　2017.11.12　お母ちゃん