ウィンドウに合わせて自動で画像をリサイズする

画像をウィンドウサイズに合わせてリサイズするために、以下のcssを書いてみた。

img {
  width: 100%;
}

これだとウィンドウを徐々に小さくしていくと、画像がはみ出ることがある。
ロード時の100%固定で表示されるっぽい動き。

ウィンドウサイズに合わせて画像も徐々に小さくするには

以下のcssで出来た。
いつもど忘れしてしまうので、忘れないようにメモ。

img {
  width: 100%;
  max-width: 100%;
}

【CSS】input type=”submit”のスタイルが変わらない?

しょうもない話だけど、こないだプチハマった出来事を。

“【CSS】input type=”submit”のスタイルが変わらない?” の続きを読む

【レスポンシブ対応】br(改行タグ)をCSSで消す方法

レスポンシブ対応にて、画面サイズに応じて文章を読みやすくするために、改行調整は必要になる。

この時に使えるのがCSSでbr(改行タグ)を無効化する方法。

CSSでbrタグを無効にする

やり方はCSSにて以下の通り記述するだけ。

[CSS]
br {
  display: none;
}

これで改行が無効になるので、viewport設定と合わせて使用し、各デバイスで最も見やすくなるように調整することが可能になる。

【jQuery】Googleタグマネージャ風ラジオボタンを作ってみる

今回はjQueryを使って、Googleタグマネージャの設定画面に出てくるラジオボタン的な動きするアレを作ってみる。

Googleタグマネージャのラジオボタン的なアレ

Googleタグマネージャ画面サンプル01

何かひとつ選んだら…↓

Googleタグマネージャ画面サンプル02

他の選択肢は消えて、選択したアイテムだけ残る。

こんな動きするやつを作ってみる。

“【jQuery】Googleタグマネージャ風ラジオボタンを作ってみる” の続きを読む

webkitとかmozとか何ぞ? – CSSベンダープレフィックス

昨年末からウェブ制作の勉強を再開して未だウラシマ状態の私です。

さて今回は、CSSの中でwebkitとかmozとか、昔は見なかったCSSの表記について。
現役バリバリの人は読む必要ないです。

“webkitとかmozとか何ぞ? – CSSベンダープレフィックス” の続きを読む