javascript

javascript

input[type=number] の矢印(スピンボタン)のデザインをCSSで自由に変える方法

HTMLのinputボタンのtype属性にnumberを指定すると 数字以外の入力が不可になり さらに上の画像のように、増減ボタンが右端につくのですが、 この増減ボタンにはブラウザによって 見た目がコロコロ変わってしまうという困った問題...
CSS3

超簡単!WordPress+cookieでお気に入り登録の機能を実装する方法

こんにちは、daimaです。 少し前に靴屋さんの商品サイトをWordpressで制作する機会があり、 その際に閲覧者が気に入った商品ページをお気に入り登録して 後からお気に入り一覧ページで見返せるようにしたいという要望があり、 これをCo...
CSS3

コピペで5分!javascriptで埋め込みmp4動画に再生/停止ボタンを追加するコード

はじめに こんにちは、daimaです。 本日はコピペするだけで同じページ内の全てのvideoタグで埋め込んだmp4動画に 再生/停止ボタンを追加することができる便利なjavascriptコードをご紹介します。 ちなみ...
CSS3

子ページをコンパクトに表示できるおしゃれなハンバーガーメニューのコードサンプル

こんにちは、daimaです。 本日は以前ご紹介した こちらのハンバーガーメニューにさらに 各親メニューに対する子ページへの開閉式リンクを追加した 機能追加版をご紹介します。 デモとソースコード DEMO ※メニ...
javascript

コピペで5分!javascriptで表示時間の期限付きバナーを実装する方法

こんにちは、daimaです。 本日は任意で設定した時刻によって 画像の表示/非表示を切り替えることができる表示期限付きバナーを 数行のjavascriptコードで実現する方法をご紹介します。 主な用途としては、 一度に複数の対象への期限...
javascript

クロスドメインでiframeを読み込ませてついでにレスポンシブ対応もする方法

こんにちは、daimaです。 本日は異なるクロスドメインでiframeを埋め込んで なおかつ画面を拡縮しても iframeの高さが自動で調整されるように レスポンシブ対応させる方法をご紹介します。 なぜ、この記事を書いたかというと 私が...
CSS3

コピペで5分!右から出てくるおしゃれなハンバーガーメニューの作り方【レスポンシブ対応】

こんにちは、daimaです。 本日は私も業務でよく使っている おしゃれでコンパクトな ハンバーガーメニューのサンプルコードを コピペしてすぐに使える形でご紹介したいと思います。 最終更新2021/01/30 : ・ナビ部分...
javascript

input type=”file”の見た目を全てのブラウザで統一する方法

フォーム回りのクロスブラウザ対応は WEBコーダーにとって厄介な仕事の一つですが 中でも画像の添付ボタンを追加する input type="file"は ブラウザによって見た目が違うわ ボタン横のテキストは変更できないわと 何かと厄介な存在...
javascript

一番手っ取り早くgulp.jsを動かす方法【超入門編】

一瞬でgulpを動かす環境を作る gulpといえばsassやbabel、 ファイルの結合、構文チェック、 画像圧縮などなど、フロントエンドの 様々なタスクを自動で実行できる node.js製のビルドシステムです。 先日そのgulpを導入...
javascript

プラグイン不要!複数の要素を同時に高さ揃えできるjQueryコード【レスポンシブ対応】

はじめに こんにちは、北陸のwebコーダーdaimaです。 記事一覧など 複数のボックスが横並びになった レイアウトを組む時に困るのが、 文字数などの違いによって ボックス内の各要素の高さが ずれてしまうことです。 ...
タイトルとURLをコピーしました