タグ

htmlに関するkajisukeのブックマーク (11)

  • HTML5 Semantics and Good Coding Practices — Aniket Pant

    HTML5 Semantics and Good Coding Practices Posted Nov 28th, 2011 by Aniket & filed under Article. Introduction Evil people put ids to nearly every element on their pages and make everything rigid and ugly. Moroever there was hardly any semantic structure around the front-end code. Thankfully HTML5 puts and end to much of this evilery. Well at least it tries to. Let’s talk about what’s new with HTML

  • IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎

    IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 2011-06-04 Twitterなどを見てると、 「IE6がー!」とか 「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。 気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。 以下のようなことは基的なことですが大切な事です。 DOCTYPEを書く。 HTMLの先頭にDOCTYPEを入れるようにして下さい。 DOCTYPEがないと、ブラウザ間での誤差が起こりやすい状態になります。 DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含

    IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎
  • モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。

    モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲーム歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS

  • HTML5でダイアグラム図を作成できる「Diagramo」 | Web活メモ帳

    システム設計にはかかせないダイアグラムですが、いざ作るとなった時は以外と面倒なものです。 WEB上でさくっと作れる事で簡単に共有もできるので良さそうです。 PNGやGIFとして書き出しも可能です。 操作もドラッグ&ドロップで直感的にできるようになっていました。 興味のある方はぜひ使ってみてください。

    HTML5でダイアグラム図を作成できる「Diagramo」 | Web活メモ帳
  • XSSの攻撃手法いろいろ - うなの日記

    html5securityのサイトに、XSSの各種攻撃手法がまとめられているのを発見せり!ということで、個人的に「お!」と思った攻撃をサンプルつきでご紹介します。 1. CSS Expression IE7以前には「CSS Expressions」という拡張機能があり、CSS内でJavaScriptを実行できたりします。 <div style="color:expression(alert('XSS'));">a</div> 確認 @IT -[柔軟すぎる]IEのCSS解釈で起こるXSS で詳しく解説されていますが、CSSの解釈が柔軟なことともあいまって自前で無害化するのはなかなか困難。以下のようなコードでもスクリプトが実行されてしまいます。 <div style="color:expr/* コメントの挿入 */ession(alert('XSS'));">a</div> 確認 <div s

    XSSの攻撃手法いろいろ - うなの日記
  • 中途半端なHTML講座なら作るべきじゃない : Weblog : SimpleIsm

    HTML 中途半端なHTML講座なら作るべきじゃないと、HTMLの基とかHTMLを書くを見てふと思った。 まず最初に書かなきゃいけないことって、文書型宣言(DOCTYPE宣言)、いわゆる<!DOCTYPE HTML SYSTEM>なのに(XHTMLの場合はXML宣言が必要だったりすることもあるけど)、あまりにそこを疎かにしている説明が多いなぁと思った。 悪い例その1 <html> <head> <title>hoge</title> </head> <body> hogehoge </body> </html> よく見る悪い例。逆に潔く感じます。何が悪いのか書くのがめんどくさくなってきたけど、ここで中途半端になってしまっては末転倒なので書く。 文書型宣言は書きましょう。いや、厳密には書くことは強制されていないのだけど(書かなくてもページは表示される)、ここら辺の説明は文書型宣言について

  • HTML5 基礎知識 - web探検隊

    HTML5を書くための基礎知識をメモHTML5の雛形XHTML5ではなくてHTML5のマークアップについて html> head> title>HTML5 基礎知識title> meta charset="UTF-8"> head> body> body> html> HTML5の新要素 文章構造に関するものsection汎用的なセクション。文章のアウトラインを構成する。articleセクションの一種で、Webページから独立したコンテンツを表す。asideセクションの一種で、外側のセクションに対する補足情報を表す。navセクションの一種で、外側のセクションに対するナビゲーションメニューを表す。footerセクションのフッター。headerセクションのヘッダー。hgroup複数の見出し(h1-h6)をまとめる。 外部コンテンツの埋込みfigureキャプションを伴うような内容のものを文章中に埋

  • ニコニコ動画をHTML5で見るbookmarklet - saiten@blog

    性懲りも無くニコニコネタです。 iPadでも結局Flashが搭載されなかったこともあって、最近Flashの代替手段としてHTML5がやけに押されているので、ものは試しでニコニコ動画のFlashプレイヤーをHTML5で構成したプレイヤーに置き換えるbookmarkletを作ってみました。iPhone/iPadのvideoタグの動作がマシになってれば、iPhone/iPad上でも動くかもってな期待込みで。 使い方は、下記のbookmarkletをニコニコ動画の再生ページ(http;//www.nicovideo.jp/watch/*)上で実行するだけです。実行すると標準のFlash製プレイヤーを、HTML5+javascriptで構成したプレイヤーに置き換えます。 javascript:(function(){var e=document.createElement("script");e.s

    ニコニコ動画をHTML5で見るbookmarklet - saiten@blog
  • 知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ

    最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか? Zen-CodingはHTML/CSSをショートカット+スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか?という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio

  • PrimerCSS

    Primer undercoats your CSS by pulling out all of your classes and id's and placing them into a starter stylesheet. Paste your HTML in to get started. Made for you with love and care by @luckystrikes and @wades. Notice: Undefined index: htmlsrc in /home/ypp7m8mtix54/domains/primercss.com/html/index.php on line 43

  • 第2回 仕様書に沿ったページを作るために | gihyo.jp

    前回はW3Cの役割やプロセスがどのようなものであるかをお伝えしました。では、仕様書に書かれている通りにHTMLCSSを書くために、どのようなことを行えばいいのでしょうか。 仕様書を読めば解決!だけど英語…… 「仕様書に書かれている通りにHTMLを書きたいんですが……」 「⁠じゃあ、仕様書を読めばいいよ。」 と、一言で済ませられれば楽なのですが、あいにくそうもいきません。仕様書のほとんどが英語で書かれているため、私たち非英語圏の人間にとって、仕様書に書かれてあることの意味をくみとることはおろか、読むことにも多くの時間をとられてしまいます。 というわけで今回は、「⁠仕様書にあまり触れないながらも、仕様書に沿ったコードを書く」ための方法について考えてみたいと思います。 さまざまなリソースに触れて理解を深める まずは、やWebにある仕様書についての解説をあたってみましょう。莫大な数の情報が公開

    第2回 仕様書に沿ったページを作るために | gihyo.jp
  • 1