[html5] タグが付いた質問
HTML5 (HyperText Markup Language 5)とは、人間に読解が容易なセマンティックなコーディングを特徴とする、HTMLの5番目のバージョンである。HTML 4.xと比べ、より厳密な文章構造を要求する仕様となっている。また、article(記事)や、section(節)などの特別な意味を持つタグも追加されており、より「文書」としての意味付けを高度化させることが出来るようになっている。なお、ビデオ等のマルチメディアの再生・ドラッグ&ドロップ・オフライン処理等のAPIも追加されている。
289
質問
2
票
3
回答
2,966
閲覧数
画像要素を他の要素より先に表示させる方法
現在WEBページを運営しておりますが、初回読み込み時に背景→テキスト→画像の順番で表示されます。
テキストはWeb Fontで、画像はjQueryを使用していますので、個人的には納得(CDNとキャッシュを利用して2回目以降の読み込みはいたって快適)していたのですが「せめてヘッダー画像だけでも先に表示できないか」との要望を受けてしまい現在困っております。
画像の軽量化/...
2
票
3
回答
1,060
閲覧数
記事投稿サイトで、iframeタグの投稿を許可することは危険ですか?
ユーザーが記事を投稿できるようなサイトで、youTubeなどの動画サイトの動画を貼り付けできるようにiframeタグを許可したいのですが、それはセキュリティ的に見て危険でしょうか?
危険ならば何か対策などありますでしょうか。
ちなみにサイトはrailsで開発しています。
よろしくお願いします。
2
票
1
回答
843
閲覧数
iframe 内でのリンク移動
<p><a href="https://www.google.co.jp/">Google.co.jp</a></p>
上のようなHTMLファイル frame.html が有ったとして、これを下記のHTMLで読み込みました。
<html>
<iframe src="frame.html"></frame>
&...
2
票
1
回答
138
閲覧数
dispatchEvent経由でDnDしたい
DnD機能をJavaScriptからテストしたいと考えています.
EventTarget.dispatchEvent を利用して dragstart イベントをトリガーさせると、
DataTransfer オブジェクトが生成されず、event.dataTransfer が undefined になってしまい、
マウスによるDnDと同じ挙動になりません.
dataTransfer
https://...
2
票
1
回答
3,527
閲覧数
数字以外入力できないテキストボックスを作りたい
<input type="number">
を使った場合、Chrome では数字以外入力できませんが、他のブラウザでは数字以外の文字も入力できてしまいます。(submit時にエラーになりますが)
数字のみが入力可能なテキストボックスを作ることは出来るでしょうか?
2
票
1
回答
218
閲覧数
HTML5への変換で使用できない文字は?
XMLをXSLTを使用してHTML5に変換しています.使用しているXSLTプロセッサはSaxon 9.1Bです.(古いDITA Open Tooolkitについてくるもの)
<xsl:output method="html"
encoding="UTF-8"
indent="no"
doctype-system="...
2
票
1
回答
5,780
閲覧数
ドラッグ&ドロップで取得したファイルをinput type=fileに渡したい(chrome/firefox/ie)
既存のファイルアップロード機能にドラッグ&ドロップによるアップロード機能を追加したいと考えています。
既存がinput type=fileでファイルを選択した後にsubmit押下でアップロードしているので
ファイル選択の部分だけドラッグ&ドロップに変えたいのですが、
Chromeなら
$('input[type=file]')[0].files[0] = e.datatransfer....
2
票
2
回答
1,840
閲覧数
Safariでmp3ファイルの一時停止再生がうまくできない
html5のaudioを使って、ブラウザ上で音声ファイルを再生するプログラムを作成しております。
複数ファイルを連続して再生する必要があるため、ファイルを結合し、ブラウザで読み込ませていますが、safariで一時停止からの再生が正常に動作しない事象が発生しました。
mp3ファイルの結合は、単純結合(下記linuxコマンド)にて作成しております。
$ cat a.mp3 b.mp3 > c....
2
票
1
回答
148
閲覧数
Webサイトが検索結果に表示されない問題について
初めまして。
現在Webサイトを制作しているのですが、日本語で検索するとヒットせず、英語で検索すると
ヒットします。
各タグについて
titleタグ: 日本語でタイトルを入れています。
h1: 英語でタイトルを入れています。
おそらくh1タグの情報が検索結果にヒットしているのでしょうが、日本語でも検索結果に
ヒットさせたいのでしょうが、何か手段はありませんでしょうか?
Web ...
2
票
1
回答
793
閲覧数
画像を一括アップロードできるフォームでブラウザを閉じたあとも続きから入力できるようにしたい。
iPhoneの写真の容量平均が約3MB。画像を20枚一括でセレクトした場合、60MBのデータをローカルに記憶しなければいけません。
localStorageの容量が約5MB
WebSQLの容量が約50MB
これでは、選択された画像をローカルに保存するのは難しそうです。
そこで、<input type="file">で取得したFileオブジェクトをローカルストレージに保存することで、...
2
票
2
回答
1万
閲覧数
datatablesの検索機能で、検索する列の指定をしたいです
datatebles ver1.10.5 を使用しており、
検索機能で検索する列の指定をしたいのですが方法が分かりません。
分かる方がいましたらご教授をお願いします。
使用しているdatatablesのダウンロードページです。
http://datatables.net/download/
2
票
1
回答
6,911
閲覧数
画面のドキュメントの範囲へのドロップを禁止にする
画面のドキュメントの範囲へのドロップのみを禁止にする方法を調査していますが、なかなか答えが出せません。
javascript内で
$(function () {
$(document).on('drop', function (e) {
e.stopPropagation();
e.preventDefault();
...
2
票
2
回答
2万
閲覧数
複数ファイルの一括ダウンロード
Webブラウザで
1. Webページ上の「ダウンロード」リンクをクリックしたら、フォルダ選択のダイアログを表示
2. ユーザーが選択したフォルダに複数のファイルを一括でダウンロード
3. ダウンロードするファイル数は不定(サーバー側で決定)
このような要件があるのですが、何らかの方法で実現できるものなのでしょうか。
たとえば、ブラウザの特定のアドオンやプラグインを使用すれば実現できるとか。
...
2
票
1
回答
785
閲覧数
textAreaフォーカス時に高さを変更するには
Twitterのツイート入力欄のように、マウスカーソルをtextAreaにフォーカスしたときに
textAreaの高さを変更したいです。
jQueryを使って以下のようにしてみましたが、変化ありませんでした。
・javascript
$(function() {
$('#inputTextArea')
.focusin(function(e) {
$(this)....
2
票
3
回答
1,861
閲覧数
HTML5におけるdivとheader,main,footerの使い分け
HTML5を使ってウェブサイトを作っています。
mainタグやheader,footerタグを使おうと思っているのですが、有名なサイトをみると
<div id="header">
などとなっておりそれぞれのタグを使っていません。
どちらを使用するべきなのでしょうか。
教えて下さい。
2
票
1
回答
705
閲覧数
Evernote API の consumerKey, consumerSecret を流出しないようにする工夫
monacaを用いて、HTML5 + Javascriptベースでのスマートフォン用のEvernoteアプリ開発に取り組んでおります。
Evernoteのサーバーとやり取りするためには、キー(consumerKey, consumerSecret)を使い、OAuth認証する必要があります。
Evernote のウェブページを参考に開発をしていますが、このページのサンプルコードでは、...
2
票
1
回答
5,404
閲覧数
getimageDataを使ってもローカル環境だと画像が上手く読み込めません
今回、ページを開いた際にグレースケールの画像をcanvasに書き出し、そこにマウスを乗せると徐々にカラーがつく、という仕様のギャラリーページ(もどき)をつくってみました。
すると、下記の部分にエラーが出ました。
調べてみたところ、ローカル環境ではChromeとOperaにおいて同様のエラーが出るとのこと。
解決策はサーバー環境をMAMPなどで立ち上げることだそうで、...
2
票
1
回答
367
閲覧数
canvasに対するeffect:explodeが反映されない
下記の様に、canvasにexplodeのアニメーションをかけたところ、動作しません。
$("#my_canvas").effect("explode", {} ,200);
こちらはOK
$("#my_canvas").effect("bounce", {} ,200);
canvasにかけられるアニメーションとかけられないアニメーションがあるのでしょうか?
追記:
...
2
票
1
回答
2,171
閲覧数
スクロールバーの表示/非表示イベント
javascript でスクロールバーの表示/非表示が切り替わった時に発生するイベントはありますか。
何らかの方法でスクロールバーの表示/非表示の変化を検出することは出来るでしょうか。
動的に表示内容が変化するWebサイトを中央寄せで作っている場合、
表示コンテンツが増えてスクロールバーが表示されると、
スクロールバーの幅の分だけ表示領域が狭くなるため、全体の表示が少し左にずれます。
...
2
票
1
回答
754
閲覧数
セレクト要素への3点リーダー
ご質問失礼いたします。
テキストなどがある要素の横幅に収まらない場合、下記のように書くことで改行を禁止し、3点リーダー(...)を最後に持たせる事ができるかと想うのですが
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
これをセレクト要素のオプション要素(各項目)...
2
票
1
回答
492
閲覧数
ページ遷移後のjson呼び出しについて動かなくて困っています。
monacaで開発しており、index.htmlからdetail.htmlに飛んだ時に飛先のdetail.htmlでjasonを動かしたいのですが動いてる気配がなく困っています。
飛んだ際もスライドして飛び「ロード中」のようなページを読み込む感じもないのでそれでjsonが呼び出されていないのかとも色々と考えてます。
ご教示いただけると幸いです。
↓index.html↓
<script&...
2
票
1
回答
3,613
閲覧数
iPhoneでvideoのサムネイルを表示させる方法
MonacaクラウドでiPhone向けのアプリを試作中です。
cordovaのcaptureVideoを使って取得した動画を、標準アプリの写真のように
動画のカットをサムネイル表示させクリックすると再生させたいと思っています。
表示される動画のカットは1フレーム目などで構いません。
外部サイトに動画を送信せず、ローカルだけで処理したいと考えています。
...
2
票
2
回答
308
閲覧数
HTML5ですが、strongタグをつけなくても文字が太くなります。
お世話になります。
HTML5ですが、strongタグをつけなくても文字が太くなります。
実行環境はGoogle Chromeです。
どのようにしたら、strongタグを付けない文字列が太くならないのでしょうか?
ご教授願います。
以下、ソースコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
...
2
票
1
回答
993
閲覧数
背景画像に合わせて video タグを配置する方法について
現在、あるウェブサイトを html と css で構築しています。
実現したいのは以下のことです。
一枚絵の画像を画面いっぱいの背景として使用する
画像中央にある iPad のようなデバイスの液晶部分に動画を表示する
背景画像については body 要素に background-size: cover として指定してやれば簡単に画面いっぱいの背景にすることが出来ます。
body {
...
2
票
1
回答
2,252
閲覧数
PCとモバイルで再生できて、ダウンロードの出来ない動画ストリーミングサーバが知りたい
現在動画のアプリケーションを検討しています。
要件としては下記です。
Windows (PC版)、iOS、iPhone、Android スマホ、Androidタブレット、iPadで再生できる。
動画がダウンロードできないこととする。
そこで Red5 のストリーミングサーバを使ってアプリケーションを開発したのですが
スマホ、タブレットが再生できません。(Flash が原因だと思います)
...
2
票
1
回答
321
閲覧数
MonacaIDEへのカスタムプラグインのインポートについて
MonacaIDEに自作したCordovaプラグインをインポートすることはできますか。
2
票
1
回答
2,540
閲覧数
blurイベントで開始した非同期処理が完了するまでフォーム送信をさせないためには
よろしくお願いいたします。
HTMLでコード入力用のテキストボックス(#item_cd)があります。
javascriptでは、#item_cdのonblurイベントで、入力されたコードからマスタデータを参照して、取得した値から名称の表示や計算を行うような処理を記述しました。
処理はdeferredとpromiseを使って取得~計算までを一連の流れとして記述しています。
また、画面には「登録」...
1
票
2
回答
233
閲覧数
ブラウザの多重クリック防止
CGIを使って、Webサーバー内のコマンドを実行したいのですが、クライアント側での多重クリックを防ぐためWebブラウザ上でボタンクリック後、一定期間ボタンを無効にするようなことは出来るでしょうか?
1
票
2
回答
115
閲覧数
あるセレクタの直下かつ先頭というCSSセレクタはありますか?
こちらのspanには適用させず、
<div>テキスト<span>テスト1</span>テキスト<div>
こちらのspanには適用できるセレクタを探しています。
<div><span>テスト2</span>テキスト<div>
divの直下かつ先頭(テキストを除く)という擬似クラス等はないのでしょうか。...
1
票
2
回答
389
閲覧数
JQuery 要素を思うように捉えられない
====質問===
table内の行に配置されたボタン要素押下で、当該tableの一番下の行=tr要素を取得したいのですが自分の未熟さから捉えられない状態です。下の図の緑枠のtr要素を変数$rowに格納したいのですが、どういった関数記述で達成できるのでしょうか?
ちなみに、console.logに$(this).nextAll("table").eq(0).prop("tagName")...
1
票
1
回答
616
閲覧数
アドレスバー直接入力に対するXSS脆弱性について
AngularベースのWebアプリケーションを作成していますが、セキュリティ診断サービスを受けたところ、URL末尾に「?'">alert(document.cookie)」を付与するとJavaScriptが解釈されて実行されてしまう脆弱性を指摘されましたが、いくつか疑問があります。
・そもそも、アプリケーションの対応で止めることが可能なのか?
・...
1
票
1
回答
574
閲覧数
HTML Living Standard の変更点の見方がわかりません
HTML Living StandardはW3Cで公開されているHTML5.1,HTML5.2のようなマイナーバージョンがなく、常にアップデートされていく仕様かと思います。
HTML Living Standardの公式ドキュメントおよび日本語訳版を見ても、
いつ何が追加になったのか、削除されたのか(差分)がわかりません。
どこを見れば差分がわかるのでしょうか?
...
1
票
2
回答
1,282
閲覧数
数式をJavascriptから読み込んでHTML上に表示させたい(MathML+MathJax)
MathMLという、数式をWEB上で表示するマークアップ言語を
Javascriptから呼び出してHTML上で使用したいのですが、うまく行きません。
Javascript側で以下のような関数を作って
function displayText()
{
var str = "<math>";
str += "<mi>i</mi>";
...
1
票
1
回答
2万
閲覧数
フォルダ選択ダイアログで選択したフォルダの絶対パスを取得したい
下記で、ディレクトリの選択ダイアログが表示され、testメソッドでディレクトリ内のファイル名を取得することはできたのですが、
選択したディレクトリまでの絶対パスは取得する方法はないでしょうか?
◆HTML
<input type="file" id="dirselect" onChange="test(this.files)" webkitdirectory directory />...
1
票
1
回答
5,546
閲覧数
動画ファイルを新規に読み込み、すべてデータを読み込み終わってから再生を始めたい
ネットワークドライブに置いたexaple.mp4を新規に読み込み、
すべてデータを読み込み終わってから再生を始めたいです。
example.mp4は100MBくらいあり、index.htmとexample.mp4は
ネットワークドライブに置いてあります。
キャッシュを使わないように下記のように書いてみました。
<head>
<meta http-equiv="Pragma" ...
1
票
2
回答
731
閲覧数
ボタンをクリックするとAjaxでtextareaがもう1つ増えるような仕組みを作りたい
form_for内にajaxのリンク付きボタンを設置したい場合、どのように記述するのが良いのでしょうか。
本来であれば
<%= form_for @ranking do |f| %>
<%= f.text_area :title %>
<%= button_to '500ポイント消費し、ランキング順位を追加する', ...
1
票
1
回答
152
閲覧数
表示されているフォントを知る方法はありますか? [重複]
下記画像のようにChromeデベロッパーツールでFontを調べてみました。
Arial, "Helvetica Neue", Helvetica, ... とあるのは、ブラウザーがArialがあれば、Arialを使う、なければ、Helvetica Neueを使う、と順に搭載されているフォントがあれば使うよっていう命令だと思うのですが、今知りたいのはこの順番ではなくて、...
1
票
1
回答
833
閲覧数
CSSで空白を挿入する方法
<div class='a'>
<span class='b'>1</span>
<span class='c'>いい天気</span>
<div>
このようなhtmlがあって
1いい天気
と表示されます。
これをCSSを編集することで
1 いい天気
のように間にスペースほどの間隔を空けることは可能ですか?
(...
1
票
1
回答
903
閲覧数
Vue.jsのマスタッシュ構文の中身が反映されないです。どうすれば反映されるのでしょうか?
Vue.jsのマスタッシュ構文の中身が反映されないです。具体的には、messageと表示されます。
どうすれば反映されるのでしょうか?ご教授願います。
以下はHTMLファイルです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>...
1
票
1
回答
3,774
閲覧数
横スクロールに対してのみ position: fixed な要素
<header>ヘッダー</header>
<main>
縦横に長いコンテンツ
</main>
<footer>フッター</footer>
縦スクロール時には、全ての要素がスクロールに追従して表示位置が変わる(通常の動作)。
横スクロール時には、main 部分はスクロールに追従して表示位置が変わるが、「ヘッダー」と「...
1
票
2
回答
674
閲覧数
iPhone & FileAPI で日本語タイトルのファイルを利用する方法
環境
iPhone6
UserAgent: Mozilla/5.0 (iPhone; CPU iPhone OS 10_1_1 like Mac OS X) AppleWebKit/602.2.14 (KHTML, like Gecko) Version/10.0 Mobile/14B150 Safari/602.1
iPhone からファイルアップロードを利用するため FileAPI ...
1
票
1
回答
475
閲覧数
<input type="file" accept="..."> の拡張子フィルタで、大文字小文字を区別する方法
htmlでファイルの投稿ボタンを以下のように作りました。
<form>
<input type="file" accept=".jpg">
...
</form>
windowsのgoogle-chromeでこのボタンを実行してファイル選択ダイアログを開くと、拡張子".jpg" と ".JPG" のファイルが表示されます。
この時、...
1
票
1
回答
205
閲覧数
phina.jsで当たり判定を取得できない
phina.js Tips集 #当たり判定編 - Qiita
上記サイトを参考にphina.jsライブラリを使用し、下記のコードで四方八方から向かってくる正方形をよけてスコアを稼ぐ避けげーを作ろうと思っているのですが、100行目の
if(shape.hitTestElement(sprite)){
var self = this;
...
1
票
1
回答
164
閲覧数
olの行頭番号をboldにするには??
XMLアーキテクチャにDITA(Wikipediaへのリンク)というのがありまして、それをPDFにしたりHTMLにしたりする仕事をしています.今回はHTML5への変換の質問です.
簡単に言いますと、表題のとおりolの行頭番号にfont-weight:bold;を適用したいのですがやり方がわかりません.
まずDITAには作業の手順を示すsteps/stepという要素があります....
1
票
2
回答
9,427
閲覧数
次の要素へフォーカスを移動(タブキー押下をエミュレート)したい
エンターキー押下など、特定のイベント発生時にタブキー押下と同様の動作(次の要素へフォーカス移動)を行いたいです。
例えば、以下のコードで試したところ、keyup(keyCode = 9)のイベントはトリガーされますが、フォーカスは移動しませんでした。このような key* 系のイベントを手動でトリガーしてもフォーカスは移動しないと考えてよいでしょうか。
代替手段としてどのような方法があるでしょうか?...
1
票
1
回答
1,586
閲覧数
ページ内リンクで移動した後、#付与せず画面更新せず、元の状態へ遷移させたい
最初に下記リンクをクリックすると
<a href="#hoge">リンク</a>
下記URLへ遷移する
http://example.com/#hoge
次に下記リンクをクリックすると画面上は最初の状態へ戻るのですが、
<a href="#">最初の状態へ戻る</a>
URLには#が付与される
http://example....
1
票
1
回答
842
閲覧数
AndroidでCordova暗号化プラグインとFileAPIが併用出来ない
初投稿になります。
Monacaを使ってハイブリットアプリを作成しまして、iOS版は無事リリース出来たのですが、Android版で躓いています。
Monacaデバッガーでは正常動作するんですが、Androidでデバッグビルドして動作検証した際、エラーが多発するため、一個一個メソッドやプラグインの検証を重ねた結果、
https://github.com/tkyaji/cordova-plugin-...
1
票
1
回答
910
閲覧数
HTMLの値を隠す方法
以下のようにしてブラウザ画面上で「aaa」の文字が隠れていることは確認できました。
F12などでブラウザツールを出してみると、実際はタグの値が見えてしまいます。
タグ内の値を見ないようにする方法などありませんでしょうか?
<input type="hidden" th:name="test" th:value="aaa" ></input>
1
票
2
回答
727
閲覧数
HTML表示開始時にjavascriptを起動したりはできないのでしょうか。
Springboot MVCを勉強しています。
index.htmlをHTML5で用意し、コントローラークラスをjavaで用意しました。
■コントローラクラス
@RequestMapping(value = "/", method = RequestMethod.GET)
public ModelAndView index(ModelAndView mav) {
mav....
1
票
1
回答
1,844
閲覧数
<input type="email"> バリデーションエラーの言語設定
ブラウザによりますが、メールアドレス入力欄にて
@がなかったり、@以降がなかったりすると
エラーが表示されますが、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form method="post"&...