リンクを作る時の 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ウェブログシステム・メルマガ独自配信システムの無料配布など。
- このブログは非公開に設定されています。
ブログ このブログは非公開に設定されています。 (Access forbidden) 他のブログを探す ブログランキング（共通のジャンル） 1 ちゃんねるZ 2 裏ピク 3 えっちなお姉さん。 4 マブい女画像集 女優・モデル・アイドル 5 AV女優2chまとめ ヘルプ インフォメーション リクエスト 利用規約 障害情報 FC2ブログについて FC２の豊富な機能 スマホからもブログ投稿 有料プラン アルバム機能 おすすめブログ テンプレート一覧 マガブロ マガブロとは？ マガブロランキング マガブロの書き方 マガブロアフィリエイト サポート ヘルプ インフォメーション リクエスト 利用規約 障害情報 アプリでもブログ投稿 FC2トップ お問い合わせ 会社概要 プライバシーポリシー 著作権ガイドライン 広告掲載 Copyright(c)1999 FC2, Inc. All Rights Re
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 Other browsers Compare News Device Lab About the test The HTML5 test score is an indication of how well your browser supports the HTML5 standard and related specifications. Find out which parts of HTML5 are supported by your browser today and compare the results with other browsers. The HTML5 test does not try to test all of the new
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があるぐらいだから他にもいろいろあっていい、とか
