transform:scale() - マウスホバー時に写真などを縮小/拡大する | CSS Introduction

transform:scale()関数をマウスホバー時に設定して写真などの要素を強調表示させる。transform:scale()transformプロパティのscale()関数は、要素の大きさを水平方向と垂直方向に対して変更することができます。要素をマウスホバー時に拡大/縮小することで強…

2019-08-08

【サンプルあり】リアルタイムに値を取得/表示するスライダー(レンジバー) -コピペ可能- |【HTML】【JavaScript】

HTML input range HTML-input HTML-input-range

スライダーの値をリアルタイムに取得HTMLのinput要素のtype：rangeは、スライダーによる数値の指定ができます。スライダーの値(value)をリアルタイムに取得して表示させる方法を、HTMLとJavaScriptで書き記しました。JavaScriptにjQueryを使用しています。(…

2019-08-03

GoogleAdSense広告のコードを改変してレスポンシブ対応にする方法 |【Google AdSense】

GoogleAdSense レスポンシブデザインその他-GoogleAdSense-レスポンシブデザインその他-GoogleAdSense

GoogleAdSense(グーグルアドセンス)広告を固定サイズで掲載すると画面サイズ(ページレイアウト)に応じたレスポンシブサイズでなくなり、画面からはみ出したデザインになる可能性があります。当記事は、それを防ぐためにGoogleAdSenseの固定サイズの広告ユニ…

2019-08-01

JavaScript/CSSコード圧縮便利簡単な無料圧縮ツール【Minifier】

ツールコード圧縮ツール-コード圧縮

JavaScript/CSSコードの圧縮が簡単にできる無料圧縮ツール【Minifier】の紹介記事になります。リンクJavaScript MinifierCSS Minifier使用方法圧縮コードを貼り付けてボタンを押すだけで簡単に圧縮することができます。JavaScript Minifier左側のテキストエ…

2019-07-31

【WEBデザイン】背景色と文字色の組み合わせ -キレイめカラー集-

開発日記備忘録 WEBデザイン色の組み合わせ開発日記-備忘録-WEBデザイン-色の組み合わせ開発日記-備忘録-WEBデザイン開発日記-備忘録 WEBデザイン-色の組み合わせ

個人的に相性が良いと思った背景色と文字色の組み合わせを、備忘録として書き記している記事です。「salmon」「white,#555」「#59b573」「white,#333」「salmon」「white,#555」 background-color: salmon;color: white; background-color: salmon;color:…

2019-07-06

ソースコードハイライト【Google Code Prettify】にCSSだけで言語情報を記述する - 開発日記

開発日記 WEBデザイン Google Code Prettify 開発日記-WEBデザイン WEBデザイン-Google Code Prettiffy 開発日記-WEBデザイン-Google Code Prettify 開発日記-CSS CSS

Photo by Sean Lim on Unsplash Google Code Prettify HTML CSS JavaScript sample html JavaScript Google Code Prettify 使用している code-prettify https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst HTML、CSS…