divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ
HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Content in HTML5 -Div or Section or Article 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 divとsectionとarticle、それぞれの特徴 divとsectionとarticle、どれを使う？ sectionとarticleの組み合わせ方 divとsectionとarticle、それぞれの特徴 d
すこし開かれたWHATWG HTML - fragmentary
8月末のことなんだけれど、WHATWG HTMLの仕様書がGitHubに移った。 [whatwg] HTML spec now on GitHub (from Ian Hickson on 2015-08-27) 体制も少し変わって、HixieがひとりでやっていたHTML仕様の作業にAnneやDomenicなども直接関わるようになった。Issuesでの議論やPull Requestの受け付けも始まり、だいぶモダンな策定環境になった。 これまでのWHATWG HTMLとHTML5仕様書 これまでのWHATWG HTMLは長らくSubversionサーバで運用されていた（もしかするとCVS時代もあったかも）。 HTML仕様書は基本的に1枚のHTMLファイルに書かれていて、それをツールで切り出しmultipage版やPDF版、Web Developer Editionなどを生成していた（あ、<p
【Service Worker最前線】仕様策定の現場で何が議論されているのか？
【Service Worker最前線】仕様策定の現場で何が議論されているのか？ 安田 絹子 昨年末頃からホットなトピックになりつつある「Service Worker[1]」ですが、その先行実装が落ち着いてきた今夏、仕様に対する提案や今後の方向性などについて話し合うF2F（Face-to-Face）ミーティングがサンフランシスコで開かれました。本稿では、このミーティングの様子を中心に、Service Workerの最近、そしてこれからの論点をいくつか解説してみたいと思います。 Service Workerは昨年5月に最初のドラフトが公開されたばかりの新しいAPIですが、Webの前提を変える可能性を持った基盤APIとして注目されています。Service WorkerはあくまでWebの1つのAPIにすぎませんが、このミーティングではWebのこれからの方向性を考える上でも興味深い議論がいくつかなさ
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典（ひらお ゆうてん） === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
SPAがネイティブアプリをぶっ壊す：HTML5/Javascriptが変えるWebの未来 - Qiita
はじめに タイトルは半分釣りですが、半分本気で考えてもいます。 近い将来、Webアプリが今のネイティブアプリの市場を超えてくる、と仮説を立てています。 ぜひ、先人のみなさんのご意見やお考えを教えてください。 SPAについて SPAとはなにか（What） 歴史 佐川夫美雄さんのイベントレポートの一部が、非常にまとまっていてわかりやすい部分でしたので、まず引用させていただくこととします。 RIAはアプリケーション利用者に対し高い評価を得ましたが、2010年のAppleショックにより衰退の方向へ向かいます。具体的には2010年にSteve JobsがFlashを激しく批判したことに端を発します。プロプライエタリ(Proprietary Software)なFlashよりオープン性のあるHTML5を推進するようになりました。2011年にはMicrosoftがWeb開発者に対してSilverligh
CodeIQについてのお知らせ
2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod
［速報］マイクロソフト、HTML5/JavaScriptアプリをiOS／Android／Windows対応に一括変換する「ManifoldJS」をオープンソースで発表。Build 2015
［速報］マイクロソフト、HTML5/JavaScriptアプリをiOS／Android／Windows対応に一括変換する「ManifoldJS」をオープンソースで発表。Build 2015 マイクロソフトが米サンフランシスコで開催中のイベント「Build 2015」。2日目の基調講演では、iOSやAndroid、Windows 10などクロスプラットフォーム対応のアプリケーションを一括で生成するツール「ManifoldJS」を発表しました。 マイクロソフト チーフエヴァンジェリストのスティーブ・グッゲンハイマー氏。「Windows対応だけではなく、クロスプラットフォーム対応のアプリケーションをどう作ればいいのかとよく聞かれる。2年前、われわれはゲーム向けにUnityを発表し、昨年はiOSとAndroid対応でXamarinの採用を発表した。今年はWebアプリケーションにフォーカスしよう」
フロントエンドエンジニアであり続けるために効率的に情報収集を行う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
またHTML5 Minutesに登壇してきました。今日はPCを自宅に忘れてiPhoneでブログを書いています。こんにちは先生です。 今日はHTML5 Minutesでお話した「フロントエンドエンジニアとして維持するために」という内容を整理してお届けします。本テーマはHTML5の話ではなく、その前の段階である“情報をいかに効率よく集めるか”というお話です。 はじめに フロントエンド界隈は非常に変化が激しくなっています。 HTML,CSS,JavaScriptはもちろんのこと、SassやLESSなどのプリプロセッサ、TypeScriptやCoffeeScriptなどのAltJS、GulpやGruntなど開発環境も多様化しました。JavaScriptだけ見ても、BackboneからEmber、Angular、Reactなどさまざまなライブラリやフレームワークが注目され、使われています。 そんな激
Jank Free: Let's Make the Web Silky Smooth!
What is Jank? Modern browsers try to refresh the content on screen in sync with a device's refresh rate. For most devices today, the screen will refresh 60 times a second, or 60Hz. If there is some motion on screen (such as scrolling, transitions, or animations) a browser should create 60 frames per second to match the refresh rate. Jank is any stuttering, juddering or just plain halting that user
Front-End Dev guidelines - tech.tmw.co.uk
Overview This document details the guidelines and standards adhered to by the Creative Technology department at TMW, and all web applications built should take these into consideration. It is an evolving document and should be reviewed as and when required to keep up with changes in technology and best practice. These guidelines have been compiled looking at various previously written guidelines -
Extensible Web の夜明けと開発者が得た可能性の話 - Block Rockin’ Codes
Web based on Standards Web は誰のものでもありません。 だれかプロダクトオーナーがいてその人が意思決定するとか、そういうのとは真逆の成り立ちをしています。 標準的な仕様を決めて、その仕様に則って Web の世界は成り立っている。 政府が作るサイトも、 Twitter も、学生が作ったブログも、全部同じルールで作られている。だから繋がる。 これって結構凄いことだと、自分は思っています。 Standarization このルールの決め方にもルールがあって、ちょっと敷居は高いかもしれないけど、誰でも自由に参加して、自由に意見を述べることができる場があります。 標準化団体ってやつですね。 なんか一部の人たちが勝手にやっているように思えるかもしれないけど、それは選挙に行かない人の理論と同じです。 あなたが仕様について意見を持ってて、それが妥当であるならば、その発言は仕様を根
HTML6 - The Spec That Brings Us a Product Customizer App
UPDATE: I copy pasted this years ago, from a blog I don't write at anymore. I first published this nearly three years ago. The site is getting a ton of traffic out of nowhere. I haven't updated this aside from minor typos since then. Seriously, it was just some random thing I did for fun one day. It's in no way a real spec and should not be taken seriously. I've since moved onto starting my own co
WebKit2 と愉快な仲間たち - steps to phantasien
ある ニュース記事を同僚に教わった。 この記事によるとタッチデバイスの会社は WebKit2 に対応しているのに検索の会社は旧バージョンにとどまっており、HTML5 に課題は多いのだそうな。 そりゃ課題は常に山積みだよね…と思っていたら記事は誤解だと別の同僚が説明を書いている。 リンク先の記事はさておき、世間の関心をいまいち集められていない気がする WebKit2 についてざっと説明をしてみたいとおもう。 この記事を読み終われば WebKit2 と Chromium WebKit, Webkit1 の違いを知ったかぶれるようになる予定。 WebKit2 は 2010 年の 4 月にアナウンスされた WebKit の新しい API レイヤで、Mac 版 Safari などが使っている。 大きな特徴はレンダリングエンジンを別プロセスで動かせること。 Chromium でやっているのと同じような
Webフロントエンド表示速度、最速化手法まとめ - Qiita
やりすぎても無駄になることがあるので、必要十分なバランスを見極めて実施する。主に社内のプログラマ向けのまとめ資料。他にもあれば追記していく予定。 ページの状態を調べる まず対象のページが、どういった状態なのかを調べる。 Google PageSpeed Insights これを100点満点にする必要はないが、赤くなっている項目に関しては、なるべく対応したほうが良い。モバイルサイトにも対応しているので便利。 https://developers.google.com/speed/pagespeed/insights/?hl=ja pingdom 実際にページにアクセスしてスピードを計測できる。海外サーバなので、けっこう遅い…。最適化前と最適化後で比較するのに使うといい。 http://tools.pingdom.com/fpt/ Chromeデベロッパーツール コンテンツの読み込み順序／速度
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[PDF] Electronの倒し方
WebRTC入門+最新動向
GitHub - sgentle/caniuse-cmd: Caniuse command line tool
完全負け組なモバイルWebが、これから復活する(多分)
ウェブパフォーマンスの基礎とこれから
What : Web Hypertext Application Technology Working Group