フォームでラベルもクリックできるようにする

webサイトとかで会員登録とかアンケートフォームを入力しているとき、ラジオボタンとかチェックボックスにおいて、ボタン部分押さなくても横のラベル部分クリックすることで選択状態にできるサイトとできないサイトがあった。前者の方…

続きを読む

HTMLでSVGを描画する

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

続きを読む

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

初歩的内容でしたが、知らなかったのでメモです。 サイトを使っている側としては、こういう処理はすごいありがたいので、こういう細かい所も気をつけるようにしたいです。 aタグに以下のようにtarget=”_blan…

続きを読む

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

よくあるドロップダウンメニューを作りたくて、いろいろ参考にさせていただきながら作業 ■ html <ul id=”main_menu_list”> <li class=”large_menu”>メ…

続きを読む

htmlひな形

個人的メモ htmlひな形 <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <meta name=”desc…

続きを読む

Safariはdatalistには未対応

datalistを使うと、入力フォームで入力候補を表示することができます。 これはHTML5から新しく導入されたもので、Chromeでは表示できるもののSafariでは表示できないので注意が必要です。 ただ、以下のように…

続きを読む

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

WordPressのカスタムフィールドテンプレートを利用しているフォームタグの場合は以下のように記述します。 var parkinglist = ‘<datalist id=”othercharge”>’; …

続きを読む

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

カスタムフィールドテンプレートを利用した入力項目で、文字数を制限したい場合一番簡単な方法はmaxlength属性を利用することです。 ダッシュボード>設定>カスタムフィールドテンプレート の「テンプレートコンテンツ」で、…

続きを読む

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

‘datalist’タグを利用してテキスト入力フォームに入力候補を表示する際に、Firefoxはいいのですが、Chromeでどうしても三角アイコンが表示されるという現象を確認しました。 selec…

続きを読む

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

<input>タグにlist属性と<datalist>タグを使うと簡単に入力候補を実装できます。 また、<datalist>内部の<option>の中になにか文字を入れると…

続きを読む

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

Electronは、HTML5/JavaScript で簡単にクロスプラットフォームのデスクトップアプリケーションを作成することができるツールです。 webview での表示もできますので、これを利用して簡単にWebアプ…

続きを読む

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

HTML5ならdownload属性でダウンロードリンクも簡単なんですね! ダウンロードリンクはリンクを押すとダウンロードさせることができるリンクです。 記述方法 リンクしているURLとダウンロードURLが同じ場合などは省…

続きを読む

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

< iframe id=hogeframe >内で以下のメソッドを定義したとします。 hogehoge = function (){ ~ }; 外部のhtmlからは以下でメソッドを使用できます。 document.…

続きを読む

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

HTML5 の placeholder 非対応ブラウザでも簡単に placeholder を実装する方法。jQuery などのライブラリは利用していません。 JavaScript function onFocusPlac…

続きを読む

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

<meta http-equiv=”X-UA-Compatible” content=”IE=Edge, chrome=1″> IE=Edge:最新のモードを利用する chrome=1:「Chrome Fra…

続きを読む