HTML5(23)

23follower
goto_jp さんのアバター 59views

HTMLでSVGを描画する

あけましておめでとうございます、ゴトーです。 子供の頃から毎年浅草寺に初詣に参拝して、屋台の甘酒を飲んで新年を感じてます。 新年一発目の投稿は、そろそろスタンダード化してほしいSVGの利用について。スマホ用画像を何個も作るとか面倒じゃな... 2017年1月6日
nissy さんのアバター 10views

リンクを踏んだ時に新しいタブを開くようにする

初歩的内容でしたが、知らなかったのでメモです。 サイトを使っている側としては、こういう処理はすごいありがたいので、こういう細かい所も気をつけるようにしたいです。 aタグに以下のようにtarget=”_blank”... 2016年12月16日
かしこ さんのアバター 22views

ドロップダウンメニューを作りたかった

よくあるドロップダウンメニューを作りたくて、いろいろ参考にさせていただきながら作業 ■ html <ul id="main_menu_list"> <li class="large_menu">メニュー1... 2016年9月5日
かしこ さんのアバター 29views

htmlひな形

個人的メモ htmlひな形 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met... 2016年9月2日
kentomurata さんのアバター 89views

Safariはdatalistには未対応

datalistを使うと、入力フォームで入力候補を表示することができます。 これはHTML5から新しく導入されたもので、Chromeでは表示できるもののSafariでは表示できないので注意が必要です。 ただ、以下のように書けば未対応のブ... 2016年8月18日
harada さんのアバター 84views

指定したテキスト入力フォームにdatalistを追加して選択もできるようにする

WordPressのカスタムフィールドテンプレートを利用しているフォームタグの場合は以下のように記述します。 var parkinglist = '<datalist id="othercharge">'; parkingli... 2016年3月11日
harada さんのアバター 138views

【カスタムフィールドテンプレート】入力できる文字数を制限する

カスタムフィールドテンプレートを利用した入力項目で、文字数を制限したい場合一番簡単な方法はmaxlength属性を利用することです。 ダッシュボード>設定>カスタムフィールドテンプレート の「テンプレートコンテンツ」で、例えば以下のように... 2016年2月22日
harada さんのアバター 143views

Chromeでdatalistを利用するとhoverで表示される三角を非表示にする

‘datalist’タグを利用してテキスト入力フォームに入力候補を表示する際に、Firefoxはいいのですが、Chromeでどうしても三角アイコンが表示されるという現象を確認しました。 selectと同じようにap... 2016年1月27日
YY3ai2ui24 さんのアバター 74views

inputタグの入力欄に候補をだす

<input>タグにlist属性と<datalist>タグを使うと簡単に入力候補を実装できます。 また、<datalist>内部の<option>の中になにか文字を入れると、サブテキストが表... 2016年1月20日
nbeppu さんのアバター 934views

Electronで簡単にWebアプリをデスクトップアプリ化する

Electronは、HTML5/JavaScript で簡単にクロスプラットフォームのデスクトップアプリケーションを作成することができるツールです。 webview での表示もできますので、これを利用して簡単にWebアプリをデスクトップアプ... 2015年10月22日
harada さんのアバター 67views

HTML5:ダウンロードリンクを置く

HTML5ならdownload属性でダウンロードリンクも簡単なんですね! ダウンロードリンクはリンクを押すとダウンロードさせることができるリンクです。 記述方法 リンクしているURLとダウンロードURLが同じ場合などは省略もできるようで... 2015年7月17日
sakukazu さんのアバター 187views

iframe内で定義したメソッドを外のhtmlから呼び出す

< iframe id=hogeframe >内で以下のメソッドを定義したとします。 hogehoge = function (){ ~ }; 外部のhtmlからは以下でメソッドを使用できます。 document.getEl... 2015年3月13日
nbeppu さんのアバター 189views

JavaScript ライブラリを使わずに placeholder を実装する

HTML5 の placeholder 非対応ブラウザでも簡単に placeholder を実装する方法。jQuery などのライブラリは利用していません。 JavaScript function onFocusPlaceholder(... 2014年11月7日
Yukimi Sato さんのアバター 362views

IEでHTML5やCSS3を有効にできるレンダリングモード

<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"> IE=Edge:最新のモードを利用する chrome=1:「Chrome Frame for I... 2014年8月27日
Yukimi Sato さんのアバター 398views

HTML5でのstrongタグは「太字」表現ではなく「強調」したい時に使おう

<p><b>太字になります</b></p> <p><strong>太字になります</strong></p> どちらも同じように表示されますが... 2014年8月18日
Yukimi Sato さんのアバター 4,249views

HTML5でコピーライト表記をする時は「small」タグを使おう

HTML5のバリデータチェック時に覚えておきたいことより <small>コピーライト表記</small> XHTMLではaddressタグを使っていたので、HTML5でもそのまま使っていましたが、正確にはsma... 2014年8月13日
Yukimi Sato さんのアバター 269views

HTML5のinputのバリデートチェックをオフにする

<input type="email" formnovalidate> 「formnovalidate」を追加することでオフにすることができます。 ... 2014年8月11日
Yukimi Sato さんのアバター 269views

placeholderの文字色を変更する

//Chrome input::-webkit-input-placeholder{ color: red; } //FireFox input:-moz-placeholder{ color: red; } //IE input:-m... 2014年8月6日
Yukimi Sato さんのアバター 1,188views

HTML5で追加されたmainタグとroleについて

<main role="main"> ~ メインコンテンツ部分 ~ </main>   HTML5で追加されたmainタグはページ内で一度のみ使用することができます。 同時に「... 2014年5月27日
Yukimi Sato さんのアバター 1,003views

HTML5とCSS3のブラウザ別対応状況がわかるまとめ「HTML5 & CSS3 Support」

HTML5 & CSS3 Support http://fmbip.com/litmus/ CSS3の各セレクタ別に対応状況がまとめられており、特にIE対応の前には一度確認しておきたいページです。 ... 2014年5月16日