javascript:正規化された(canonical)URLを取得する - サンプルコードと使用例
canonical属性とは／link rel="canonical"によるURL正規化タグ——SEOにとって非常に重要な進歩（前編） | Moz - SEOとインバウンドマーケティングの実践情報 | Web担当者Forum http://web-tan.forum.impressrd.jp/e/2009/03/05/5112 そのため、その正規化されたURLは、その Web ページの作成者が、その Web ページをどんな URL として扱って欲しいのかを明示的に示したものです。 従って、Webページの URL をブラウザ側で動的に取得しようとした場合、location オブジェクトから取得する場合には、URL の表記に様々なバリエーションが生まれてしまいますが、正規化された URL を用いれば、そのコンテンツに対する URL を一つに限定できます。 正規化された URL は、次のように H
リンクのへの rel=noopener 付与による Tabnabbing 対策 | blog.jxck.io
なお IE は(security zone setting をいじらない限り)この問題が発生しないようだ。 引用元: blankshield demo | Reverse tabnabber phishing tabnabbing 上記の挙動を、フィッシング詐欺に利用できることが既に指摘されている。 この手法は Tabnabbing と呼ばれている。 Tabnabbing: A New Type of Phishing Attack Aza on Design Target="_blank" - the most underestimated vulnerability ever この攻撃方法を解説する。 攻撃の概要 https://cgm.example.com (左上) というサービスがあるとし、これは SNS やチームコラボレーション系サービスを想定する。 攻撃者は、このサービスの不
ブラウザはどのようにコンテンツをレンダリングしているのか？
By Fabio Lanari ウェブブラウザはHTMLなどで書かれた文章を解釈し、テキストや画像を配置するソフトウェアです。そのテキストや画像などのオブジェクトをレンダリングするレンダリングエンジンの仕組みを、ユーザーセッション分析やUX最適化サービスを提供しているSessionStackのCEOであるAlexander Zlatkov氏がまとめています。 How JavaScript works: the rendering engine and tips to optimize its performance https://blog.sessionstack.com/how-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance-7b95553baeda ブラウザの主要コンポーネントには「
どんどん作ろう。オンラインでHTML5/JavaScript/CSS3の実行確認ができるWebサービス×16選
どんどん作ろう。オンラインでHTML5/JavaScript/CSS3の実行確認ができるWebサービス×16選 Web技術の良いところはブラウザさえあれば実行確認ができて、テキストエディタだけで作れてしまう所ではないでしょうか。さらに今回紹介するようなサービスはWeb上にHTML5/JavaScript/CSS3を保存して共有できるので、HTML5の新しいAPIを試すのに使ったり、テクニックを披露するのに使えますよ。 JSFiddle 多種多様なJavaScriptフレームワークの読み込みも可能で、HTML/JavaScript/スタイルシートの記述ができます。 Create a new fiddle – JSFiddle CodePen グラフィックス系の投稿も良く見かけるWebプレイグラウンドです。 CodePen – Front End Developer Playground &
完全に単一のHTMLファイルで動作するMarkdownエディタ作った - Qiita
概要 完全に単一のHTMLファイルで動作するMarkdownエディタ「かんたんMarkdown」を作ったというお話。 お断り 一応簡単に動作検証はしていますが、とんでもないバグが潜んでいるかもしれません。 かんたんMarkdownを利用して大切な文章がなくなってしまったり、その他損害が生じても責任は取れませんm_ _m 経緯 前回の記事(そろそろExcelで資料作るのやめたい)で、 単一ファイルで動くMarkdown 画像をbase64で埋め込んでしまう というアイデアに可能性を感じて下さった方が多いようです1。 しかしながら、 エディタとプレビューアが別なのが面倒 base64に変換するのが面倒 といった意見も多く聞かれました。 そこで思ったのです。ならばエディタを作ってしまえと。 かんたんMarkdown かんたんMarkdownは完全に単一のhtmlファイルで動作するMarkdown
パララックスサイトの基本的な作り方 1/2！
こんにちは。 今回はパララックスサイトの基本的な作り方を紹介したいと思います。 去年くらいから流行始めたパララックスサイト。今年になってもその勢いは止まりません。 そんなパララックスサイトの基本的な作り方です。 パララックス（視差効果）とはパララックス（視差効果）とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。 準備をしよう！htmlを用意します。 jQueryはjQueryのサイトから直接読み込みます。 [html] [/html] スクロールした値を取得してみよう！スクロールした値によって個々のボックスを移動させますので、スクロールした値を取得します。 html[html] スクロールの値を取得スクロールの値 | 0 [/html] css[css] body { height: 5000px; } .num { margin: 0; posit
検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog
HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
JavaScript/フォーム/自動計算フォームAタイプ（消費税あり） - TAG index
<html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function keisan(){ // 設定開始 var tax = 10; // 消費税率 // 商品1 var price1 = document.form1.goods1.selectedIndex * 500; // 単価を設定 document.form1.field1.value = price1; // 小計を表示 // 商品2 var price2 = document.form1.goods2.selectedIndex * 1000; // 単価を設定 document.form1.field2.value = price2; // 小計を表示 // 商品3 var price3 = document.
JavaScript/フォーム/数字の入力をチェックする - TAG index
<html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function check(){ var flag = 0; // 設定開始（チェックする項目を設定してください） if(document.form1.post1.value.match(/[^0-9]+/)){ flag = 1; } else if(document.form1.post2.value.match(/[^0-9]+/)){ flag = 1; } // 設定終了 if(flag){ window.alert('数字以外が入力されています'); // 数字以外が入力された場合は警告ダイアログを表示 return false; // 送信を中止 } else{ return true; // 送信を実行 }
HTMLタグ/フォームタグ/データの送信形式と送信先を指定する - TAG index
form要素にはaction属性が必須となります。 データの送信先ついて 一般的には、CGI等のプログラムへ送信することになります。 POSTとGETについて method="" には、post または get を指定します。これは、データの送信形式を指定するもので、用途に合わせてどちらかを指定することになります。（この指定を省略した場合は get が適用されます） POST形式 … フォームのデータを本文として送信します（一度に大量のデータを送信することができます） GET形式 … フォームのデータをURLの末尾に追加して送信します（送信できるデータ量には制限があります） メールフォームなどの一般的なフォームでは、POST形式がよく使用されています。また、検索エンジンのフォームではGET形式が使用されているようです。 使用例 POST形式で formmail.cgi というCGIに送信す
JavaScript/フォーム/テキストフィールドの入力をチェックする - TAG index
<html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function check(){ var flag = 0; // 設定開始（必須にする項目を設定してください） if(document.form1.field1.value == ""){ // 「お名前」の入力をチェック flag = 1; } else if(document.form1.field2.value == ""){ // 「パスワード」の入力をチェック flag = 1; } else if(document.form1.field3.value == ""){ // 「コメント」の入力をチェック flag = 1; } // 設定終了 if(flag){ window.alert('必須項目に未入力があ
JavaScript/フォーム/自動的にフォーカスを合わせる - TAG index
<html> <head> <title>TAG index Webサイト</title> </head> <body onLoad="document.form1.field1.focus()"> <form action="#" name="form1"> <p>お名前：<input type="text" name="field1" size="25"></p> </form> </body> </html> フォーカスを合わせたい入力欄を、以下の方法で設定してください。 document.フォーム名.フィールド名.focus() フォーム名 … formタグの name="" で指定した名前（上記の例では form1） フィールド名 … フィールドの name="" で指定した名前（上記の例では field1） ページを表示したときに自動的にフォーカスを合わせるので、bodyタグに
あれこれポップアップ
ウェブページ (HTML) にて、マウスポインタの下にある任意の箇所（要素）の情報（属性値）あれこれをポップアップに出す、 JavaScript と CSS のセット。 Web サイトの製作運営者向けの一種の「素材」。 HTML に「あれこれポップアップ」の外部 JavaScript と 外部 CSSを適用するだけで、すぐ機能します。そのはず。 多くの典型的なブラウザでは、 title 属性に何か書いてある要素部分にマウスポインタをかざすと、その title 属性値がツールチップとしてポップアップしますよね。あれのゴージャス版と思ってもらえればよいです。典型ブラウザ本来のポップアップとの違いは、ポップアップするのが title 属性だけではない点。それと自分で言うのも何だけど、見てくれがカコイイ事（笑） 適用サイト利用者向け FAQ だうんろーど他 お持ち帰り用アーカイブをダウンロード 2
hori-uchi.com: _blankを使わないで別ウィンドウを開くにはre
はてなブックマークをみていたら、気になるエントリーを発見。 [戯] target="_blank" を使わないで新しいウィンドウでリンクを開く方法 target="_blank"という書き方がXHTML 1.1 や XHTML Basicに準拠していないので、これらに準拠するようにしつつ、別ウィンドウで開くにはどうすればよいかという話です。 別ウィンドウで開くにはJavaScriptを使えってのが推奨される方法なんですが、onclickを使って定義するのはめんどうということで、この記事では、aタグにclass="popup"という属性を与えておけば、JavaScriptで別ウィンドウを開くということをしています。 この件については友人のHTML、CSSマスターなkawachi君と話したことがあって、そのときは、下のエントリで紹介されているrel="external"という方法を使うのがいい
[戯] target="_blank" を使わないで新しいウィンドウでリンクを開く方法
target="_blank" を使わないで新しいウィンドウでリンクを開く方法 2006-03-14-5: [JavaScript] <a href="foo.html" target="_blank">foo</a> を使えば新しいウィンドウでリンクが開きますが，これは XHTML 1.1 や XHTML Basic では採用されていません． ではどうするかというと，スクリプトを使うわけですが， <a href="javascript:void(0)" onclick="window.open('foo.html');">foo</a> こうすると，一見解決したようですが，JavaScript が off の場合はリンク先に飛べません． しかも，ステータスバーにリンク先が出ないので不安になります．これを <a href="foo.html" onclick="window.open('f
KeyNavi.Net
ホームページをキー入力で便利＆快適に見られるKeyNavi(左図参考)をはじめ 新しいWebの形を提案しています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料でLINEやSkypeのようなリアルタイムアプリが簡単に作れるSkyWay
http://diveintogreasemonkey.org/