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

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


5
(ビューポートだけでなく)ページ全体のオーバーレイを作成しますか?
だから私はかなり一般的だと思う問題を抱えていますが、まだ良い解決策を見つけていません。ページ全体を覆うオーバーレイdivを作成したい...ビューポートだけでなく。なぜこれが難しいのかわかりません... body、htmlの高さなどを100%に設定してみましたが、うまくいきません。ここに私がこれまでに持っているものがあります: <html> <head> <style type="text/css"> .OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;} body { height: 100%; } html { height: 100%; } </style> </head> <body> <div style="height: 100%; …
93 html  css 



6
ボタンがクリックされたときにjQueryを使用してオーディオファイルを再生する
ボタンをクリックしたときにオーディオファイルを再生しようとしていますが、機能しません。htmlコードは次のとおりです。 <html> <body> <div id="container"> <button id="play"> Play Music </button> </div> </body> </html> 私のJavaScriptは: $('document').ready(function () { $('#play').click(function () { var audio = {}; audio["walk"] = new Audio(); audio["walk"].src = "http://www.rangde.org/static/bell-ring-01.mp3" audio["walk"].addEventListener('load', function () { audio["walk"].play(); }); }); }); 私もそのためのフィドルを作成しました。

4
定義された幅/高さのdivのコンテンツの中央に垂直に配置する方法は?
定義された幅/高さでコンテンツを垂直方向に中央揃えする正しい方法は何でしょうかdiv。 この例では、高さが異なる2つのコンテンツがあり、クラスを使用して両方を垂直方向に中央揃えする最良の方法は何ですか.content。(そしてそれはすべてのブラウザで動作し、の解決策はありませんtable-cell) 心にいくつかのソリューションを持っていますが、1が使用され、他のアイデアを知っていただきたいと思いますposition:absolute; top:0; bottom: 0;とmargin auto。

5
HTMLのdata-reactid属性とは何ですか?
一部のページのHTMLを調べていたところ、一部のページで次のように「data-reactid」属性が使用されていることに気付きました。 <a data-reactid="......" ></a> その属性とは何ですか?その機能は何ですか?


4
HTMLアンカーリンク-hrefとonclickの両方?
JavaScriptを実行するアンカータグを作成して、それがどこにあるかhrefに移動します。JavaScriptを実行してから、window.locationまたはtop.locationそのhref場所に設定する関数を呼び出しても機能しません。 それでは、ページに「Foo」というIDの要素があるとします。次のようなアンカーを作成します。 <a href="#Foo" onclick="runMyFunction(); return false;">Do it!</a> これをクリックすると、runMyFunctionを実行してからページにジャンプします#Foo(リロードは発生させません-使用top.locationするとページがリロードされます)。 提案?ここで役立つ場合は、jQueryを使用して満足しています...

18
@ font-faceを使用してテキストを<canvas>に描画すると、最初は機能しません
@ font-faceを介して読み込まれた書体でキャンバスにテキストを描画すると、テキストが正しく表示されません。まったく表示されない(Chrome 13およびFirefox 5の場合)か、書体が間違っています(Opera 11)。このタイプの予期しない動作は、書体を使用した最初の図面でのみ発生します。その後、すべてが正常に動作します。 それは標準的な動作か何かですか? ありがとうございました。 PS:以下はテストケースのソースコードです &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;@font-face and &amp;lt;canvas&amp;gt;&lt;/title&gt; &lt;style id="css"&gt; @font-face { font-family: 'Press Start 2P'; src: url('fonts/PressStart2P.ttf'); } &lt;/style&gt; &lt;style&gt; canvas, pre { border: 1px solid black; padding: 0 1em; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;@font-face and &amp;lt;canvas&amp;gt;&lt;/h1&gt; &lt;p&gt; Description: click …
93 html  canvas  font-face 

1
P要素内にネストできるHTML5要素のリスト?
私は、w3バリデーターがエラーを表示しないように、段落要素内にネストできるすべての有効なHTML5要素を理解しようとしています。つまり、次のコードでドットを置き換えることができるすべてのタグを考えて、w3バリデーターがエラーを表示しないようにしているのです。 &lt;p&gt;...&lt;/p&gt; そのようなリストはありますか?運がよからずグーグルで検索してみました。 逆のリスト、つまり段落要素内にネストできない要素が利用できる場合でも、それで十分です。
93 html  nested 

10
無効な入力テキストの色
以下の単純なHTMLは、FirefoxとWebKitベースのブラウザーでは異なって表示されます(私はSafari、Chrome、iPhoneでチェックインしました)。 Firefoxでは境界線とテキストの両方が同じ色(#880000)ですが、Safariではテキストが少し明るくなります(透明度が適用されているかのように)。 どういうわけかこれを修正できますか(Safariでこの透明度を削除します)? &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; input:disabled{ border:solid 1px #880000; background-color:#ffffff; color:#880000; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;form action=""&gt; &lt;input type="text" value="disabled input box" disabled="disabled"/&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;
93 iphone  html  css  safari  webkit 

13
HTML5ビデオポスターをビデオ自体と同じサイズにする
ビデオ自体の正確なサイズに合うようにHTML5ビデオポスターのサイズを変更する方法を知っている人はいますか? ここに問題を示すjsfiddleがあります:http ://jsfiddle.net/zPacg/7/ これがそのコードです: HTML: &lt;video controls width="100%" height="100%" poster="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png"&gt; &lt;source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" /&gt; &lt;source src="http://demo.inwebson.com/html5-video/iceage4.ogg" type="video/ogg" /&gt; &lt;source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webm" /&gt; &lt;/video&gt;​ CSS: video{ border:1px solid red; }​ オレンジの長方形は、ビデオの赤い枠に合わせて拡大縮小されていないことに注意してください。 また、以下のCSSを追加するだけでは、ポスターとともにビデオのサイズが変更されるため、機能しません。 video[poster]{ height:100%; width:100%; }


13
tdの幅、機能しない?
だから私はこのコードをここに持っています: &lt;table&gt; &lt;tr&gt; &lt;td width="200px" valign="top"&gt; &lt;div class="left_menu"&gt; &lt;div class="menu_item"&gt; &lt;a href="#"&gt;Home&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/td&gt; &lt;td width="1000px" valign="top"&gt;Content&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; CSSを使って .left_menu { background: none repeat scroll 0 0 #333333; border-radius: 5px 5px 5px 5px; font-family: Arial,Helvetica,sans-serif; font-size: 12px; font-weight: bold; padding: 5px; } .menu_item { background: none repeat scroll …
93 html  css  html-table  width 

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