cssのみでグラデーションのマウスオーバーをフェード処理する
下記サンプルページのような、グラデーションで表現されたボタンのマウスオーバーを、cssのみでフェード処理をする方法をご紹介いたします。 グラデーションボタンマウスオーバーのサンプルページ ボタンなどに使うhoverの変化…
2019.1.4html5/css3
縦横比を固定したままiframeや画像を表示する
margin と padding を ％で表すときは、親要素の横幅が基準となります。 上下のmargin/paddingも、親要素の【横幅】が基準です。 レスポンシブコーディング時は、これを便利にいろいろなところで活用し…
2018.4.25html5/css3, responsive
横幅いっぱいのメイン画像を配置したレスポンシブコーディング
用意されたデザインファイルは下記のような感じ。 メインイメージの青枠の部分はマストで表示されるようにする。 コーディング後のメインイメージ部分の表示 ウィンドウサイズが1600px以上の時 メインイメージ部分はウィンドウ…
2018.3.21html5/css3, responsive
背景画像位置 px→%の計算方法
水平方向（X軸） {%指定値} = {px指定値} / ( {背景画像を指定する要素のwidth} – {背景画像のwidth} ) * 100 垂直方向（Y軸） {%指定値} = {px指定値} / ( {背景画像を指…
2018.3.17html5/css3