2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機
[JS]最近よく見かける縦長ページ用のさまざまなアニメーションが簡単に実装できるスクリプト -ScrollReveal
デモページ フッタはダイナミックに3Dで表示されます。 ScrollRevealの使い方 Step 1: 外部ファイル 当スクリプトとAni.jsを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"> </head> <body> ... <script src="anijs-min.js"></script> <script src="helpers/scrollreveal/anijs-helper-scrollreveal-min.js"></script> </body> Step 2: HTML 各要素のアニメーションの設定は、HTMLに記述
Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め！ - Web学び
2012年 6月 13日 新しいサーバーでブログをリニューアルして気がついた、SNSボタンの有無でかなり読み込み速度に差がある。といっても2,3秒ほどですが、これは結構命取りだったりします。 まぁ私もそんなに詳しいわけではないので断言できませんが。 ・訪問者はその数秒でサイトから逃げる ・Googleはその数秒を評価基準に入れる たしか遅延ロード(Lazy Load)とかいう技術ですね。 わりとポピュラーなコードで何とかなったので書いときます。 ピュアなJavaScriptではなく、jQuery使いますね。 方法その１ 時限式読み込み body閉じタグの前あたりに書きます。 . . . <div id="snsbox"></div> <script type="text/javascript"> var snscode = 'ここに、SNSのコードを書く' + '一行でつなげても良いが見に
Wookmark
高さの異なる要素をグリッドに沿って、レンガ状に隙間なく並べるjQueryのプラグインを紹介します。 同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。 デモ:幅800pxで表示 [ad#ad-2] Wookmarkの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script> HTML デモを例にHTMLはリスト要素など、並列に配置しま
jQueryでスクロールすると上部に固定されるナビゲーション
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」:phpspot開発日誌
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ jQueryを使って画面遷移のないサイトを作ろうとしたときのちょっとしたメモです。 サーバーとやり取りをする、Ajax的なことは書いていないのであしからず。 投稿日2012年02月03日 更新日2012年02月03日 リンク（href）を無効にする 画面遷移のないWebサイトでもJSのない環境やSEOも考慮して href にリンク先を設定したいときがあります。 hmtl <a href="hoge.html" id="btn">ボタン</a> このような場合だと #btn にイベントを設定しても画面遷移してしまいます。 click イベントに「e.preventDefault()」と記述すればhrefを無効にになり画面遷移が行われません。 javascript $('#btn').click(function(e){
jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 １）3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com