サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
都知事選
www.tsukimi.net
CSSのグラデーションボタンをホバー(マウスオーバー)でアニメーションさせる方法 CSSで作ったボタンをマウスオーバーしたときに色を変えたい場合、「transition」を使うとふわっと色が徐々に変化するアニメーション効果を簡単に加える事ができます。 「transition:1s」なら1秒、「transition:0.5s」なら0.5秒のアニメーションになります。
jQueryでreplaceを使って複数箇所の複数の文字列を一括置換する方法 jQueryでreplaceを使って、HTMLページ内の文字列を別の文字列に置き換えることができます。 CMS等のプログラム中で定義されている文字列を別の文字列に置き換えたいときや、たくさんの文字修正があったときなどに便利です。 基本的な使い方から段階をふんで、最終的に「複数箇所の複数の文字列を一括置換する」という動作になるようにしてみようと思います。途中の解説が不要な方は、ページの下までワープしてください。 一つの要素内の該当する文字列を一箇所だけ置換 一つの要素内の、最初にマッチした文字列を一箇所だけを指定した文字列に置き換えます。 <p id="replace">私はみかんが好きだ。みかんなしでは生きられない。</p> $(function(){ var txt = $('#replace').html()
ChromeデべロッパーツールでPOSTされたパラメータの中身を確認する GETでパラメータを渡す場合は、URLを見ればどんなデータが渡されたのかわかりますが、POSTの場合はURLが変わりません。Chromeデベロッパーツール(Chrome Developer Tools)を使えばPOSTで渡したパラメータの内容を確認する事ができます。 Google Chromeで調べたいページを開き、Macなら(オプション+コマンド+i)Windowsなら(fn+f12)、もしくは右クリックで「検証」をクリックするとデベロッパーツールが開きます。 例えば、以下のようなフォームをPOST送信した場合、 デベロッパーツールでは送信された内容を以下のように確認する事ができます。 「Network」をクリックします。 「Record network log」の部分で、ここが赤くなっているかを確認します。
submitボタンのアイコンにアイコンフォント(Font Awesome)を使う フォームを送信する際にクリックする「サブミットボタン」にアイコンフォント「Font Awesome(Free版)」を使ってアイコンを表示させてみたいと思います。今回表示させたいアイコンは「 (虫眼鏡)」です。 Font Awesomeの仕様が変更になったため、記事の内容を更新しています(v5.0.4以上対応)。こちらから最新のCDNが取得できます。 input要素にアイコンを表示させる サブミットボタンにアイコンを表示させるためには、「input」要素の「value」の値にアイコンのコード(Unicode)をセットします。アイコンのコードはFont Awesomeのページから取得できます。「value」の値にセットするときはコードの頭に「&#x」を、おしりに「;」を追加してください。虫眼鏡のアイコンなら「&
フォームで入力必須であることを指定するinput要素の「required」属性を調べてみた フォームを送信する際に必須項目に未入力があった場合、クライアントサイドスクリプト(主にJavaScript)やサーバーサイドスクリプト(PHPやCGIなど)でエラーメッセージを表示させ送信ができないように設定する場合が多いですが、HTML5ではそれらのスクリプトを使わなくても、input要素に「required」属性を追加するだけでエラーメッセージを表示する事ができるようなので、どのような動作になるのかを少し調べてみました。「required」の単語自体は「必須」という意味です。 単に未入力エラーだけではなくtypeの値によっては、パターンマッチングを行ってくれるものもあるようです。 <input type="text" required> もしくは <input type="text" requi
CSSを使ってスクロールバーを表示させてみました CSS(::-webkit-scrollbar)を使うとスクロールバーのデザインができるという事なので実際にやってみました。 スマホサイトを作る際、横長の画像やテーブルが画面に収まりきらない場合に、収まりきらなかった部分を左右にスワイプして見れるように設定する事があると思います。
このページを最初にブックマークしてみませんか?
『www.tsukimi.net』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く