わかりやすい「HTML5」仕様解説書
2016年5月9日 著 大藤さんのKindle版リフロー型電子書籍の第2弾、『わかりやすい「HTML5」仕様解説書』は、今年3月18日16時頃から3月19日16時頃まで、Amazonのサイトにおいて誰でも無料でダウンロードできたタイミングで入手していました。仕様の解説、という題名に偽りは無いのですけど、大藤さんと言えばかつて個人的に大変お世話になった『HTML&XHTML&CSS辞典』のイメージが強いこともあって、本書もその類書というか、タグ辞典と呼んだ方が相応わしく思える内容・構成でした。実際、それは第1章「HTML5の基礎知識」で 2014年10月28日にW3C勧告として公開されたHTML5の仕様書における「HTML構文（MIMEタイプ「text/html」で配信するHTML文書）」での要素と属性の使い方について解説しています。 と明記されている通り。しかし、HTML 5.1が今年9月
ここまでできる！HTML＋CSS | 第1回 タイピングゲームを作る
記事中には先行実装の仕様を取り扱ったものがあります。仕様策定が続いていますので、最新仕様については、仕様書もご確認ください。（2017.07.14） はじめに このシリーズでは、HTML＋CSSの技術を使った、さまざまな実装アイデアを解説します。JavaScriptを使わずとも、いろいろな表現が可能です。HTMLとCSSを力をどれだけ引き出せるかに重点をおきます。 第1回目はJavaScriptを使わずに、HTMLとCSSのみで実装したタイピングゲームの解説をします。 今回紹介するサンプルは以下のリポジトリからダウンロードまたはクローンできます。 サンプル codegrid / 2014-01-derive-html-css まずはサンプルを見てみましょう。NEW GAMEボタンをクリックすると、ゲームが始まります。画面上に表示されたワードを制限時間内にタイピングしていきます。問題をクリア
HTML の構造を YAML で吐き出すスクリプトを書いた - ヤルキデナイズド
pixiv の HTML がどんどん変わって pixiv gem が追従できなくて困った。ので楽するやつを書いた。 HTML を読み込ませると要素の親子関係と各要素の属性を YAML にして書き出す。テキストノード他は無視する。 XPath か CSS Selector で不要な要素を取り除くことができる。 !omap で書き出してあるから map の順序が固定されていて diff しやすい。 pixiv の画像一覧ページなどを定期的に取得して HTML で保存しておき、最新の2つから広告やワンタイムトークンを削除しつつ YAML 化して差分を取る。で構造に変化があれば対応する。テストも自動化したいけどそれはいずれ。 使い方： html2yaml.rb [-x, --exclude=<xpath or css>] \ [-i, --include=<xpath or css>] \ <UR
W3C Markup Validator + Validator.nu をローカル環境で (1)
W3C Markup Validator + Validator.nu をローカル環境で (1) 公開日: 2010年8月29日 タグ: memo, macosx, validator, install すっかり音楽サイトではなく技術サイトになってしまった感のある我がサイトですが、今回も懲りずにそんなネタ。 ウチはご存知の通り（なのか？）Blosxom を使ってサイトの更新をしているので、Mac OS Web 共有を使ってローカル Web サーバを構築しておくとテストに何かと便利（最終的な Web ページとしての出力結果がローカルで確認出来るなど）なのでそうしているのですが、この最終的な出力結果の文法エラーをチェックしようと W3C Markup Validator で確認する際にだけは、一度サイトにアクセスしてページのフッタに置いてある「Valid HTML」をいうリンクからチェックする
「あなたは、これらを美しくマークアップできるかな？」#Markup CafeTokyo【CodeIQ提供】#html5j｜U-NOTE [ユーノート]
「3つの＜table＞を自分でも考えたんですけど、あまりしっくり来なかったので普通に1つでまとめてしまう形になりました。」（Cチーム） Dチーム 「最初＜table＞で囲うか迷ったんですけど、しっかり＜table＞で囲いこむと縦と横の紐付けをしっかり行ってくれるんだなと思いました。＜table＞の良さを初めて知りました。＜scope="row"＞を使って、下に紐づいているということを示しています。」（Dチーム） 投票結果 発表後、どのチームが一番良かったかを投票して決め合い、Bチームは4票、Dチームは6票、Cチームは6票、Aチームは6票という結果で、甲乙つけがたく３チームが同じ得票結果となった。 この問題では、table要素を巧みに利用することはもちろんのこと、音声読み上げをした場合に表の意味が利用者に伝わるかを特に考察されていた。 全体を通して マークアップエンジニアにとって、普段の業務
![「あなたは、これらを美しくマークアップできるかな？」#Markup CafeTokyo【CodeIQ提供】#html5j｜U-NOTE [ユーノート]](https://cdn-ak-scissors.b.st-hatena.com/image/square/d2220706add1f11d95e051274c6fd7d7d639d805/height=288;version=1;width=512/http%3A%2F%2Fimgs.u-note.me%2Fnote%2Fcaption%2F47486651.jpg)
コーディング規約を作ろう
2017年1月6日 Webサイト制作, 便利ツール コーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 ↑私が10年以上利用している会計ソフト！ コーディング規約に含むべき項目 ディレクトリー階層 ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「
正しいHTMLを書く目的はただ一つ - ネコメシCEOブログ
[HTML]セマンティックで正しいコードを書く目的 ― 二人の主を戴く技術者 - WEBCRE8.jp という記事がFacebookのフィードに流れてきたので読んでみました。 1がいきなり理由（目的）じゃないですし、2と5は同じことを言ってますし（SEOに強いなんて事実はもはや有って無きに等しいのが実態ですが、いずれにしても機械が読んで嬉しいかという話ですので）、3と6はただのエゴですし、4の標準化っていうのはセマンティック云々の文脈でいうならばruleの話ではなくstandardの話をすべきではないでしょうか。カタチの想像もできないような未来を夢見る暇があるのなら、まずWebガバナンスからどうにかする努力をしたほうが何倍も有益でしょう。 2013/3/22 09:56追記：「セマンティックで正しいコードを書く6つの目的」のような構成であると読み取ってしまって（理由の箇条書きだと思って）上
Fw: Writing HTML ～これからの HTML の書き方～
2012年7月9日 著 というわけで、先日参加したFirefox Developers Conference 2012 in Osakaの出演セッション、Writing HTML ～これからの HTML の書き方～の動画がYouTubeで公開されました。見返してみますと自分の講演パートの酷さと、そのあとの村岡さん＆秋葉さんによる素晴らしい進行とファシリテーションに、改めて気づかされます（ちなみに寸劇は51:20ぐらいから始まるらしいです......）。既に書いたように、HTMLの書き方の話では全然なくなっていますけど、今現在とこれからのWebデザインについてざっくばらんに語り合った内容が、むしろ参加者のみなさんの興味により合致していたら良いのですが。ほかのセッションの資料や動画なども、あわせて公開されていますので、興味と時間のある方はチェックしてみてください。 著作者について @kazuh
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法 2011-08-28 Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。 Googleでは、0.5秒遅くなると、検索数が20%減少する amazonでは、0.1秒遅くなると、売り上げが1%減少する という報告もあるようです。Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。 今回はWebサイトのパフォーマンスを上げる方法を取り上げます。 パフォーマンスアップの前に 応答時間の限界 0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。 1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレ
1要素1クラス、画像を一切使わずCSSで実装するiPhone UI
1要素に1クラスを指定するだけで、画像も使わずさっと作れるiPhone風CSSライブラリを作ってみました。 最近Macがほしくてたまらないえどです。こんにちは。(降ってこないかな・・) ↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone/Safariでしか最適化されていません) 1要素1クラス、画像を一切使わずにCSSで実装するiPhone UI - jsdo.it - share JavaScript, HTML5 and CSS ちなみにiPhoneで実際に見るとこんな感じに見えます↓ iPhoneで実際に見るには、以下のURLから見れます↓ (jsdo.itだとviewportが使えないため、ブログ自体にデモをアップしました) http://goo.gl/s5fV 1要素1クラスで実現する 今回のサンプル作成でこだわったのは、1要素に1クラスを指定すること
画像自体をBase64エンコードしてHTML内に埋め込んで高速化するPHPコード例:phpspot開発日誌
Base64 Encoding for Images. 画像自体をBase64エンコードしてHTML内に埋め込んで高速化するPHPコード例。 Googleがインスタントプレビューや画像検索で導入してその読み込み速度に驚いた方も多いかもしれません。 その手法をPHPで実現するコードが掲載されていましたのでご紹介。 PHPでやるにはそんなに難しいわけではなさそう。 <?php $img_src = "image/sample.png"; // 画像ファイルの指定 $imgbinary = fread(fopen($img_src, "r"), filesize($img_src)); // バイナリデータを読み込み $img_str = base64_encode($imgbinary); // base64エンコード echo '<img src="data:image/png;base6
Loading
Videos Watch and learn from our engineers as they show how to bring the latest web technologies to your websites on Safari. Watch Safari and Web Videos Forums Ask questions and discuss a variety of web development topics with Apple engineers and other developers. Apple Developer Forums Safari Extensions Safari extensions are a powerful way to add new features to Safari. They are built in Xcode wit
永久保存版！？携帯コーディング、これだけ読めばすぐできる！ | KAYAC
マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 （いつもありがとうございます！） そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！ 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する） 画像を含むページ容量100KB以内（HTML自体の容量は9KB以内） 画像はgifか
コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
Enjoy*Study - IE6ではJavaScriptで動的に作成したiframeに対してsubmitできない(IE7は未確認) ->解決
IE6だと下記のようなHTMLを表示すると、別ウインドウに対してsubmitされてしまいます。 なお、Firefox2.0、Opera9.2だとOKです。(iframeに対してsubmitされる) <html> <head></head> <body> <form enctype="multipart/form-data" method="post"> <input type="file" name="userfile" id="file"></input> </form> <script> var iframe = document.createElement('iframe'); iframe.name = 'targetFrame'; document.body.appendChild(iframe); var form = document.forms[0]; form.actio
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Html5 conference 2013
エクセルのデータをhtmlに1秒で変換してくれるサイト TABLEIZER!が便利すぎる。 – @attrip
3streamer.net
IBM Developer
CSS Nite LP9 - CSS3 FOR TOMORROW - CSSアニメーション