<input type="text">で数値のみ入力する方法
type=”text”のままで数値のみにするにはpattern属性を使用して数値のみにすることが出来ますが、この数値チェックはsubmitのタイミングなので入力時チェックはpatternではできません。 oninputを使う oninputを使用して入力イベントを全てチェックして解決することが出来ます。 この場合、type=”text”のままなのでmaxlengthも効かせることができます。 具体的には正規表現で数値以外が入力されたら空文字に置換してあげたら数値のみ入力する事が出来るようになります。 <input type="text" maxlength="5" oninput="value = value.replace(/[^0-9]+/i,'');" /> input type=”number”でmaxlengthを効かせる モダンブラウザでnumberのスピナーボタンを表示したい
data-* - HTML: ハイパーテキストマークアップ言語 | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
もう泣かない！input type="file"のボタン部分をcssでデザインする方法 - Qiita
input type="file" を使って ファイルを選択する時のボタンがあるのですが これがなかなかうまくcssが利いてくれなくて困ってました。 ※しかも、ボタン部分だけでなく、ファイル名が表示される部分も残しつつです なんとか解決策が見つかりましたよー 肝はcssの::before 要素。 ::before 要素を使ってボタン部分をデザインしてください もう一つの肝はinput[type="file"]::-webkit-file-upload-button デフォルトの「ファイルを選択」ボタンの装飾を非表示になるようにcssで調整します デフォルトのボタンの上にデザインしたボタンを重ねるというイメージですね。 HTML <div class="file-upload_area"> <input type="file" id="csv-file" name="files" class
ウェブページの表示速度を改善するために気をつけなくてはいけないこと
ウェブページの表示が遅くなってしまう原因の一つに「JavaScriptの読み込み」があります。ブラウザはダウンロードしたhtmlドキュメントを上から順番に解釈して描画していくのですが、途中で「script」タグに出会うとJavaScriptの読み込み・実行が終わるまでその場所で解釈を一旦ストップしてしまいます。ページの表示速度に影響を与えずにJavaScriptを読み込むにはどうすれば良いのかについてfly.ioがまとめています。 Lighthouse: how to reduce render-blocking scripts https://fly.io/articles/lighthouse-how-to-reduce-render-blocking-scripts/ scriptタグが外部のJavaScriptを読み込むのかインラインで記述されているJavaScriptを実行するの
普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
【CSS】見出しの横に「更新日」とか並べて表示したい時の簡単なCSSの書き方 | バシャログ。
上記の画像のように、見出しのタイトルに更新日などの情報を並べて表示する、というデザインがよくあります。 実現方法は色々ありますが、CSS でどのように実現するのが簡単でしょうか。 例えば、HTML は以下です。 <div id="press-release"> <h2>プレスリリース</h2> <p class="update">2009年03月09日更新</p> <!-- /#press-release --></div> 良く見かけるのは h2 と p をそれぞれ「position:absolute」で左と右に配置するもの、もしくは h2 を「float:left」、p を「float:right」にする方法です。 どちらを使うにせよサンプルの HTML のように h2 と p を div で囲う必要があり、CSS も長くなりがちです。 以下の方法が最も楽チンだったりします。 HTML
jQueryのprop()でdisabled属性を切り替える - Qiita
buttonタグなどのdisabled属性の切り替えを、jQueryのprop()によって切り替える方法です。
禁止タグが含まれていますというエラーが表示され投稿できません｜Amebaヘルプ
例えばこのような投稿をされていないでしょうか？ 他の記事やメモ帳などからコピーして記事を書いている リブログを複数している コピー・貼り付けをすると意図しないタグが入り、それがAmebaブログの禁止タグであることがあります。 プレーンテキスト・書式なしで貼り付けるか、コピー等せずに初めから記事本文入力画面で文字・画像・リンク・SNSコンテンツの入力をお試しいただきますようお願いいたします。 アメブロの禁止タグは以下の通りです。エラーが出た場合は以下のタグが含まれています。 ※禁止タグが含まれている場合でも、フリープラグインではご利用いただけます。 Amebaブログでの禁止タグ一覧 ・html ・head ・body ・frame ・frameset ・iframe ・object ・param ・server ・javascript ・form ・input ・embed ・textare
特殊文字リファレンス
このページで紹介するのはHTML4.01で定義されている特殊な文字です。 これらの文字を表示させるには、｢&キーワード；｣、｢&#番号；｣という2通りの記述方法があります。 キーワードは、大文字と小文字が区別されます。 ※OSやブラウザの種類・バージョン等の環境により、表示されない場合があるので注意してください。
[63] インラインフレームで 他のHTMLファイルを組み込もう iframe要素
<iframe>要素の HTML5 での変更点は、frameborder属性・marginheight属性・marginwidth属性・scrolling属性・longdesc属性・align属性・scrolling属性が廃止されたこと。 代わりに新しく、srcdoc属性・seamless属性・sandbox属性が追加されました。 インラインフレームを配置してみよう ●サンプル1：インラインフレームの基本形 src属性で、別のHTMLファイルを指定するのが基本形です。 サイズを指定しなければ、デフォルトサイズ （300px×150px）になります。 <iframe src="smp63_1.html"></iframe> サイズを指定すると、こんなかんじ。 <iframe src="smp63_1.html" width="280" height="120"></iframe> width
![[63] インラインフレームで 他のHTMLファイルを組み込もう iframe要素](https://cdn-ak-scissors.b.st-hatena.com/image/square/592027f3e8ef20097cc905941f6f4f240992b1ad/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-45.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2Ftsubu_icon2s.jpg)
ページの左右の余白（枠外）に色を付ける方法 - OKWAVE
いわゆる外部スタイルシートを使います。 そこで、 body{background-color:#eee8aa;} でよいです。ただし標準では隙間が開くことがあるので html,body{padding:0;margin:0;background-color:#eee8aa;} としておきます。 通常は背景画像や、font-family,line-height,colorなど、継承されるプロパティも一緒に固定スタイルシート(永続スタイルシート)書いておきます。 ★HTMLはきちんと文書構造にしたがってマークアップして、デザインのためにclass名をつけたりIDをつけることは間違いです。 タグスープになっちゃいます。典型的な悪い例が<div class=wrap">のように意味のない(非セマンティックな)マークアップです。(これは某オーサリングツール由来のものです。)HTML4.01が登場して
スペーサーGIFの使用
微妙なレイアウト表現に最適 スペーサーGIF【spacer.gif】とは、中身は何もない透明なGIF画像を、行間やテーブルの余白調整などに応用したものです。 通常は縦横1ピクセルの画像を「widthとheight」で指定し、自由に伸縮させて目的の場所に挿入します。 なぜGIF画像なのか 現在のブラウザが対応している画像の種類は基本的には2つ。 「GIF画像」と「JPEG画像」です。 このうち画像を透明化できる（背景を透過できる）のはGIF画像だけなのです。 背景の色と同色にすればJPEG画像を使うことも出来ますが、背景に依存してしまうので汎用性のあるGIF画像を使うのが一般的です。 なぜわざわざ画像を使うのか 行間の調節や余白調整は改行【br】を挿入してしまうのが一番楽な方法です。 もちろんこれでも問題はないのですが、改行で空くスペースはあらかじめ決まっています。 つまり、改行で微妙な余白
ボタンを動的にdisabledさせたいのですが
お世話になります。 ある画面に複数ボタンがあって 押されたボタンをdisabledにしたいなと思っています。 ただしどのボタンがおされても同じ関数に飛んでほしいのですが いまいち解決できません。 <form name="form"> <input type="button" name="syori1" value="ボタン1" onClick="javascript:hogehoge()"> <input type="button" name="syori2" value="ボタン2" onClick="javascript:hogehoge()"> <input type="button" name="syori3" value="ボタン3" onClick="javascript:hogehoge()"> </form > とあった場合 function hogehoge(){ doc
ページ内ジャンプ HTML <a>
リンクしたい場所にアンカー（目印）を置いて、<a href="#アンカー名">でリンクするとページ内ジャンプが出来る。 アンカー（目印）を作る <a name="アンカー名">文字</a> ページ内の好きな場所や特定の文字にアンカー名をつける。 例） <a name="a1" >内容</a> <要素 id="アンカー名"> 要素それぞれにid属性を使って、アンカー名をつけることもできる。 例） <h2 id="a2">内容</h2> 例） <div id="a3">内容</div> アンカー名は好きな名前をつけることが出来る。 同ページ内では、同じアンカー名は使えない。アンカー名は半角英数字でつける。 ページ内のアンカーへリンクする <a href="#アンカー名">文字・画像</a> <a name="アンカー名">や<要素 id="アンカー名">でアンカー名をつけた場所にリンクします。
ひよっこメモ – 横スクロールバーを消す
最近のコメント 正規表現の基本 └ kanakana - 11/16 ユーザと管理者の権限 └ nz - 06/15 └ kanakana - 06/15 てすと └ kanakana - 06/14 └ kanakana - 06/14 テスト └ test01 - 06/13 └ test02 - 06/13 └ kanakana - 06/13
Table Tag Generator
数値を増減させるには、キーボードで入力するか、スピナーをクリックするか、マウスホイールを回してください。 セルをドラッグして選択することができます 文字を入力してください クラス名を入力してください × It is not possible to merge <td> and <th>. × 結合したセルを再結合することはできません。一度、分割してください。 × 数字を入力してください × 自然数(1,2,3...)を入力してください × 操作対象となるセルをドラッグして選択してください 使い方 1. まず表の大きさ（行と列）を決めてください。数字をキーボードで入力するか、スピナーをクリックするか、マウスホイールを回してください。 2. td タグの代わりに th タグを使いたい場合（またはその逆）は、変換したいセルをドラッグして選択し、「td ↔ th」 ボタンをクリックしてください。
border-collapse－スタイルシートリファレンス
border-collapseプロパティは、隣接するセルのボーダーを重ねて表示するか（collapse）、間隔をあけて表示するか（separate）を指定します。 ■値 スタイルシート部分は外部ファイル（sample.css）に記述。 table.sample1 {border: solid 1px #000000; border-collapse: collapse;} table.sample2 {border: solid 1px #000000; border-collapse: separate;} td.sample {border: solid 1px #ff0000} HTMLソース <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <table cl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「SEO×SNS×ブログ」で作る最効率化収益システム｜うきだいらブログβ
https://qiita.com/nyarla/items/10f0f3e3c2116417df59
画像をウィンドウの中央に表示する