[B! HTML5] tihataのブックマーク

CreateJSでHTML5 Canvasを操る | 第1回 CreateJSとは

CreateJSでHTML5 Canvasを操る第1回 CreateJSとは第1回目はCreateJSの概要と、おおまかな機能、またCreateJSの理解に必要な概念を解説します。簡単なデモを多く用意したので、まずはどんな表現ができるのかを実感してもらえるといいと思います。 CreateJSとは CreateJSは、Canvasを便利に扱うためのライブラリ群で、JavaScriptの知識があればHTML5のCanvasを直感的に制御し、コンテンツを作ることができます。CreateJSというと、Flash経験者のためのライブラリと捉えている人がいるかもしれませんが、JavaScriptでコードを書いた経験があれば、だれでも使いこなすことができます。現在のところFlashがかつてになっていたウェブ上のダイナミックな表現を可能にするツールとしても注目されています。これまで、ウェブの動的コ

tihata 2015/04/22

読む

HTML5

リンク

なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点

画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる﹁レスポンシブ・イメージ﹂ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログで、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。まずは推奨の記述方法からレスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです‥ とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブしておいて、使う時にもう一度見な

tihata 2014/10/08

便利なのかと思いきや、mediaをCSSにかけないのはかなりおしっこちびりそう。

HTML5

リンク

よくある3つのデザインから考える、マークアップの最適解

Web制作においてHTMLのマークアップには絶対の正解というものがありません。ページを制作しているとき、特にセマンティクスを意識したとき﹁このマークアップで正しいのだろうか﹂と悩むことがあると思います。そんなマークアップについて考えるイベント﹁MarkupCafe﹂がhtml5jマークアップ部の主催のもと開催されました。﹁MarkupCafe﹂では参加者同士がチームに分かれ、お題となるデザインに対して議論し、自分たちならこうマークアップするといった考えを発表し合いました。本記事では﹁MarkupCafe﹂で出された”フッター”、”パンくずリスト”、”求人情報”の3つのお題をもとに、Web制作におけるマークアップの捉え方、誤った使い方をしがちな要素などについて考え、マークアップの最適解を探ります。 ※html5jは、HTML5などのWebプラットフォーム技術を使った﹁ものづくり﹂に関わる

tihata 2013/09/28

HTML5

リンク

ul・ol・li要素の備忘録 - NxWorld

かなり今さら感はありますけど、ul・ol・li要素関連の備忘録です。対応ブラウザ︵特に一部のIEで未対応︶とかそもそも使う場面がそんなにないとかの理由で使用頻度がかなり低いと思うのもありますが、低いからこそ使おうと思ったときにパッと思い浮かばなそうなので書き残しておきます。 list-style-type リストマーカーの種類を指定するプロパティlist-style-typeのメモです。使用頻度が高いと思うのはulやolにデフォルトで設定されているdiscやdecimal辺りかと思いますが、他にもいろいろあるのと一部のブラウザでは未対応などあるので、パッと確認したいときのために一覧にしました。画像はWin7 Chromeでの表示をキャプチャしたもの。 ChromeやFirefoxといったブラウザでは上記のように問題なく表示されますが、IEでは一部のマーカーが対応していない場合がありま

tihata 2013/07/25

HTML5
html

リンク

[HTML5 入門]HTML5におけるブロック要素とインライン要素の考え方

http://www.hamashun.com/ で、お会いしたときにここぞとばかりに私が気にしているコーディングのしかたなどを聞いてもらったりしたのですが、いくつか気になるコメントをもらえたのでじっくり考えてみました。今まで考えていた根拠の薄いコーディングルール私は普段からかなり文書構造に気をつけてコーディングを行っていますが、仕様の中で理解できない部分についてはわりと独自の解釈も用いています。そのひとつに、「入れ子の同じ階層にブロック要素とインライン要素を置かない」というものがありました。入れ子の同じ階層にブロック要素とインライン要素を置かない具体的に説明すると、body要素等のブロック要素の直下にdiv要素等が置かれていた場合、それの外側の同じ階層状にspan要素等を置かないという事です。 <body> <div id="container"> <header id="top

tihata 2013/02/27

なるほどー分かりやすかったー！

HTML5

リンク

[HTML5 入門]実制作で迷わない為のマークアップ例：会話文

文書構造を意識したマークアップ例今回から始める不定期連載です。HTMLのコーディングのやり方はリファレンスサイト等で例文を用いて行われることが多いですが、どうも抽象的だったり、実際の運用に即していない印象のものが多く見られるように感じています。仕様に関する解説やコードの書き方も、遠まわしだったり、﹁だから結局どう書けばいいの？﹂という感は拭えません。また、ドキュメント自体が書かれた地域の文化を基準にしており、我々日本のweb制作現場の実際にそぐわない場合もありますよね。こういったことについて、一つ一つ実際の事例や具体的な使われ方を挙げながらHTML、CSSのコーディングについて解説したいと思います。また、この連載にはブログの記事と同じく私個人のHTML5のマークアップに対する考え方が強く織り交ぜられることと思います。もし見解の相違などありましたらご意見頂きたいと考えています。シン

tihata 2013/02/06

分かり易いなーセマンティックやわー

HTML5

リンク

知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ

調べる。備忘録としてwebやデザインについて調べたり新しく知ったことなどを書き残していくカテゴリです。

tihata 2013/01/24

感覚として知ってたけどこういう仕様でなってたのかー！勉強になりました！

リンク

HTML5で組んでるならこの魔法のjsも入れておけっていう話

現在、A!@attripさん発で話題になっている﹁たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS﹂という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応透過PNGに対応 opacityに対応といったことが可能になります。要はCS

tihata 2012/12/03

リンク

HTML5のスマホ対応の基礎知識とハマリどころ3選

HTML5のスマホ対応の基礎知識とハマリどころ3選：スマホ向けサイト制作で泣かないための秘伝ノウハウ（2）（1/3 ページ）スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、HTML5についておさらいし、OSごとの対応状況や、iPhone／Androidなどで表示する際のハマリどころを紹介こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「スマホ向けサイト制作3手法の基礎知識と課題、OS／機種依存のハマリどころ3選」では、スマートフォン向けサイト制作についての注意点や、代表的なOS／機種依存を紹介しました。今回は、KSKの製品「x-fit（クロスフィット）の開発・販売や、実機での検証サービス事業で蓄

tihata 2012/11/23

めも

HTML5

リンク

cmmntr.com

This domain may be for sale!

tihata 2012/10/11

見やすいかどうかは別として、すごいなー

リンク

[HTML5 入門]実用を意識した最小単位からの文書構造チュートリアル

文書構造って難しいですよねコーディングしていたら迷う事ってたくさんありますよね。﹁これは見出しなのかな﹂﹁この段落はどこまで段落なんだろう﹂﹁検索バーはどのタグで囲めばいいの？﹂等など、判断に詰まることはいくらでもあります。そしてその判断の迷路を抜け出た後も、ふと﹁このマークアップで本当に合ってんのかな﹂と再び迷いに陥ることも。エレメントの役割とタグの用途の正確な理解コーディングしているときに何故迷うか。これは、それぞれのパーツがそのサイト内にどういう役割で置かれているかをはっきりと定義できていない各タグの用途を理解できていないこのいずれか、または両方が出来ていないから起きる問題だと思います。エレメントの役割とタグの用途、この二つがはっきりしていればコーディングに迷う事はありません。…まあ(他にも納得の行かない組織ルールとかSEOを考慮した記述等があって)それは理想の話なんです

tihata 2012/10/04

うおー！すげー！ながいーｗｗｗ帰ってからじっくりよむデス！

HTML5

リンク

はじめてHTML5でコーディングする時に注意したいアウトラインとかいろいろ

先日このブログを HTML5で作り直しました。その時に思った、HTML5でコーディングするときの基本的な注意書きです。なので、HTML5をこれからやってみようかなーという人向けです。canvas、video、audio などには触れていません。もっと基本の文章構造、アウトラインについての記事です。また、後半は実際に HTML5でコーディングする時の tips になってます。先日このブログ – Webデザインレシピを、HTML5で作り直しました。HTML5 … クライアントさんのページでは、まだ一度も使ったことがないし、勉強のためのサンプルはいくつも作ってみたんですけど、実際に運営しているページで試したいなーと思い、思い切って HTML5にしました。とりあえず作ってはみたものの、まだまだ分からないことだらけ。これから HTML5でコーディングをする時に、とても大事だなーと思っ

tihata 2012/09/12

あらためて復習するお！

HTML5

リンク

HTML5カンファレンス2012の資料まとめ

HTML5カンファレンス2012の講演資料のまとめです。 HTML5カンファレンスは非常に有意義なものでした。講演頂いた方、スタッフの皆様ありがとうございます。 HTMLとかCSSとかAPIとか -2012秋編-︵矢倉眞隆さん︶ HTML5や CSS3の新しいタグやプロパティについての解説。でもその前に、W3C と WHATWG についての話。一部のメディアで、W3C と WHATWG が決裂したかのような報道がされたが、実際は問題ないとのこと。 W3C と WHATWG のEditorを務めていた Ian Hickson氏は WHATWG の HTML に集中し、バグ修正が加速しそうです。セッションでは紹介されていませんでしたが、こちらの記事に Ian Hickson氏からのメールの邦訳など載っています。 HTML5仕様をめぐるW3CとWHATWGについて、Ian Hick

tihata 2012/09/10

あとでちゃんと読んでおくです!!

HTML5

リンク

cmmntr.com

This domain may be for sale!

tihata 2012/08/28

css3
HTML5

リンク

Beercamp 2012

Gather ye monsters, ye wily web wobsters. Drop your iPhoneries, throw on clean clotheries. Come join the tribe, revel, rock and imbibe. Where Chopin wrote etudes, we'll be fueling bright moods. Swing on by and share a hehe, or go radioactive like Madame Curie. Strap some soles to your blistery feets, dance and debauch to some warsawy beats. We're rockin' the flux like Marty McFly, save

tihata 2012/08/17

CSS3で飛び出す絵本かーこれはすごい！

リンク

暑さでやる気がでないWebデザイナーにおくるHTML5表現まとめ

仲夏。HTMLファイ部の本多です。 jsdo.itにて、コーディングコンテスト﹁Web Creator's Contest Q﹂を開催しています。QはWebクリエイターのためのコンテスト、HTML5、JavaScript、CSSを駆使して挑戦しましょう！募集中のテーマはズバリ、＼夏を涼しくする表現／暑い夏をひんやり涼しくしてくれる作品をお待ちしています！本記事では、続々と集まっている投稿作品の一部をご紹介します。夏の暑さでやる気のでない方、涼しくてアツいHTML5作品をご堪能あれ！ ※ Chrome、Safari など、最新のモダンブラウザでご覧ください。夏を涼しくするコードまとめ！ ripple sound 音と波紋を合わせた表現が爽やかで良いですね...！A～Zのキーを押すと自分で波紋を出せます。

tihata 2012/08/17

すずしげー♪

リンク

Web Lab

Web Lab. A series of interactive Chrome Experiments made by Google. See the magic of the web brought to life. Open to the world online. Live from the Science Museum, London. Enter the Lab.

tihata 2012/08/01

リンク

Liveweave HTMLエディター

Initializing... Liveweave expand_more home Home data_object CSS Explorer arrow_outward Palette Color Explorer arrow_outward Polyline Graphics Editor arrow_outward build Tools expand_more restart_alt Load base template post_add Generate Lorem ipsum... code Format HTML code_blocks Format CSS data_object Format JavaScript library_add Library expand_more AAlgolia JS Animate CSS Apex Charts JS BBulma C

tihata 2012/07/11

HTML5,CSS3,JavaScriptがリアルタイムで編集できるHTMLエディタ『Liveweave』

リンク

CSS Transformsについてのメモ

既に色々なデモページが作られていたり、実用されていたりするCSS Transf ormsですが、ちゃんと理解したかったので調べてみました。まだそんなに自信はありませんが、以前よりは理解できた気がします。というわけなので、自分が分かる範囲で説明してみたいと思います。 CSS Transf ormsは2Dと3Dとで別になっていますが、将来的には SVG Transf ormsと合わせて一つの仕様になるそうです。今はまだ別々なので、それぞれにリンクをしておきます。括弧内は現時点での最新の日付です。 WD: CSS 2D Transf orms︵2011/12/15︶ED: CSS Transf orms︵2011/11/28︶WD: CSS 3D Transf orms Module Level 3︵2009/03/20︶ED: CSS 3D Transf orms︵2011/03/21︶新しくなった

tihata 2012/07/06

解りやすい図とサンプルでとても理解し易い良記事です!!

リンク

大红鹰dhy7788_IOS/Android通用版/手机app下载

【秦风网】大红鹰dhy7788：慰问驻村和挂...2024-02-06 【陕西省教育厅】陕西省委教育工委积极...2024-02-02 【西部网】专家谈丨两会微观：大力发展...2024-01-31 【群众新闻网】大红鹰dhy7788举行集成电...2024-01-30 【中国教育在线】大红鹰dhy7788举行集成...2024-01-29 【西部网】大红鹰dhy7788举行集成电路学...2024-01-29

tihata 2012/06/22

リンク

はてなブックマーク

タグ

関連タグで絞り込む (16)

HTML5に関するtihataのブックマーク (32)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス