お問い合わせフォーム等のWebフォームに必ずと言って良い程設置されるtextareaですが、デフォルトの状態だと入力欄をユーザー側でサイズ変更することができるようになっています。 textareaの右下をドラッグすること…
textareaのサイズ変更(拡大/縮小)を禁止する方法
table-layout:fixed;を指定してもテーブルのwidthがうまく効かない場合の対処法
テーブル内のthやtdに対して、CSSで横幅を指定してもうまく効かない場合の対処法をご紹介いたします。 複雑なテーブルを実装する時なんかは役立つと思います。 よくある解決法 「table-layout:fixed;」 よ…
色んなタイプの波形を作成してSVGをダウンロードできるWEBサービス「Get Waves」
Get Wavesは、色んなタイプの波形を作成することができ、作成した波形をSVGとしてダウンロードできるWEBサービスです。 ファイルをダウンロードするのではなく、SVGコードだけ取得することも可能です。 Get Wa…
videoタグによる埋め込み動画がiPhoneでのみ表示されない時の対処法
先日、videoタグで設置している動画が、iPhoneでのみ表示できないという問題に遭遇しました。MacbookやiPadのSafariでは再生できており、iPhoneだけ動画の部分が真っ白になってしまうという現象です。…
画像やiframeに「loading=”lazy”」を自動付与し遅延読み込みを有効化してくれるWordPressプラグイン「Native Lazyload」
Native Lazyloadは、画像やiframeに「loading=”lazy”」を自動的に付与して、遅延読み込みを有効化してくれるWordPressプラグインです。Googleが提供していま…
プレビューを見ながらSVGのアニメーションを作成できるWEBサービス「SVG Artista」
SVG Artistaは、SVGに適用するアニメーションを作成できるWEBサービスです。 プレビューで動きを確認しながら値を設定していけるので、そんなに知識がなくても簡単にSVGアニメーションを作成できます。 SVG A…
ホバーエフェクトやローディングアニメーションのHTML/CSSがまとめられているWEBサービス「CSS WAND」
CSS WANDは、ホバーエフェクトやローディングアニメーションのHTML/CSSをコピペで使えるWEBサービスです。 数は多くありませんが、色んなタイプのホバーエフェクトやローディングアニメーションのスニペットがまとめ…
CSSを使って電話発信用のリンクをPCで無効化する方法
a要素のhref属性に「tel:電話番号」を入れることで、スマホ等でリンクをタップした際に電話発信ができます。 スマホの場合は直接電話がかけられて便利ですが、PCではクリックできないようにしたいというケースも多いかと思い…
IE11でもpicture要素を使えるようにするポリフィル「Picturefill.js」
Picturefill.jsは、picture要素に対応していないブラウザでもpicture要素による画像の切り替えができるようになるポリフィルです。 picture要素を使うことで、ブラウザの幅によって画像を出し分ける…
タイトルや本文を含めたmailtoリンクが簡単に作成できるWEBサービス「Mailtolink.me」
Mailtolink.meは、mailtoリンクの作成を支援してくれるWEBサービスです。 メールアドレス・タイトル・本文を入れるだけで、mailtoリンクを即座に生成してくれます。 Mailtolink.meの使い方 …