タグ

htmlに関するhiro_yのブックマーク (198)

  • Google HTML/CSS Style Guide

    Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML

    hiro_y
    hiro_y 2012/04/25
    Googleのコーディング規約
  • HTML 5での<section>要素と<article>要素の違い。

    平成22年 3月11日 公開 テーマ HTML 5 HTML 5に於ける<section>要素と<article>要素の違いと使い分け方について。 <section>要素の位置付け。 HTML 5で導入される<section>要素は一般的なセクションです。 但し、HTML 5の仕様案では、他のセクショニング内容要素に該当しないセクションのみを<section>要素としてマークアップすべきであるとしております。 他のセクショニング内容要素とは、以下の三つです。 <article>要素 独立した記事のセクション。 <nav>要素 ナヴィゲータリンクのセクション。 <aside>要素 文との関連が薄いセクション(注釈や余談など)。 <article>要素とは。 HTML 5で導入される<article>要素とは、独立した記事のセクションです。 ウェブログやニュースサイトなら、複数の記事が一

    hiro_y
    hiro_y 2012/03/07
    article/sectionの使い分け
  • CSS3 Pseudo-Classes and HTML5 Forms | HTML5 Doctor

    Hello! I’m Doctor Peter and I’m here to treat you with a dose of complementary CSS3. Don’t worry, this won’t hurt a bit. Contrary to what HTML5 Please and the W3C would have you believe, CSS3 is not part of HTML5. “But this is HTML5 Doctor,” I imagine you saying. “Why are you talking about CSS3 here?” Well, I want to talk about a very specific part of CSS3, one that works in perfect tandem with HT

    hiro_y
    hiro_y 2012/03/04
    疑似クラスとフォーム
  • 少しのコードで実装可能な15のスマートフォンサイト用小技集

    少しのコードで実装可能な15のスマートフォンサイト用小技集スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい! スマートフォンサイト用小技集 目次いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントを iPhone などに切り替えてご覧ください! 横幅をデバイスの幅にあわせる文字サイズの自動調整をオフリストのクリック(タップ)範囲を広げる画面の幅にあわせて CSS を変えるリンクテキストのある Div 全体をクリック(タップ

    少しのコードで実装可能な15のスマートフォンサイト用小技集
    hiro_y
    hiro_y 2012/02/24
    「<input type="text" pattern="[0-9]*">」いいね
  • スマートフォンにおけるHTML5実装の最先端@Developers Summit 2012

    ■概要 モバイル業界において、HTML5の勢いはさらに増しています。 Webアプリのリッチクライアント実装の最先端になるであろうことは、もはや間違いのない状況です。 このセッションでは、HTML5の実装をされる方向けに、カリッカリにチューニングしたHTML5をどのように書くのか、またHTML5が普及した後の世界がどのようなものになるのかについて、私が今までHTML5によるFlash Player(ExGame)やngCoreのHTML5対応を 手掛けてきた経験をもとにお話をさせていただければ、と思っております。 ■登壇者 続きを読む

    スマートフォンにおけるHTML5実装の最先端@Developers Summit 2012
    hiro_y
    hiro_y 2012/02/22
    「Canvasはシチュエーションに応じて変わるアニメーションや、同時に動くものが多い時に有効。CSS3は1枚もののアニメーションや、同時に動くものが少ない時に有効。」
  • ヤター!ウェブブラウザで動くシンセできたよー - aike’s blog

    最近のHTML5やWebブラウザのAPIの進化はけっこうすごくて、普通にサウンドプログラミングもできるようになってきました。そんなわけでシンセサイザーアプリを作ってみました。 サウンドを扱う方法はいくつかあるみたいですが、Google Chromeで使えるWeb Audio APIがEQやディレイなどあらかじめ用意されていて良さげなので使いました。 http://aikelab.net/websynth/ まだ、バグもけっこうあるのでじょじょにブラッシュアップしていきます。 Chrome以外では動かないと思うので試せない人はこちらの動画をどうぞ。 Google API Expertが解説するHTML5ガイドブック 作者: 羽田野太巳,白石俊平,古籏一浩,太田昌吾 出版社/メーカー: インプレスジャパン 発売日: 2010/09/16 メディア: 単行(ソフトカバー) この商品を含むブログ

    ヤター!ウェブブラウザで動くシンセできたよー - aike’s blog
    hiro_y
    hiro_y 2012/01/30
    Web Audio API使ってる
  • http://html5please.us/

  • AndroMDA.org - Home

    Bóng đá Live Bóng rổ Live Tennis Live Cầu lông Live Bóng chuyền Live Esports Live LIVESCORE LIVES

    AndroMDA.org - Home
    hiro_y
    hiro_y 2012/01/15
    HTML5の各ブラウザの対応状況
  • MiniApps UK: Boost Productivity with Top-tier Apps

    Keep up with emerging trendsWant to improve your knowledge? Mini Apps is here for you! Coins Obtaining cryptocurrencies is different from obtaining physical currency. Instead of getting shares or physical money, you get the digital coins instead. READ MORE Mini Apps MiniApps is a visual editor with plugins that make it very easy to come up with a chatbot. You do not need to have any special skills

    hiro_y
    hiro_y 2012/01/14
    HTML5アプリが何個も。参考に。
  • สล็อต PG SLOT 2025 – เว็บสล็อตแตกง่าย ได้เงินจริง | Aztec555

    สล็อต และ PG SLOT 2025 – เว็บสล็อตแตกง่าย ได้เงินจริง อันดับ 1 ของไทย | Aztec555 ในปี 2025 เกมสล็อตออนไลน์ กลายเป็นหนึ่งในรูปแบบความบันเทิงออนไลน์ที่ได้รับความนิยมสูงสุดในประเทศไทย โดยเฉพาะอย่างยิ่งกับค่ายเกมชื่อดังอย่าง PG SLOT ที่มีชื่อเสียงเรื่องเกมแตกง่าย ภาพสวยงาม ระบบลื่นไหล และโบนัสที่แจกหนัก ทำให้ผู้เล่นจำนวนมากเลือก PG SLOT เป็นเกมหลักในการสร้างรายได้ออนไลน์ และสำหรับผู้เล่นชาวไทยที่กำลัง

    hiro_y
    hiro_y 2012/01/14
    「OpenAppMkt is an app store for HTML5 mobile apps.」HTML5のwebアプリ集めたサイト。webclipとか
  • The contenteditable attribute | HTML5 Doctor

    For some time now, we’ve been using various technologies to edit and store text within a web browser. Now with the contenteditable attribute, things have got a whole lot easier. In this article, I’ll tell you what this attribute is for, how it works, and how we can take things further. The Basics # First, let’s check out the spec: The contenteditable attribute is an enumerated attribute whose keyw

    hiro_y
    hiro_y 2012/01/12
    contenteditableの扱い
  • The scoped attribute | HTML5 Doctor

    The scoped attribute for the <style> element allows you to include styles mid-document that targets a specific element and its children. Depending upon how you look at this, it’ll either be a godsend or a curse. Once you’ve reached the end of this article, I hope you can form your own opinion. Let’s take a quick look at the spec: The scoped attribute is a boolean attribute. If set, it indicates th

    hiro_y
    hiro_y 2012/01/12
    style scoped
  • GitHub - othree/html5.vim: HTML5 omnicomplete and syntax

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    GitHub - othree/html5.vim: HTML5 omnicomplete and syntax
    hiro_y
    hiro_y 2012/01/04
    HTML5対応のシンタックスとか
  • HTML5 で作る iPhone ローカル Web アプリ入門

    さて、まず「ローカル Web アプリ」ってなんぞっていう話ですが、Web ベースの技術で作られブラウザからサーバにアクセスして利用するものの、いったんロードが完了したら、それ以降はネットワーク接続不要で動作する Web アプリ、といった概念を表した造語です。 iPhone の App Store を経由することなく配布が可能なので、アプリの内容について一切の制限がなく、また、最近のライブラリの進歩やモバイルパフォーマンスの向上により、ものによってはネイティブアプリと遜色ないレベルのものも作れるようになってきました。 先日、1 Click Config (閉鎖済) (解説記事) を作って公開しましたが、これがまさにローカル Web アプリとして動作しています。 ここで使われている技術の各論についてはそれぞれ詳しく書いたサイトがあるのですが、これらの技術をひとまとめに紹介しているサイトが見当た

    HTML5 で作る iPhone ローカル Web アプリ入門
    hiro_y
    hiro_y 2011/11/22
    ローカルアプリ
  • hamashun me : HTML5のstyle要素が持つscoped属性について

    HTML5のstyle要素には、scopedという属性があります。 この属性を持ったstyle要素は、フローコンテンツが期待できる場所に記述する事ができます(フローコンテンツの中って意味じゃ無いです)。 フローコンテンツには、div要素やsection要素やtable要素などがあります(詳しくはコンテンツ・モデル - HTML5タグリファレンス - HTML5.JPとか見てください)。 scoped属性を指定したstyle要素に記述されたスタイルは、ページ全体ではなく、そのstyle要素の親要素の中にあるコンテンツにのみ適用されます。 以下がサンプルコードです。 <p>example text</p> <!-- 赤くならない --> <section> <style scoped="scoped"> p { color: red; } </style> <h1>example title<

    hiro_y
    hiro_y 2011/08/07
    style要素のscoped属性
  • HTML5のvideo/audio+JavaScript APIテクニック

    HTML5の<video>や<audio>タグとJavaScript APIで、自由に動画や音声を楽しもう。カスタムのビデオプレイヤーだって作れる video/audio要素のAPIやイベントを利用する video/audio要素は、JavaScriptを用いた細かい制御を行えるのも特徴の1つです。 カスタムのビデオプレイヤーを作ることも容易ですし、動画からフレームを切り出してCanvasに投影し、グラフィックとして取り扱う、なんてテクニックもあります。 今回は、そうしたJavaScript APIの利用方法について見ていきましょう。なお、この記事は2011年5月25日版の仕様に基づいています。 video/audioに共通のメソッド、プロパティ video要素とaudio要素は、メソッドやプロパティの多くが共通です。そうしたメソッドやプロパティを表すのが以下の一覧です。 MediaErr

    HTML5のvideo/audio+JavaScript APIテクニック
    hiro_y
    hiro_y 2011/07/31
    video/audio要素をJavaScriptで操作
  • HTML5 & CSS3 ブラウザ別サポート状況

    What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe

    hiro_y
    hiro_y 2011/07/30
    HTML5/CSS3のブラウザ別サポート状況
  • Document Outlines | HTML5 Doctor

    Updated 21/01/2014 by Dr. Steve Document outlines have changed a bit in HTML5. For a start, they’re actually in the spec (and have been for years – (2008). The HTML5 Doctor is here to explain what document outlines are, how to make good ones, and why you should care. What are document outlines? # The document outline is the structure of a document, generated by the document’s headings, form titles

    hiro_y
    hiro_y 2011/07/17
    documentのアウトラインを意識すること
  • コーディングとSEOの概念が変わるかもしれない、Microdataについての概要 - kojika17

    6月2日、GoogleMicrosoftYahoo!の検索大手3社が協力して、構造化データマークアップの標準化に乗り出しました。 長期的な最終目標は、幅広いフォーマットのサポートとしているようですが、まずはHTML5のMicrodataに集中するようです。 Microdataが新しいWebの歴史の礎の1つとなるかもしれません。 以前にも「MicrodataとMicroformatsの違いについて」取り上げましたが、今回は実際にMicrodataでどうなるのか、ご紹介致します。 Microdataとは何か? マークアップ言語であるHTMLは「見出し(h1,h2,h3... )」「段落(p)」「リスト(ul,ol,li)」などの文章構造を示すことができても、「人の名前」「肩書き」「地域」などを示すことができません。 それらをHTMLでメタデータとして追加する方法のひとつとして、HTML5の

    コーディングとSEOの概念が変わるかもしれない、Microdataについての概要 - kojika17
    hiro_y
    hiro_y 2011/06/13
    Microdataの実際
  • MicroformatsとMicrodataの違いについて - kojika17

    Webページの内容が、"何を意味するのか"をコンピュータが効率よく情報を収集・解釈できるようにする構想を「セマンティックWeb」「セマンティック(X)HTML」などと呼びます。 セマンティックHTMLを始めるにあたりMicroformatsとMicrodataの違いについて、"どう違うのか"分かりづらかったのでまとめてみました。 そもそもMicroformats、Microdataとは? マークアップ言語であるHTMLは文章構造を表すことはできますが、意味までは表現できません。 例えば、人の名前や住所、電話番号といったものにHTML要素でマークアップすることはできません。 ただしMicroformatsとMicrodataを使うことにより、このような意味づけを可能にし、コンピュータも可読できるセマンティックなHTMLドキュメントを作成することができます。 Microformats、Micr

    MicroformatsとMicrodataの違いについて - kojika17
    hiro_y
    hiro_y 2011/06/13
    Microformats/Microdataの比較