タグ

HTML5に関するkeijixのブックマーク (348)

  • HTML5を使ったドロップダウンメニュー – creamu

    HTML5でメニューを作りたい。 そんなときに参考になるのが、『How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery』。HTML5を使ったドロップダウンメニューです。 CSS3で、角丸やグラデーションが適用されていますね。XHTMLはシンプルで、動きをつけたjQueryの動きもスムーズになっています。 デモは以下から。 Demo 一度見てみてください。 How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery 一旦落ち着いたけど急いで進めなくては。

  • HTML5とCSS3でアプリケーションを作れるYUIのライブラリ「Alloy UI」 | Web活メモ帳

    「Alloy UI」はHTML5とCSS3でウェブサイトを構築する際に使える高機能なライブラリです。 YUIをベースに使われており、それぞれはコンポーネントという形で提供されるため必要な機能だけ設定する事が可能です。

    HTML5とCSS3でアプリケーションを作れるYUIのライブラリ「Alloy UI」 | Web活メモ帳
  • まずは基本から・HTML5のCanvasについて参考になったサイトまとめ

    WebデザインHTML5 Canvas ようやくHTML5に興味を持ち 始めました。サンプルを以前 記事にして、凄いなーと思っ ていましたが、なかなか時間 がなく、先延ばしに。 ようやくHTML5に興味を持ち始めました。 サンプルを以前記事にして、凄いなーと 思っていましたが、なかなか時間がなく、 先延ばしに。で、ようやく頭に入れ始めま した。なにするにも行動が遅くて困ります。 HTML5でも話題になっているCanvasを勉強し始めました。そんな中で、勉強の参考になりそうなサイトをブクマしたのでこれから学ぼう、とお考えの方とシェアしたいと思ってエントリー。 というわけで、基的な情報がほとんどです。大量の情報を見ても混乱するのである程度絞っています。 html5.jp リファレンスサイトです。リンク先はcanvasカテゴリに。ここからスタート、というか最後までたぶんお世話になりそう。 ht

    まずは基本から・HTML5のCanvasについて参考になったサイトまとめ
  • HTML5 XHTML どっちが - KBDAHOLIC - やぬすさんとこ

    という search query できたかたがいたようなので反応してみる。こういうことする余裕が出てきたのか単なる気まぐれか…。 で、これって多分「 HTML5 を書くときは HTML4 互換な構文と XHTML1 互換な構文とどっちを使うのがいいの ? 」ってことだと思うんだけどぶっちゃけ好きな方でいいと思う。いやそもそも使ってないし詳しくないのでこういうこと言えない立場なんだけど。 迷ったときは比較をしなさい、ということで。まず HTML4 互換構文の利点・欠点。 merit closing tag を省略できるので適度なものぐさにおすすめ inline SVG や inline MathML が使える parser がある XML 宣言を書かなくていい 名前空間の概念を知らなくても使える demerit closing tag を省略できてしまうので筋金入りのものぐさにおすすめできな

    HTML5 XHTML どっちが - KBDAHOLIC - やぬすさんとこ
  • HTML5 + CSS3 雑感 - KBDAHOLIC - やぬすさんとこ

    手持ちぶさただったのでちょっといじってみた。 vimtemplate ぽいものをこさえるところまで。 xhtml5 のつもりで xml 宣言をしているけど間違っているかもしれないとか head 要素内のいわゆるお約束がどうなってるんだろうとかまだ詰めなきゃいけないところたくさん。 http://github.com/januswel/dotfiles/blob/master/vimfiles/template/xhtml5.html http://github.com/januswel/dotfiles/blob/master/vimfiles/template/css.css これを Firefox 4 beta 4 と Google Chrome 6.0.472.53 で見てみると以下のような感じになる。 Fxb4b Chrome HTML5 は文書の流れをきちんと markup

  • HTML5+CSS3 使ってみた感想

    Cron Builder を作るにあたって、初めてちゃんと HTML5+CSS3 を使ってみたので、その雑感などをメモ程度に書いてみます。 header、footer、nav 分かりやすくていいです。ソースが見やすくなります。 早くエディタ側の対応が進んで、見やすく色分けしてくれるようになると嬉しいですね。 section Cron Builder みたいなウェブアプリの場合、使いどころにちょっと悩みます。今回はタブの中身で使ってみました。article 要素に至っては、使いどころがないです。 ブログとかニュースサイトなら綺麗にハマるんだと思いますが、ウェブアプリの場合、新規追加の要素を無理して使う必要はないですよね。 header とか section って、ブロック要素じゃないの? header、footer、section を最初、名前が違うだけのdiv のつもりで使ってたら、Chr

    HTML5+CSS3 使ってみた感想
  • HTML5+CSS3 入門

    Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ AppleHTML 5 に賭けているのか: ウェブの歴史 [Page 2] よ

    HTML5+CSS3 入門
  • デザイナは要注目! 明日から語れるHTML5&CSS3(1/4)- @IT

    デザイナは要注目! 明日から語れるHTML5&CSS3:一撃デザインの種明かし(13)(1/4 ページ) ※稿では特に断りがない場合、Firefox、Google Chrome、Opera、Safariは2010年7月時点の最新バージョン、IEはInternet Explorer 6/7/8の総称です。 いま世界で一番熱い「HTML5」「CSS3」とは? 最近、「HTML5」「CSS3」といった言葉をよく耳にしませんか? これらはWebの表現をもっと豊かにするために策定中の言語です。いままでのHTML 4.01やXHTMLでは実現できなかったことができるようになったり、CSS3はCSS 2.1よりさらにグラフィカルな部分まで表現できるようになりました。 FirefoxやOpera、Safari、ChromeといったHTML5+CSS3に対応するWebブラウザが増えてきたことで、HTML5

    デザイナは要注目! 明日から語れるHTML5&CSS3(1/4)- @IT
  • HTML5で組まれたブログのベースに使えそうな一式

    MT underHatにヒッソリとMovable Type 5 のテーマを追加しました。 MT underHat テーマ 002 - カンバス | MT underHat 今回追加したテーマもHTML5使ってるんですが、HTML5のマークアップで一番悩みそうなアウトライン関係は敢えてあまり使わずに、分かりやすい部分だけ新要素を使ったりした感じでマークアップしています。 何と言うか、StrictっぽいHTML5 じゃなく Transitional みたいな感じって言えばイメージが伝わるかな。 入門用というか。 実際、ガッツリきっちりやっても、今後どうなるか分かりませんし、今は取りあえず触れてみるとかで良い気がしてます。 なので、触れやすい感じを目指してみました。 で、このテーマは、CSSとかガッツリいじって使ってもらうのを前提にしてる部分があるので、オリジナルを作りやすいようにローカルで確認

    HTML5で組まれたブログのベースに使えそうな一式
  • freehtml5templates.com

    Articles that might be of interest to you: freehtml5templates.com Privacy Policy

  • HTML5 & CSS3 Resources for Designers

    Updated: 2011-08-30 (new items highlighted below) CSS3 Examples (including Media Queries) http://www.html5rocks.com/tutorials/flexbox/quick/ https://github.com/doctyper/flexie http://thebox.maxvoltar.com/ http://hardboiledwebdesign.com http://lostworldsfairs.com http://www.informationarchitects.jp/ http://colly.com http://hicksdesign.co.uk http://jordandobson.com/better_rounded_border_demo/ http:/

  • 【レビュー】HTML5/CSS3対応のデザインテンプレート集「Free HTML5 Templates」 | エンタープライズ | マイコミジャーナル

    170を越えるテンプレートからお気に入りを見つけて参考に - Free HTML5 Templates Free HTML5 Templatesにおいて、HTML5/CSS3を駆使したデザインテンプレートが数多く公開されている。このWebサイトは今年の2月11日(米国時間)に掲載されたテンプレートをはじめ、執筆時点で176のテンプレートが公開されている。掲載されている全テンプレートをサムネイルとして確認できる「Template Portfolio」はまさに圧巻だ。 Template Portfolioで登録されているデザインテンプレートを一望できる。画像クリックで拡大、more infoリンクをクリックしてテンプレート詳細画面に移動する これらのテンプレートはGoogle Chrome 5.0以上とFirefox 3.6以上に最適化されており、Creative Commons Attrib

  • コーポレートサイト向けに美しくデザインされたフリーのHTML5+css3テンプレート

    HTML5+css3なので、実際の業務で 使用する機会は日では無さそうで すが、デザインがとても美しかったの でメモがてらご紹介。jQueryはIEでも 動いたのでcss3やhtml5を変更すれ ば普通に実践使用できそうです。 綺麗なレイアウトと定番の赤×黒×グレーの色合いで、コーポレートサイトにぴったりですね。 Free HTML5 Website Template for Industrial Business 実物見ると結構素敵です。右側の画像はjQueryを使用したユニークなスライド。 下部メニューにcss3が使用されています。 TOPページ以外に子ページも4ファイル同梱されています。PSDファイルもありますよ。 IE6のキャプチャです。角丸や回転部分にcss3が使用されているのが分かります。jQueryは普通に動いています。 <header>や<nav>のようなhtml5で組ま

    コーポレートサイト向けに美しくデザインされたフリーのHTML5+css3テンプレート
  • ppBlog official

    こんにちは、martinです。日に帰国して1年が経ちました。昨年は2月から新しい職場で働き始めたり、9月6日に第1子が生まれたりとバタバタな一年でして、まるでppBlogの開発・サポートが出来ませんでしたが、今年はなるべく時間を作ってppBlogをいじれたらと思っています。 世界中の皆さんにとって、良い年でありますように。 久しぶりのカキコ。 静的リンクでの挙動を変えています。URLのパスに日付情報などを含ませるように。まだ、いじっている段階なので、色々と不具合があるだろうけれど、まぁ気にしないと。 日付情報がある以外には、現状、PermaLink用の英数文字からなる記事タイトルを別に指定できたのですが、これはそのまま取っておくとして、そうでない場合は、記事のタイトルがそのままブラウザのアドレスバーに表示されるような感じにしてます(静的リンクが有効な場合ですが)。今時のブラウザならエンコ

  • HTML5でWebページをマークアップするための基礎知識

    最近よく目にする「HTML5」という言葉。JavaScriptAPICSS3、SVGなどを含め、急速な広がりを見せつつある「HTML5」の基礎を学べる入門連載です。「HTML5を使うと、何ができるのか」「それを実現するには、どのようなプログラムを書いたらいいのか」をお届けします 5からHTMLの“文法”が変わるって知ってた? 連載第1回の「Webの3つの問題を解決する「HTML5」とは何なのか」では、HTML5という技術革新の意義、そして連載の大まかな流れについてお話ししました。連載第2回である今回は、HTML5のマークアップを行うための基礎知識についてお話しします。 HTML5では、その文法が大きく変化しました。「HTMLが、どれほど普及しているか」「根底となる“文法”が変わってしまったら、どれほどの影響があるか」に想像が及ぶ方であれば、非常な驚きと不安を抱かれるかもしれません。

    HTML5でWebページをマークアップするための基礎知識
    keijix
    keijix 2010/10/12
  • Loading...

  • HTML5 Canvasのブラウザによって異なる微妙な振る舞いについてまとめてみた。 - 風と宇宙とプログラム

    はじめに CanvasはHTML5とは切り離された独立した仕様(HTML Canvas 2D Context)になっているようですが、現状のブラウザ上でのCanvasのについて、普段はあまり気にしない微妙な振る舞いについて調べた結果をまとめてみました。 調べたブラウザの各バージョンは以下の通りです。 Firefox Chrome Safari Opera 3.6.8 6.0.490.1 dev 5.0.1 10.61 線を描く (lineTo) ただの直線を描くだけのlineToですが、その単純なものにも、恐らく、多くの人が普段は気にしないような問題があります。それは座標値とアンチエリアスです。詳しく見る前に、実際の結果を示しましょう。下記のイメージ中に描かれている線は、いずれも線幅(lineWidth)が1の線です。 (左から、Firefox, Chrome, Safari, Opera

  • 404 Not Found - Josh Duck

    Periodic Table of HTMLThe periodic table is long gone, replaced by a new mobile version. While you're here, you can read some of the coverage of the original table, find out what happened to it or, visit Mike Riethmuller's clone. Visit All The Tags

  • HTML5ことはじめ | Another Step.com

    制作者側にはかなり普及してきた感もあるHTML5。 情報は溢れていますが、自身も少しづつ勉強してきたのでXHTML1.0との違いなどをメモがわりにアウトプットしてみた。 (マークアップメインの話です) HTML5はW3Cより2008年1月22日に草案が発表され、2010年8月現在も草案の段階です。 勧告はW3Cが2012年3月、WHATWGは2022年としており、どちらにしてもまだ先ですが、新しいブラウザは段階的に対応していくと予想されるし、JSを使えばIEもカバーできるので、現状利用することも可能でしょう。 メリット・デメリットについては賛否両論?あるでしょうが… ※このサイト自体もHTML5で組んでいますが、HTML5、WordPressともに未熟なため、制御できず正しく組めていない箇所があります。 また下記内容についても間違っている可能性があるので、その場合は指摘していた

  • Designing for the Future with HTML5+CSS3 : Tutorials and Best Practices | DevSnippets

    HTML5 is the next major version of HTML. HTML5 provides some great new features for web designers who love to create readable code and semantically-meaningful layouts. HTML 5 introduces and enhances a wide range of features including: form controls, APIs, dragging and dropping, multimedia, drawing graphics on screen and a lot more. The new specifications has added quite a few interesting and usefu