リンクを作る時の target="_blank" の危険性 - 隙あらば寝る
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 に遷移する。 実際試してみたのが ここ。 リンクを開
擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
dl要素を美しくデザインするスタイルシートのまとめ | コリス
実用的なものからちょっとトリッキーなものまで、dl要素を使った美しいデザインのスタイルシートを紹介します。 In Defence of the Definition List HTML <dl class="wrapper1"> <dt>News Item 1</dt> <dd><div class="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum orci eu purus viverra imperdiet. Cras scelerisque commodo dictum. Mauris sed libero non justo adipiscing tempor tincidunt eget eros. Praesent eu cursus enim. Donec d
指定時間になったら自動でページをリロード（更新）・読み込む
<meta http-equiv=”Refresh” content=”;URL=”> 指定時間になると、表示しているページを再度読み込んだり（更新）、他のページへ移動させることができます。これらの方法は記述の仕方で変えることができます。 指定時間になったら同じページを再読込（リロード） メタタグなので、HTML構造の<head></head>内に挿入します。「content=””」でページを切り替える時間を指定します。なお、この時間はページの表示が完了してからカウントされます。 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> <html lang=”ja”> <head> <meta http-equiv=”Refresh” content=”5″> <title>デザイナーズ プロジェクト [DSPT]</
三点リーダが真ん中に表示されない理由
三点リーダ「…」が「…」という風に真ん中に表示されない問題について調べてみました。 １．三点リーダとは 説明するまでもありませんが、点を3つ横に並べた形をした記号のことで、語尾を省略したり、言葉の余韻を残すときに使う「…」です。 ２．問題点 たとえばブログを書いているときに、記事編集画面のテキストエリアでは「…」と表示されているのに、公開したページでは「…」となることがあります。 ３．原因 三点リーダが真ん中に表示されないのはCSSの「font-family」の設定によるものです。 「font-family」の値には多くのフォントを並べているケースが多いと思いますが、その一番最初に記述しているフォントに依存します。 たとえば、このブログのfont-familyは以下のようになっています。 font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro
フォームの微妙なズレ
こんばんわ 週末、うまい棒大量購入してこようかしら・・・ コータローです。 さてさて今回はフォームに纏わるCSSです。 皆様、フォームのコーディングって得意ですか？ 僕は若干苦手です。特にテキスト部分とフォーム部分が微妙にズレたりしますよね。ムッキー！！！ 僕も最近まできっちり合わせることができなくて仕様です。って言ってたりしたのですが 解決できたので、ご紹介 特にずれが気になるのがラジオボタンですよね。 普通に書くとこんな感じ inputに vertical-align: middle; を当ててあげるとこんな感じ 何も無しよりはマシだけどちょっとズレてますよね。 そして今回の解決策 意外と知られておりませんが実はこのvertical-alignのプロパティ middleとかbottomだけでなく、数値での指定が可能なんです。 ざっとリファレンス載せてるサイト見ましたが、載っていないとこ
[CSS]すぐに利用できる、美しいボックスシャドウと角丸のスタイルシートのまとめ
一昔前はPhotoshopを使用しないと作成できなかったデザインをCSS3で実装するシリーズのナビゲーション編から、すぐに利用できるボックスシャドウと角丸のスタイルシートを紹介します。 CSS3 vs. Photoshop: Rounded Corners and Box Shadows [ad#ad-2] 下記は、その中からボックスシャドウと角丸に関するスタイルシートをピックアップしたものです。 ボックスシャドウ -box-shadow 角丸 -border-radius 対応ブラウザ ボックスシャドウ -box-shadow HTMLはsection要素を使用していますが、これはdiv要素などでもそのまま利用できます。
HTMLテンプレート - ネットマニア
クールサイトを作る為に。無料テンプレートで作るクールなホームページ。クールサイトを作るためのノウハウの公開から、PHPウェブログシステム・メルマガ独自配信システムの無料配布など。
ある会社のホームページのソースコードが恐いと話題に
1：名無しさん＠涙目です。(関西地方)：2011/06/30(木) 21:24:48.39 ID:Iecpl0lI0 ある会社のホームページのソースコードが恐いと話題になっています。 ソースコードの隠し文字に驚くような文章が書かれていたのです。 話題の会社のホームページはこちら http://leimay.jp/lme/ http://megalodon.jp/2011-0630-2351-02/leimay.jp/lme/（魚拓） ウェブページの何もないところを右クリックして「ソースコードの表示」を選択すると……。 http://blog-imgs-34.fc2.com/n/e/w/news020/Screenshot_1.jpg ホームページのタグにはブラウザに表示させない文字として使う“隠し文字”というものがあります。“隠し文字”というものはホームページを制作するときに、何がどこまで
Google+のヘッダを画面上部に固定するスタイルシートを書きました : akiyan.com
Google+のヘッダを画面上部に固定するスタイルシートを書きました 2011-07-01 Google+(Google Plus)がクローズド公開されましたね。招待機能が一時的に凍結されたみたいですが、運よく登録することができました。 また、Google+の公開と同時くらいに、Googleの共通ヘッダのデザインが変わりました。そしてGoogle+に登録していると、ヘッダ右端にGoogle+の通知が表示されるようになりました。便利ですね。 ただ、Google+内だと、画面をどんどんスクロールすることが多く、共通ヘッダが隠れてしまいます。そこで、画面上部に共通ヘッダが固定されていたら便利なんじゃないかなーと思い、さくっとユーザースタイルシートを書きました。userstyles.orgからブラウザに直接インストールすることができます。 Google Plus Sticky Common Hea
The HTML5 test - How well does your browser support HTML5?
HTML5test how well does your browser support HTML5? Your browser About the test HTML5test is dead. It's been dead for a while. In fact it hasn't been updated since 2016. And that is fine. This website has served it's purpose and helped popularise HTML5 with a general audience and developers. It pushed companies to invest in their browsers and it kept them honest. And from talking to people working
HTML5で書かれた「スーパーマリオ」みたいなゲーム
HTML5の目玉機能の1つにCanvasタグがあります。このCanvasタグとJavaScriptを使ってWebブラウザで遊べるゲームが少しずつ登場してきたので、いくつか紹介しましょう。HTML5がどんなポテンシャルを持っているのか、その一部が楽しく分かると思います。 1つめはスーパーマリオみたいなゲーム。ブログ「PurpleFloyd's Blog 」のエントリ「 A Platform Game Using HTML5 Canvas 」で紹介されていました。 遊び方は、カーソルキーで主人公を左右に移動、スペースキーでジャンプです。音は出ませんしスコアも計算しません。Internet Explorer 7/8では「耐え難いほど遅い」そうですので、プレイはFirefoxなどでどうぞ。 もう1つのゲームは、Google Chromeの高速性やとHTML5のデモンストレーションのためにグーグルが
Color converter - HEX to RGB and rgb to hex color converter
Color Converter Tool: HEX, RGB, HSL, CMYK Welcome to our comprehensive guide on color systems and how our Color Conversion Tool seamlessly transitions between HEX, RGB, HSL, and CMYK. Whether you’re a designer, developer, or just someone interested in digital color manipulation, this guide and tool are for you. Understanding the Color Systems 1. HEX (Hexadecimal Color) Description: HEX color codes
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
東急さん、fontタグの色設定を堂々と間違える
便箋のようなデザインにする：CSS小技
ブログ
Webデザインテンプレート集
not found
築地本願寺のHTMLソースに･･･
: 人体をHTMLとPHPで表現。headとbodyがあるぐらいだから他にもいろいろあっていい、とか
