html で リンクを新しいタブ(やウィンドウ)で開かせたい場合、target="_blank" を指定するが、 この使い方には落とし穴があるらしい。 www.jitbit.com リンクを開いた先の javascript から、開いた元のページを操作できてしまうとのこと。 気になったので確認してみた。 悪用のパターン insecure.html が最初に開くページで、ここに target="_blank" なリンクがある。 このリンクを押すと new_window.html を新しいタブで開く。 この new_window.html に javascript が仕込まれており、元ページを操作されるという話。 具体的には window.opener.location="./evil.html" と実行すると、元タブは evil.html に遷移する。 実際試してみたのが ここ。 リンクを開
ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル(Image ReadyやFireworks)から画像を切り出す「スライス機能」と相性のいい方法でした。 <table border="0" cellspacing="0" cellp
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト! 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す(文字色も変更) ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう!サンプルも作ったのでコードと
まず「リスト選択」の列の選択肢から「B」を選択します。 ⇒「リスト名」が「B」に変更されます。(変更)「追加/削除」の列の「+」ボタンを押します。 ⇒行が追加されます。(追加)追加された行の「リスト順」の列の「↑」をクリックします。 ⇒行が上へ移動します。(移動)移動した行の「リスト順」の列の「↓」をクリックします。 ⇒行が下へ移動します。(移動)最後に、好きな行の「追加/削除」の列の「-」ボタンを押します。 ⇒行が削除されます。(削除) いかがでしょうか。まあ、よくある機能ですね。では、この機能の実装方法について以下にまとめておきたいと思います。 HTMLHTMLでは、以下の点がポイントとなります。 それぞれの機能を発生させるためのイベントハンドラをセットしておきます。操作の対象となる「行」の部分は<tbody>タグ内に記述するようにします(これが後々大事になります)。JavaScrip
注!この記事を書いている人間はエンジニアではありません!よって技術的な用語の記載は間違っている可能性がありますが、指摘するときは女子高生だと思って優しくしてほしいの.... この記事は2016年アドベントカレンダー「自宅サーバの思い出」12/3の投稿です。 www.adventar.org seong15といいます。Twitterでは「いちごー」とか「いちご」とか「ひこざえもん」と言われてます。普段は完全リモートワークの会社で営業とか広報とか採用とかやってます。 いろんなシーンでエンジニアと話すことが多いんですが、世間話的にこの話をすると彼らに大ウケという結果がでており、思い出としてどこかに残しておきたいな〜というかんじで登録しました。 わたしは小学校6年生の時、もののけ姫を友達と見に行った帰りに本屋で初めてアンソロジーというものをみつけてから足掛け13年ほど腐女子でした。今は貴腐人を超え
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで(Macの場合はCommand+Option+Iキーで)手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
検証概要 検証1:ネットワークからのレスポンス速度の違うJSファイルの実行タイミング 検証2:ファイルサイズの違うJSファイルの実行タイミング 検証3:外部JSファイル、インラインスクリプト、スクリプト以外のタグの混在時の実行順序 まとめ これまであまり意識してこなかったのですが、JavaScriptコードを外部ファイルとして作成し、それらのファイルをHTMLに読み込む際、外部ファイルに記述されたコードはいつどのようなタイミングで実行されるのか?と、ふと疑問に思いました。 大きなプロジェクトであればあるほど、肥大化したJavaScriptコードを機能毎に別ファイルに切り出し、体系的にJavaScriptコードを管理した方がメンテナンスもし易くなると思いますが、そいうったケースでは複数の外部JSファイルをHTMLファイル内に読み込むことになると思います。 そのような場合、JSファイル間で依存
今日jQueryを初めた人の記事です。 あしからず。。。 経緯 最近Webアプリケーションの構築にドハマりしていて、JSONを返すだけの面白くないAPIづくりは一旦おいておいて、インターフェイス作りもやろうということでHTML + CSSを猛勉強している次第です。 いや、別に仕事で使うとかじゃなくて、趣味でなんですけどね。 Node.jsは使っている人なので、Javascriptはあらかたわかっているのですが、今日からみんな大好きjQueryを使いはじめることにしました。 で、いきなり3行しかないjavascriptのコードにハマりまくりました、ええ、それはもう盛大に。 問題のコード 今までバリデーションは全てPHPでやってエラーを返していましたが、そりゃ画面側でリアルタイムにやれるならやりたいということでPOST前検診(変な言い方・・・)をjavascriptさんに担当してもらおうと一番
最近流行りのWebデザインテンプレートを見ると大体ついてる「navbar」や「footer」。 テンプレートをDLして、「さあ使うか!」ってなってソースを見てみると 各HTMLにほぼ同じ内容の処理がズラっと書いてあります。 書いてある内容は殆ど変わらないけど、一箇所でも細かい修正があると、 全部のファイルを手動で直さないといけません。 面倒くさい&馬鹿らしい&ケアレスミスが発生する原因になる ということで「HTMLをincludeして使う方法」を調べた際のメモを記録しておきます。 コードは以下の通りです。 include.html <p>includeされて使いまわされる部分です/p> index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" cont
はじめに htmlでサイトを作っていて40ページ位になったのでメニュー更新増えるとめんどくさー。からの、phpかけないー。からの、最近勉強を初めたjsでメニュー読みこめばいいじゃん。です。いいんです、デザイナーとかじゃないので。 (調べてるうちにjsでやるあれじゃないよっていうのは百も承知で。) 最初に思いついたのはjQueryでhtml() コードはざっくり書くとこんな感じ。 <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" type="text/css" href="./css/common.css" /> <script src="//ajax.
業務で携わっている案件なのですが、アクセス数の急増が見込まれるイベントがありまして。準備期間も少なく、バックエンド側でできることがほぼないという状況でサイトを落とさないようにがんばる!というお仕事でした。レガシーソースてんこ盛り。CSSプリプロセッサとか何それ状態。 そこで実施した対策のまとめです。サーバー・アプリケーション・サイトの構成によって、効果の大小はありますが、比較的効果があったと思われるものをつらつらと。 リクエストの削減とファイルサイズの最適化 まず一番最初に考えなければいけないのがリクエスト数です。すごいおおざっぱに言うと、WEBサーバー(ApacheとかNginxとか)への負荷は、PV数×リクエスト数です。PVがそんなに無くてもそのページのリクエストがめちゃくちゃ多いとそれだけでかなりの負荷になります。リクエストを半分にできれば2倍の人数がさばけるってことに、すげーおおざ
ウィリアムのいたずらが、街歩き、食べ物、音楽等の個人的見解を主に書くブログです(たま~にコンピューター関係も) HTMLのAタグ(アンカータグ)は、以下のように、GET型では値が渡せます。 <A HREF="飛びたいURL?項目名=値"> でも、GET型では長い値を渡せないし、ブラウザの上に、その渡した値が並ぶのも・・・っていうので、POST型で渡したい場合があります。 で、このとき、昨日のsubmit()を使うと出来るので、ちょっとその話。 以下のように、Formのinputタグのhiddenで(例だとaaa)に渡したい値をセットして、actionに飛び先のURL、methodをPOSTで設定すれば、POST型で飛びます。 <html> <body> <A HREF="" onclick="document.form1.submit();return false;" > テスト</A>
jQueryを使ってヘッダ、フッタなど共通部分のhtmlを本体のページに読み込むカンタンTipsです 共通で使いたいhtmlと、読み込む側のhtmlを用意する。共通部分にはheadタグとかbodyタグとかは不要です。 ほんとに部分的に抜き出したhtmlだけを用意します。 例えばヘッダ、フッタを共通にする場合は3つのファイルができることになります。 index.html 本体 header.html ヘッダー footer.html フッター jQueryを使うので、htmlの文字コードはUTF-8にしておきます。 jQueryをダウンロードするhttp://jquery.com/ 特に理由がなければ「Production」を使用します。 htmlでjQueryを呼び出し、共通htmlを読み込むまずjQueryを呼び出します。ふつーに。 <script type="text/javascri
ローカルディスク上に存在する静的HTMLで、外部ファイルをインクルードするためのスクリプト(つまり、XMLHttpRequestオブジェクトの代わり)。 以前にも同じようなエントリを書いたのですが(http://d.hatena.ne.jp/kenpoco/20080228/1204198090)、いくつか不具合があったので修正してます。 IE6,7に対応(前回はFirefox2のみ)。 インクルードするファイルの拡張子が.HTMLと.TXTで動作が異なっていたので、その対応。 インクルードした後で、その内容を変更するための仕組みを追加。 最近HTMLを作る機会が多いので自分で使ってみてるのですが、けっこう重宝してます。全ページに同じようなヘッダー部分がある場合なんかに、ヘッダー部分を1ファイルにまとめておけるので、その後の修正がかなり楽。 【使用例】 ------------------
水口哲也×LIFE STYLE 倉田タカシ×INTERFACE 柴田勝家×EDUCATION 円城塔×WORK PLACE 磯光雄×OFFICE DEVICE
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く