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

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

5
aria-labelとは何ですか?どのように使用すればよいですか?
数時間前、私はaria-label属性について読みました。 現在の要素にラベルを付ける文字列値を定義します。 しかし、私の意見では、これはtitle属性が行うことになっていたことです。私はいくつかの例と説明を得るためにMozilla Developer Networkをさらに調べましたが、私が見つけた唯一のものは <button aria-label="Close" onclick="myDialog.close()">X</button> これは私にラベルを提供していません(それで私は考えを誤解したと思います)。ここjsfiddleで試してみました。 だから私の質問は、なぜaria-label私はそれを必要とし、どのようにそれを使うべきなのでしょうか?

4
HTML5テーブルのcellpadding、cellspacing、valign、alignに代わるものは何ですか?
ではVisual Studioのは、私はこれらの警告を見ています: 検証(HTML 5):属性 'cellpadding'は要素 'table'の有効な属性ではありません。 検証(HTML 5):属性 'cellspacing'は要素 'table'の有効な属性ではありません。 検証(HTML 5):属性 'valign'は要素 'td'の有効な属性ではありません。 検証(HTML 5):属性 'align'は要素 'td'の有効な属性ではありません。 それらがHTML5の有効な属性ではない場合、CSSでそれらを置き換えるものは何ですか?

6
W3Cバリデーターで有効なPHPを使用してHTTPヘッダーをUTF-8に設定する方法
次のコードを使用して、さまざまなものをHTMLページにエコーするいくつかのPHPページがあります。 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> ただし、W3Cバリデーターを使用して検証すると、次のようになります。 HTTPヘッダー(iso-8859-1)で指定された文字エンコードが、要素(utf-8)の値と異なります。 私はPHPを初めて使用するので、PHPファイルのヘッダーをHTMLファイルと一致するように変更できるかどうか、また変更すべきかどうか疑問に思っていました。
319 php  html  http-headers 

12
HTML本文のmailtoリンク
mailtoHTMLドキュメントにいくつかのリンクがあります。 <a href="mailto:etc..."> HTML形式の本文を mailto:部分にhrefか? <a href="mailto:me@me.com?subject=Me&body=<b>ME</b>">Mail me</a> iOSの(2016)では、追加<i>して<b>、単純なイタリックで太字のフォーマットタグません。
319 html  email  mailto 

16
HTML5 / JavaScriptを使用してファイルを生成および保存する
私は最近WebGLをいじっていて、Colladaリーダーを動かしてもらいました。問題は、それがかなり遅い(Colladaは非常に冗長な形式です)ので、ファイルをより使いやすい形式(おそらくJSON)に変換し始めます。JavaScriptでファイルを解析するためのコードがすでにあるので、それをエクスポーターとして使用することもできます。問題は節約です。 これで、ファイルを解析して結果をサーバーに送信し、ブラウザーにサーバーからのダウンロードとしてファイルを要求するようにできることがわかりました。しかし実際には、サーバーはこの特定のプロセスとは何の関係もないので、なぜそれを関与させるのでしょうか。目的のファイルの内容はすでにメモリにあります。純粋なJavaScriptを使用してダウンロードをユーザーに提示する方法はありますか?(私はそれを疑っていますが、尋ねるかもしれません...) そして明確にするために:私はユーザーの知識なしにファイルシステムにアクセスしようとはしていません!ユーザーはファイルを(おそらくドラッグアンドドロップで)提供し、スクリプトはファイルをメモリ内で変換し、結果をダウンロードするように求められます。ブラウザに関する限り、これらはすべて「安全な」アクティビティである必要があります。 [編集]:私はそれを前に述べなかったので、「フラッシュ」と答えたポスターは十分に有効ですが、私がしていることの一部は、純粋なHTML5で何ができるかを強調する試みです...私の場合はすぐに。(「実際の」Webアプリを実行しているすべての人にとって、これは完全に有効な答えですが)サーバーに関与したくない限り、私は運が悪いように見えます。とにかくありがとう!

23
CSS3のborder-radiusプロパティとborder-collapse:collapseは混合しません。border-radiusを使用して、角が丸い折りたたみテーブルを作成するにはどうすればよいですか?
編集-元のタイトル:(折りたたみ、丸みを帯びたコーナーテーブルを作成するためborder-collapse:collapseにCSS)を達成する別の方法はありますか? テーブルの境界線を折りたたむだけでは根本的な問題は解決されないことが判明したので、議論をより反映するようにタイトルを更新しました。 CSS3 border-radiusプロパティを使用して、角が丸いテーブルを作成しようとしています。私が使用しているテーブルスタイルは次のようになります。 table { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px } ここに問題があります。border-collapse:collapseプロパティも設定したいのですが、設定するとborder-radius機能しなくなります。border-collapse:collapse実際に使用しなくても同じ効果を得ることができるCSSベースの方法はありますか? 編集: ここで問題を説明する簡単なページを作成しました(Firefox / Safariのみ)。 問題の大部分は、コーナーを丸くするようにテーブルを設定しても、コーナーtd要素のコーナーに影響しないことです。テーブルがすべて1色の場合はtd、最初の行と最後の行でそれぞれ上隅と下隅を丸めることができるので、これは問題にはなりません。ただし、見出しとストライプを区別するためにテーブルの背景色を変えているので、内側のtd要素にも丸い角が表示されます。 提案されたソリューションの概要: 丸い角を持つ別の要素でテーブルを囲むと、テーブルの四角い角が「にじむ」ため、機能しません。 ボーダーの幅を0に指定しても、テーブルは折りたたまれません。 ボトムtdゼロにCELLSPACINGを設定した後、まだ直角の角。 代わりにJavaScriptを使用すると、問題を回避できます。 可能な解決策: テーブルはPHPで生成されるので、外側のth / tdsのそれぞれに異なるクラスを適用し、各コーナーを個別にスタイル設定できます。あまりエレガントではなく、複数のテーブルに適用するのが少し面倒なので、私はこれをしたくないので、提案を続けてください。 考えられる解決策2は、JavaScript(具体的にはjQuery)を使用してコーナーのスタイルを設定することです。この解決策も機能しますが、私が探しているものはまだ十分ではありません(私はうるさいです)。2つの予約があります。 これは非常に軽量なサイトです。JavaScriptを最小限に抑えたいと思います border-radiusを使用することの私にとっての魅力の一部は、優雅な低下と漸進的な強化です。丸みを帯びたすべての角にborder-radiusを使用することで、CSS3対応のブラウザーでは常に丸みを帯びたサイトになり、他のブラウザーでは一貫して正方形のサイトになりたいと思っています(私はIEを見てます)。 今日、CSS3でこれを実行する必要がないように思えるかもしれませんが、私には理由があります。また、この問題はw3c仕様の結果であり、CSS3のサポートが不十分ではないため、CSS3がより広範囲にサポートされている場合でも、どのソリューションも関連性があり有用です。

10
モバイルWebページでズームを「無効」にするにはどうすればよいですか?
私は、基本的にいくつかのテキスト入力を備えた大きなフォームであるモバイルWebページを作成しています。 しかし(少なくとも私のAndroid携帯電話では)、入力をクリックするたびに、ページ全体がそこでズームし、ページの残りの部分が見えなくなります。モバイルWebページでこの種のズームを無効にするHTMLまたはCSSコマンドはありますか?
316 html  css  mobile 

18
JavaScript / HTML5の効果音
ゲームのプログラミングにHTML5を使用しています。私が今遭遇している障害は、効果音を再生する方法です。 特定の要件は少数です。 複数のサウンドを再生してミックスし、 同じサンプルを複数回再生し、場合によっては再生を重ねて、 任意の時点でサンプルの再生を中断し、 できれば(低品質の)RAW PCMを含むWAVファイルを再生してくださいが、もちろん変換できます。 私の最初のアプローチは、HTML5 <audio>要素を使用して、ページ内のすべてのサウンドエフェクトを定義することでした。FirefoxはWAVファイルを完全に再生しますが、#play複数回呼び出しても実際にはサンプルが複数回再生されるわけではありません。HTML5仕様についての私の理解から、<audio>要素は再生状態も追跡するので、それが理由を説明しています。 私の当面の考えは、オーディオ要素のクローンを作成することでした。そのため、次の小さなJavaScriptライブラリを作成しました(jQueryに依存します)。 var Snd = { init: function() { $("audio").each(function() { var src = this.getAttribute('src'); if (src.substring(0, 4) !== "snd/") { return; } // Cut out the basename (strip directory and extension) var name = src.substring(4, src.length - 4); // Create the …

10
Div幅100%-固定ピクセル数
テーブルやJavaScriptを使用せずに次の構造を実現するにはどうすればよいですか?白い境界線はdivの端を表しており、質問には関係ありません。 中央の領域のサイズは変化しますが、正確なピクセル値があり、構造全体がそれらの値に従ってスケーリングされます。単純化するために、「中央の100%-n px」の幅を上部中央と下部中央のdivに設定する方法が必要です。 クリーンなクロスブラウザソリューションに感謝しますが、それが不可能な場合は、CSSハックで対応できます。 ここにボーナスがあります。私が苦労して、テーブルまたはJavaScriptを使用してしまう別の構造。少し異なりますが、新しい問題が発生します。主にjQueryベースのウィンドウシステムで使用していますが、レイアウトをスクリプトに含めず、1つの要素(中央の要素)のサイズのみを制御したいと考えています。
316 html  css  height  width 

27
選択したラジオボタンの値を取得する方法
ラジオボタンのグループから選択した値を取得したい。 これが私のHTMLです: <div id="rates"> <input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate <input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate <input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate </div> これが私の.jsです: var rates = document.getElementById('rates').value; var rate_value; if(rates =='Fixed Rate'){ rate_value = document.getElementById('r1').value; }else if(rates =='Variable Rate'){ rate_value = document.getElementById('r2').value; …

15
JavaScriptを使用してCSSファイルをロードする方法
JavaScriptを使用してCSSスタイルシートをHTMLページにインポートすることは可能ですか?もしそうなら、それはどのように行うことができますか? PS JavaScriptは私のサイトでホストされますが、ユーザー<head>が自分のWebサイトのタグを挿入できるようにして、サーバーでホストされているCSSファイルを現在のWebページにインポートできるようにする必要があります。(cssファイルとjavascriptファイルの両方が私のサーバーでホストされます)。
316 javascript  html  css  dhtml 

3
中央に1つのフレキシブルな列を持つ2つの固定幅の列をどのように持つことができますか?
左と右の列の幅が固定されている3列のフレックスボックスレイアウトを設定しようとしています。中央の列は、利用可能なスペースを埋めるために曲がっています。 列の寸法を設定しても、ウィンドウが縮小するにつれて、列は縮小しているように見えます。 誰でもこれを達成する方法を知っていますか? さらに、ユーザーの操作に基づいて右の列を非表示にする必要があります。その場合、左の列は固定幅のままですが、中央の列が残りのスペースを埋めます。 #container { display: flex; justify-content: space-around; align-items: stretch; max-width: 1200px; } .column.left { width: 230px; } .column.right { width: 230px; border-left: 1px solid #eee; } .column.center { border-left: 1px solid #eee; } <div id="container"> <div class="column left"> <p>Anxiety was a blog series that ran in the …
316 html  css  flexbox 

6
最初の直接の子専用のCSSセレクターはありますか?
私は次のhtmlを持っています <div class="section"> <div>header</div> <div> contents <div>sub contents 1</div> <div>sub contents 2</div> </div> </div> そして次のスタイル: DIV.section DIV:first-child { ... } なんらかの理由で、スタイルが「サブコンテンツ1」 <div>と「ヘッダー」に 適用されていることがわかりません<div>。 スタイルのセレクターは、「セクション」というクラスを持つdivの最初の直接の子にのみ適用されると思いました。セレクタを変更して必要なものを取得するにはどうすればよいですか?
315 html  css  css-selectors 

18
HTML5キャンバスでの画像のサイズ変更
javascriptとcanvas要素を使用してクライアント側でサムネイル画像を作成しようとしていますが、画像を縮小するとひどく見えます。リサンプリングがバイキュービックではなく「ニアレストネイバー」に設定されているため、フォトショップで縮小されたように見えます。このサイトを正しく表示することは可能です。はキャンバスを使用しても問題なく実行できるすることは可能です。「[Source]」リンクに示されているのと同じコードを使用してみましたが、それでもひどいようです。私が見逃しているもの、設定する必要のある設定などはありますか? 編集: jpgのサイズを変更しようとしています。リンク先のサイトとフォトショップで同じjpgのサイズを変更してみましたが、サイズを小さくすると問題ありません。 関連するコードは次のとおりです。 reader.onloadend = function(e) { var img = new Image(); var ctx = canvas.getContext("2d"); var canvasCopy = document.createElement("canvas"); var copyContext = canvasCopy.getContext("2d"); img.onload = function() { var ratio = 1; if(img.width > maxWidth) ratio = maxWidth / img.width; else if(img.height > maxHeight) ratio = maxHeight / img.height; …

1
フレックスアイテムが過去のコンテンツサイズを縮小しないのはなぜですか?
フレックスボックスの列が4つあり、すべてが正常に動作しますが、列にテキストを追加して大きなフォントサイズに設定すると、フレックスプロパティにより、列が必要以上に広くなります。 私が使用しようword-break: break-wordとしましたが、それでも役に立ちましたが、列のサイズを非常に小さい幅に変更すると、テキストの文字が複数行に分割され(1行に1文字)、それでも列の幅は1文字のサイズより小さくなりません。 このビデオを見てください (最初は最初の列が最小ですが、ウィンドウのサイズを変更すると、それが最も広い列になります。フレックス設定を常に尊重したいので、フレックスサイズ1:3:4:4) 私は知っています、フォントサイズと列のパディングをより小さく設定することは助けになります... 使用できませんoverflow-x: hidden。 JSFiddle .container { display: flex; width: 100% } .col { min-height: 200px; padding: 30px; word-break: break-word } .col1 { flex: 1; background: orange; font-size: 80px } .col2 { flex: 3; background: yellow } .col3 { flex: 4; background: skyblue } .col4 { …
313 html  css  flexbox 

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