ティム・バーナーズ＝リーがHTML5世代のDRM技術「EME」の開発タイムラインの延長申請を却下
World Wide Webで使用される各種技術の標準化を推進する為に設立された標準化団体World Wide Web Consortium(W3C)のティム・バーナーズ＝リー氏が、HTML5世代のコンテンツ配信のDRM技術である「Encrypted Media Extension(EME)」の開発遅れに伴うタイムライン延長申請を却下したことが明らかになりました。Google・Microsoft・Netflixなどが推進する次世代DRM技術の実用化に暗雲が垂れ込めています。 Tim Berners-Lee just gave us an opening to stop DRM in Web standards | Defective by Design https://www.defectivebydesign.org/blog/tim_bernerslee_just_gave_us_op
HTMLを15年書いてる僕が語ってみる vol.1 - Qiita
僕はHTMLを書き始めて約15年。割と年齢は若い方で、いわゆる「ベテラン」という感じではないのですが、 長く付き合ってきたこの言語について、最近思うことが多いので語らせてください。 元W3Cメンバーとして考えていたことなので、 マークアップエンジニア、フロントエンドエンジニアには刺さるかもしれません。 以下が今回のお話です。 語りたいこと HTMLの変遷 HTMLってそもそも何 僕が書いた15年間 1. HTMLの変遷 1-1. 僕のマークアップの始まり 約15年前、僕は自分が産まれる前にできたファミコンのスーパーマリオブラザーズが大好きで、 なんとなく勢いで「ホームページ」を作ってみました。 母親がドリームキャストでホームページを作っていたので、「あ、なんかできそう」みたいな感覚で。 1-2. テーブルレイアウト 当時はHTMLが主に大文字で書かれていて、ほとんどがtable要素でマーク
Kiwi.js - 簡単に使えるHTML5ゲームエンジン MOONGIFT
HTML5によって表現力が高まっていき、さらにハードウェアとJavaScriptエンジンが高性能化することでWebベースのゲーム開発も現実的なものになってきました。高度なゲームはまだ難しいかも知れませんが、パズルゲームやRPGであれば十分こなせるようになっています。 今回はそんなHTML5ベースのゲームエンジンKiwi.jsを紹介します。デスクトップ、スマートフォンの両方に対応したゲームエンジンです。 Kiwi.jsの使い方 Kiwi.jsでは様々な機能のデモが用意されています。例えばスプライト画像による動きのあるアニメーション。マウスの動きに合わせて動きます。 アニメーションとして自動再生されるタイプもあります。 カメラ。オブジェクトを中心に映し続けます。 多くのオブジェクトを描画しても動きは遅くなりません。 キーボード入力もサポートしています。 テキストについても表示場所、フォント、色
エイプリルフールで用いた知見・技術・隠し機能を発表します！！！！！！ - KMC活動ブログ
エイプリルフールで大幅なリニューアルを遂げたKMCのウェブサイトでしたが、これを作るのにたくさんの知見が得られたので紹介します！！ ちなみにエイプリルフールのサイトは下のリンクで見ることができます。（音がなります） http://www.kmc.gr.jp/2015April GitHubのリポジトリはこちらです！ github.com 知見 タグのネストは100個程度に抑える divタグを256個囲うことによって、中央揃えを実現しようとしてこの制限を発見しました。 hitkey.nekokan.dyndns.info blinkタグはもう動作しない marqueeは動作します。これからはCSSAnimationをつかいましょう。 marqueeを置き過ぎるとfirefoxで落ちる chromeでは快適です。marqueeを眺めるならchromeがオススメ！ ブラウザ落ちたという報告もfi
初心者でもほぼ無料でHTML5/CSS3を勉強できるコンテンツ9選 - paiza times
Photo by slavik_V こんにちは。谷口がお送りします。 Webの仕事を目指している人やプログラミング初心者、さらにはブログをやっている人など、HTMLとCSSを習得したい人は多いと思います。特に最初は「Webサイトを作ってみたいけどどうしたらいいんだろう……」「自分のブログを豪華にしてみたいんだけど、HTMLっていまいちよく分からない……」など、さまざまな悩みがあるのではないでしょうか。 HTMLとは、Webページを作成する時に使用されるマークアップ言語の一つです。 マークアップ言語とは、プログラミング言語と違い「タグ」を使って、「ここからここまでが見出しです」「ここからここまでが一つの段落です」等といった印をつける言語です。基本的にプログラミング言語のような「入力値を取得し計算処理をする」「条件を満たすまで処理を繰り返す」といった処理や計算はできません。 CSSは、Webペ
Web制作（コーダー）の実務で個人的に使っている技術やツールと今後使いたいもの
コマンドラインツール ターミナルからnpmでファイルをさくっとダウンロードしたり、ちょっとした繰り返し作業も一発で実行してくれるツールが色々あって、やっと苦手意識も減ってきました。 まだ全然使いこなせてはいないんですが、前に比べて意味が分からず門前払いを食らっていた便利なツールがちょっとづつ使えるようになってきました。 気になったのでこもりさん（@chiper）が販売しているDevelopment Environments for Web Designersというのを買ってみました。今あまりWebデザイナーではないけどw Brackets メインで使っているエディターです。もともとはエディターの移行を考えていてSublime Textがあまりなじまなかったときに、プラグインが入れられリアルタイムリロードが簡単にできるエディターとして触ってみました。以降ずっと使っています。Advent Ca
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
[JS]異なる高さを単に揃えるだけでなく、グルーピングや列に応じて揃えることも可能な便利スクリプト -matchHeight
デモページ：幅1,200pxで表示 これは、ボーダー無しの状態。 jquery.matchHeight.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.matchHeight.js"></script> </head> Step 2: HTML 適用するパネル全てに同じclassを付与します。 各パネルが横一列に配置された場合は、全て同じ高さに。複数の列に配置された場合は各列で一番高いも
Timesheet.js
Timesheet.js Visualize your data and events with sexy HTML5 and CSS3. Create simple time sheets with sneaky JavaScript. Style them with CSS and have mobile fun as well … Just include Timesheet.js and configure your data. No external dependencies, no jQuery needed and of course no Angular.JS! Just a few lines JavaScript to generate a beautiful HTML5 layout and some really delicious CSS to be custom
[JS]画像を用意しなくていいから簡単！クリッカブルに対応した日本の都道府県の地図を表示するスクリプト -Japan Map
デモページ 2 Japan Mapの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="https://code.jquery.com/jquery-2.1.1.js"></script> <script src="jquery.japan-map.min.js"></script> </head> Step 2: HTML 日本地図を配置するdivをセットします。 <body> ... <div id="map-container"></div> ... </body> Step 3: JavaScript jQueryのセレクタで配置する場所を指定し、スクリプトを実行します。 <script> $(function(){ $("#map-container").japanMap({ on
Google HTML/CSS Style Guide まとめ - Qiita
Google HTML/CSS Style Guide（2019年9月時点） より意訳とまとめ。訳が間違っていたらごめんなさい。 プロトコル imageやmedia、scriptなどを指定するときに、可能な限りhttpsを利用する。 <!-- 非推奨：プロトコルの省略 --> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- 非推奨：httpの利用 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- 推奨 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery
2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ
数多くのブログで2014年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 キーワードとしては、スマフォ・タブレットなどの小さいサイズのタッチデバイス、レスポンシブ（特に画像）、HTML5/CSS3、ビッグデータ、リスク管理が注目されています。 2014年、ウェブ制作業界全体の流れ ウェブデザインの2014年のトレンド 2014年に大きく変化するウェブデザインの7つの傾向 2014年、注目度の高いIT系の職種・役割 2014年、ウェブ制作業界全体の流れ まずは、2012, 2013年と的確な予測をだしてきたsitepointの2014年のウェブ制作業界の全体の流れから。 10 Web Predictions for 2014 スマートフォン中心の年 最終的にはデスクトップからのアクセスをスマフォが超える HTML5のウェブアプリ
HTML&CSS フロントエンド 何度も読み直したい資料・ツールまとめ - 酒と泪とRubyとRailsと
HTML5/CSS3などのフロントエンドもWeb上の資料が充実しすぎていて、ついつい今までなんとなく作って体系的な知識が不足していました。知れば知るほど奥が深いフロントエンド・コーディングを少し手も効率的にするために、いくつか書籍を購入したり、ネット上の資料を読み込んでみたので、備忘録がてらまとめていきます。 (02/05 20:10) 定期見直し 🎂 [Style Guide]「Google HTML/CSS Style Guide」の和訳 Googleが作ったStyle Guide『Google HTML/CSS Style Guide』を和訳していただいた『Google HTML/CSS Style Guideを適当に和訳してみた』。HTMLのベーシックな書き方から、CSSの書き方まで一貫している。個人的にはCSSのプロパティがアルファベット順というのは合理的だと思う！ 🐰 [S
ワンランク上のHTMLコーディングを行うための18のポイント | ベイジの社長ブログ
HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。 ターゲットブラウザで大きな崩れがない。 リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。 バリデーター・チェックでエラーが出ない。 逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。 そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.smaroomch.net/web-design-10/
NerdyData
必ず覚えておきたいHTML5の特徴と新機能／HTML5完全読本#1-1 | HTML5完全読本―実践テクニックとWebデザインの最新動向