タグ付けされた質問 「html」

HTML(HyperText Markup Language)は、Webブラウザーに表示されるWebページやその他の情報を作成するための主要なマークアップ言語です。HTMLに関する質問には、最小限の再現可能な例と、何を達成しようとしているのかについての考えを含める必要があります。このタグが単独で使用されることはほとんどなく、[CSS]や[javascript]と組み合わせられることがよくあります。

4
積み重ねられた半透明の箱の色は注文によって異なりますか?
2つの積み重ねられた半透明のボックスの最終的な色が順序に依存するのはなぜですか? どちらの場合も同じ色になるようにするにはどうすればよいですか? .a { background-color: rgba(255, 0, 0, 0.5) } .b { background-color: rgba(0, 0, 255, 0.5) } <span class="a"><span class="b"> Color 1</span></span> <span class="b"><span class="a">Different Color 2</span></span> コードスニペットを実行する結果を非表示スニペットを展開

7
jsPDFライブラリを正しく使用する方法
divの一部をPDFに変換したいのですが、jsPDFライブラリを試しましたが、成功しませんでした。ライブラリを機能させるために何をインポートする必要があるのか​​理解できないようです。私は例を試しましたが、まだ理解できません。私は以下を試しました: <script type="text/javascript" src="js/jspdf.min.js"></script> jQueryの後: $("#html2pdf").on('click', function(){ var doc = new jsPDF(); doc.fromHTML($('body').get(0), 15, 15, { 'width': 170 }); console.log(doc); }); テスト目的のためですが、私は受け取ります: "Cannot read property '#smdadminbar' of undefined" #smdadminbar本体からの最初のdivはどこですか。

9
埋め込み配列を使用して、Railsの複数選択で最初の要素が常に空白になるのはなぜですか?
Rails3.2.0.rc2を使用しています。私が持ってModelいる私は、静的持って、Array私は、ユーザーがのサブセットを選択できるように、フォームをアップ提供していますArrayし、1つの列に格納されているデータベースにその選択を保存しますModel。ArrayRailsがユーザーの選択をYamlに正しく変換している(そしてその列を読み取るときに配列に戻る)データベース列でserializeを使用しました。複数選択フォーム入力を使用して選択を行っています。 私の問題は、現在の方法では、サーバーに送信されるときにユーザーのサブセット配列の最初の要素が常に空白になることを除いて、すべてが期待どおりに機能することです。 これは大したことではなく、事後にそれを切り取るコードを書くことはできますが、デフォルトのRailsの動作が意図的に行われるとは思えないため、何らかの構文エラーを起こしているように感じます。なんらかの理由なしにこの空白の要素を追加します。何かを見逃したか、ある種の設定を無効にするのを忘れたに違いありません。私が欠けているものを理解するのを手伝ってください(または、私がインターチューブで見つけたものよりも詳細にこれを説明しているいくつかの良いドキュメントを教えてください)。 MySQLデータベーステーブル 'モデル': subset_arrayTEXTフィールドであるという名前の列が含まれています クラスモデルには、次の設定が含まれています。 serialize :subset_array ALL_POSSIBLE_VALUES = [value1, value2, value3, ...] モデルを編集するためのフォームには、次の入力オプションが含まれています。 f.select :subset_array, Model::ALL_POSSIBLE_VALUES, {}, :multiple => true, :selected => @model.subset_array クライアントからサーバーへのPUTは次のようになります。 value1とvalue3のみが選択されていると仮定します "model" => { "subset_array" => ["", value1, value3] } データベースの更新は次のようになります。 UPDATE 'models' SET 'subset_array' = '--- \n- \"\"\n- value1\n- value3\n' ご覧のとおり、送信されてデータベースに設定されている配列には、この余分な空白の要素があります。どうすればそれを取り除くことができますか?f.select通話に欠けているパラメータはありますか? どうもありがとうございました:) …

3
cssのみを使用した改行(<br>など)
純粋なcssで、つまりhtmlタグを追加せずに、次のように改行することは可能&lt;br&gt;ですか?&lt;h4&gt;要素の後に改行したいが、前にはしたくない: HTML &lt;li&gt; Text, text, text, text, text. &lt;h4&gt;Sub header&lt;/h4&gt; Text, text, text, text, text. &lt;/li&gt; CSS h4 { display: inline; } 私はこのような質問をたくさん見つけましたが、常に「display:block;を使用してください」のような答えがあります。、&lt;h4&gt;同じ行に留まらなければならないとき、私はできません。
84 html  css  styling 

6
フローティングdivがラップしないようにする
ブラウザが狭すぎて収まらない場合に折り返さないdiv(セル)の行が必要です。 Stackを検索しましたが、単純なcssの質問であると思うものに対する実用的な答えが見つかりませんでした。 セルには指定された幅があります。ただし、行の幅は指定したくありません。幅は自動的にその子セルの幅になります。 ビューポートが狭すぎて行を収容できない場合、divはスクロールバーで溢れているはずです。 他の場所で見た多くの解決策を試したので、機能するコードスニペットとして回答を提供してください(幅を指定する:100%で、機能しないようです)。 JavaScriptを使用せずにHTML / CSSのみのソリューションを探しています。 .row { float: left; border: 1px solid yellow; width: 100%; overflow: auto; } .cell { float: left; border: 1px solid red; width: 200px; height: 100px; } &lt;div class="row"&gt; &lt;div class="cell"&gt;a&lt;/div&gt; &lt;div class="cell"&gt;b&lt;/div&gt; &lt;div class="cell"&gt;c&lt;/div&gt; &lt;/div&gt; コードスニペットを実行する結果を非表示スニペットを展開 現時点では、行の幅を非常に大きな数にハードコーディングしています。

8
JavaScriptまたはjQueryでHTMLを正規化する方法は?
タグは複数の属性を持つことができます。コードに属性が表示される順序は重要ではありません。例えば: &lt;a href="#" title="#"&gt; &lt;a title="#" href="#"&gt; JavascriptでHTMLを「正規化」して、属性の順序が常に同じになるようにするにはどうすればよいですか?常に同じである限り、どちらの順序を選択してもかまいません。 更新:私の当初の目標は、わずかな違いで2つのHTMLページを(JavaScriptで)簡単に差分できるようにすることでした。ユーザーは別のソフトウェアを使用してコードを編集できるため、属性の順序が変わる可能性があります。これにより、差分が冗長になりすぎます。 答え:まあ、最初にすべての答えに感謝します。そして、はい、それは可能です。これが私がそれをどうやってやったかです。これは概念実証であり、確実に最適化できます。 function sort_attributes(a, b) { if( a.name == b.name) { return 0; } return (a.name &lt; b.name) ? -1 : 1; } $("#original").find('*').each(function() { if (this.attributes.length &gt; 1) { var attributes = this.attributes; var list = []; for(var i =0; i …

17
JavaScriptをHTMLの本体に埋め込むのは悪い習慣ですか?
私が取り組んでいるチーム&lt;script&gt;は、HTMLページの本文のランダムな場所でタグを使用する習慣を身に付けています。例えば: &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;div id="some-div"&gt; &lt;script type="text/javascript"&gt;//some javascript here&lt;/script&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; 私はこれを前に見たことがありませんでした。私がテストしたいくつかのブラウザで動作するようです。しかし、私が知る限り、このような場所にスクリプトタグを配置することは有効ではありません。 私が間違っている?このようなdivタグ内にスクリプトタグを配置するのはどれほど悪いことですか?知っておくべきブラウザの互換性の問題はありますか?
84 javascript  html 

1
HTMLドキュメントのフォーマット[クローズ]
現在のところ、この質問は私たちのQ&A形式には適していません。回答は事実、参考資料、または専門知識によって裏付けられることを期待していますが、この質問は、討論、議論、世論調査、または広範な議論を求める可能性があります。この質問を改善し、場合によっては再開できると思われる場合は、ヘルプセンターにアクセスしてガイダンスを入手してください。 8年前に閉鎖されました。 HTMLドキュメント(CTRL+ K、CTRL+ D)をフォーマットするためのVisualStudioの機能が好きです。 Notepad ++などの他の(無料の)エディターに同じ機能を持つプラグインはありますか?

17
IDに依存しないHTMLフォームの最初の入力要素にフォーカスを設定するにはどうすればよいですか?
要素のIDを知らなくても、ページの読み込み時に最初の入力要素(テキストボックス、ドロップダウンリストなど)にWebページのフォーカス(入力カーソル)を設定する簡単な方法はありますか? Webアプリケーションのすべてのページ/フォームに共通のスクリプトとして実装したいと思います。
84 javascript  html  forms  focus 

9
Modernizrを使用してIEを検出する正しい方法は?
Modernizr JSライブラリを使用して、いくつかのブラウザプロパティを検出し、表示するコンテンツと表示しないコンテンツを決定したいと思いました。 HTML5とSWFの両方を出力するPano2VRというアプリがあります。iOSデバイスユーザーにはHTML5が必要です。 ただし、IEはこの「HTML5」出力をまったくレンダリングしません。それらの出力はCSS33D変換とWebGLを使用しているようですが、IE9では明らかにサポートされていないものが1つ以上あります。 したがって、それらのユーザーのために、Flashバージョンを表示する必要があります。私はIFRAMEを使用することを計画しており、Modernizrスクリプトまたはdocument.writeを介してSRCを渡し、ブラウザーに応じて正しいIFRAMEコードを書き出します。 これらすべてが、Modernizrを使用してIEを単純に検出するかIEを検出しないかを決定する方法につながりますか?または、CSS 3D変換を検出しますか? または、これを行う別の方法はありますか?

7
HTMLを変更せずに2つの要素を同じ行に揃える方法
同じ行に2つの要素があり、左に浮いていて、右に浮いています。 &lt;style type="text/css"&gt; #element1 {float:left;} #element2 {float:right;} &lt;/style&gt; &lt;div id="element1"&gt; element 1 markup &lt;/div&gt; &lt;div id="element2"&gt; element 2 markup &lt;/div&gt; element2をelement1の隣に並べ、2つの間に約10ピクセルのパディングを配置する必要があります。問題は、element2の幅がコンテンツやブラウザ(フォントサイズなど)によって変わる可能性があるため、必ずしもelement1と完全に一致するとは限らないことです(マージンを右に適用して移動することはできません)。 マークアップも変更できません。 それらを並べる統一された方法はありますか?パーセンテージでmargin-rightを試し、element1で負のマージンを試し、element2を近づけました(ただし、機能させることができませんでした)。
84 html  css  css-float  margin 

11
ブラウザがHTML5ローカルストレージをサポートしているかどうかを検出する方法
ls existIE7の次のコードアラート: if(window.localStorage) { alert('ls exists'); } else { alert('ls does not exist'); } IE7は実際にはローカルストレージをサポートしていませんが、それでもサポートしていることを警告しています。おそらくこれは、IE7ブラウザーでIE9を使用しており、IE9開発者ツールを使用してドキュメントモードを使用しているためです。あるいは、これはLSがサポートされているかどうかをテストするための間違った方法かもしれません。正しい方法は何ですか? また、私はいくつかのHTML5機能しか使用しておらず、大きなスクリプトをロードすることは、それらのいくつかのサポートを検出するだけの価値がないため、Modernizrを使用したくありません。
84 javascript  html 


7
DIFFユーティリティは2つのファイルに対して機能します。一度に3つ以上のファイルを比較するにはどうすればよいですか?
したがって、ユーティリティDiffは、2つのファイルに対して必要なように機能しますが、一度に2つ以上のファイル、場合によっては一度に最大10個のファイルとの比較が必要なプロジェクトがあります。これには、これらすべてのファイルを互いに並べて配置する必要もあります。私の研究では実際には何も判明していません。vimdiffは、一度に4つを比較できる機能を備えており、これまでで最高のようです。 私の質問:一度に3つ以上のファイルを比較するユーティリティ、またはdiff / vimdiffをハックして複数の比較を実行できるようにする方法はありますか?比較するファイルは比較的短いので、遅すぎないようにしてください。 前もって感謝します!

2
すでにラベル付けされた入力要素で「aria-labelledby」を使用する目的は?
多くのARIAデモWebサイトは、次のようなコードを使用しています。 &lt;label for="name" id="label-name"&gt;Your Name&lt;/label&gt; &lt;input id="name" aria-labelledby="label-name" type="text"&gt; しかしaria-labelledby、この場合、属性を使用する目的は何ですか?input要素がすでにによって標識されているlabel使用している要素forの属性を、そうではありませんか?

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.