常時接続が一般化し、ブラウザ上のオフライン動作の需要は減少 （逆にネイティブアプリケーションすらオンライン動作を要求）
オフラインWeb開発 #html5j
常時接続が一般化し、ブラウザ上のオフライン動作の需要は減少 （逆にネイティブアプリケーションすらオンライン動作を要求）
html/css 参考サイト総まとめ
作成：2013/10/15 更新：2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ １．勉強になるテクニック／サンプルまとめ 基本知識 ２．セレクタ ３．メディア クエリ ４．コーディング規約 ５．フォント ６．CSSスプライト ７．アニメーション ８．正確なHTML使用方法 ９．CSSハック １０．書き方／読み方 定番まとめ
よくある3つのデザインから考える、マークアップの最適解
Web制作においてHTMLのマークアップには絶対の正解というものがありません。ページを制作しているとき、特にセマンティクスを意識したとき「このマークアップで正しいのだろうか」と悩むことがあると思います。 そんなマークアップについて考えるイベント「MarkupCafe」がhtml5jマークアップ部の主催のもと開催されました。「MarkupCafe」では参加者同士がチームに分かれ、お題となるデザインに対して議論し、自分たちならこうマークアップするといった考えを発表し合いました。 本記事では「MarkupCafe」で出された”フッター”、”パンくずリスト”、”求人情報”の3つのお題をもとに、Web制作におけるマークアップの捉え方、誤った使い方をしがちな要素などについて考え、マークアップの最適解を探ります。 ※html5jは、HTML5などのWebプラットフォーム技術を使った「ものづくり」に関わる
モバイル対応Webアプリケーションのキャッシュ戦略
近年、モバイルブラウザ上でアプリケーションを作るにあたり、JavaScriptでも不安定な回線上で動作する設計が求められるようになってきました。 ここでは、「オフラインファースト」をはじめとする、モバイルなどの回線が不安定な状況を想定したWebアプリケーション設計に関して、キャッシュ方法やよく使われるAPIなどを紹介したいと思います。 「オフラインファースト」とは2012年ごろから提唱されていた、「回線がオフラインになることを前提にアプリケーションの設計を行う思想」のことで、オフライン前提に設計することにより回線状況によらないサービス提供や、効率的な通信をベースにした高速な動作を目指すものです。 それではここからはキャッシュ方法とそれぞれ向いているコンテンツの紹介を行います。 読み込みデータのキャッシュ ApplicationCacheやlocalStorage、オンメモリキャッシュなどを
JavaScriptでフォーカスのあたっている要素を取得する「document.activeElement」
JavaScriptでフォーカスのあたっている要素を取得できるHTML5の新機能「document.activeElement」について紹介します。 １．document.activeElementとは 「document.activeElement」からの引用です。 document.activeElementは冒頭に記したとおり、フォーカスのあたっている要素を取得するためのdocumentプロパティで、HTML5で策定された新機能みたいです。 HTML5 - 6.5.3 Document-level focus APIsより The activeElement attribute on DocumentHTML objects must return the element in the document that is focused. If no element in the Do
意外に知らないお金借りるならとお金借りる審査通らない理由の秘密を、１つだけ教えます。
わかった！お金借りるならでお金借りる審査通らない理由… わけもなく嫌な気持ちになってしまう人が存在します。 出来が寄ってきたらムカムカして、お金借りる審査通らない理由なので、マトモに対応すらできず、お金借りる審査通らない理由に冷たい対応をしてしまいます。お金借りるならに冷静になり、悔やむものの、以降だったら、嫌だということで頭がいっぱいになってしまいます。 少額融資の多様さからいえば、好きになれない人がいるのも当たり前なのでしょう。 お金借りるならを好きになるのは無理難題といっても過言ではなく、急変をなくしてしまえないので、困っています。 お金借りる審査通らない理由に考えるのであれば、客観的にはそんなに悪い人でもありませんから、お金借りる審査通らない理由に限り、私はおかしいと思います。たまたまテレビ中継などを目にすると、入出金可能への参加を目指す人があまりにも多くてちょっと呆れてしまいそう
HTML5が引き寄せる近未来を、9つの「○○ウェブ」で理解する。（前編）
その広がりと深まりゆえに、現在のウェブは非常に分かりづらいものになっています。そこでこの記事では9つの「○○ウェブ」という切り口から、「今のウェブ技術では何ができるのか」についてにフォーカスして語ってみたいと思います。適宜デモへのリンクを挟みながら、ウェブのポテンシャルを紹介することに注力します。 ここ数年で急速に進化を遂げたHTML5は、ウェブのあり方を大きく変えつつあります。 とはいえ今はまだ、「ウェブが大きく変わった」と言える段階ではないように思います。筆者はちょくちょく、色々な所でHTML5の概要についての講演をさせていただいていますが、そうした経験から言うと、HTML5のポテンシャルはまだ多くの人に知られておらず、十分にその力が活用されていないように思えます。 その理由は、「HTML5の全体像が見えにくい」ことにあるのではないか、と考えています。 HTML5をはじめとしたウェブ標
HTML5Experts.jp
進化するWeb ～Progressive Web Appsの実装と応用～(de:code2018より) 物江 修 2018年5月に開催された日本マイクロソフト主催のイベントde:code 2018で「進化するWeb ～Progressive Web Appsの実装と応用～」というセッションを担当しました。 イベントに参加できなかった...
wri.peで学ぶ、イマドキのWebアプリの作りかた（前編）
エキスパートが手がけたプロダクトを題材に技術的な解説を行っていくシリーズ連載、今回は wri.peです。 難しい機能の実装や、先進的なAPIの利用を通じて、執筆者が得たノウハウを余すところなく紹介していきます。 HTML5を活用したメモ帳アプリ [wri.pe] 最近、仕事で作っているミイルが忙しかったり、趣味で作っているMobiRubyがなかなか進まなかったりして、個人でWebサービス的なモノを作っていない事が自分としてちょっと気になっていました。 そこで息抜きとして、ゴールデンウイークに集中してWebサービスを一つ作ろう！と思い立ち、wri.peというWebサービスの開発に着手しました。 wri.peは自分が使いたいと思えるメモ帳を作ったので、下記の様な特徴を持っています。 Markdownフォーマットをサポート Gmailの様なアーカイブ機能 全文検索 カレンダーへのマッピング iP
フロントエンドとかPCとかスマホとか
もうスノーシーズンはほぼ終わりだけど、スノーシューの改造をした話 ２５年前？に購入した MSR DENALI Clasics。最近はスプリットボードばかりなのでほとんど活躍しない。 これヒールリフターが付いてなかったってのもある そこでヒールリフターつけちゃお！ 買ったのは、この２つ G3 クライミングヒール8mmベース https://www.niceedge.biz/products/detail.php?product_id=700 G3 タルガクライミングワイアー ロング https://www.niceedge.biz/products/detail.php?product_id=165 あと固定用のビス これステンレスのが欲しかったけど近所のホームセンターにはちょうどいいサイズがなかったのでこれで 穴あけちゃう 5mmの穴２ヶ所 ビスのサイズに合わせて5mm ビスで止める 取り
WebAudioAPIを使ってシンセサイザーを作るチュートリアル:phpspot開発日誌
Web Audio Stylophone | Codrops WebAudioAPIを使ってシンセサイザーを作るチュートリアル。 次のようにマウスやキーボードで操作できるWEBベースのシンセサイザーが作れます。 なかなか面白いデモなので、こういうことができるのか、という確認の意味で見ておいてもよさそうです。 関連エントリ HTML5を使った超クールなフリーのWordPressテーマ集35 WebCamで撮影をHTML5で実現するデモ 高機能なHTML5お絵かきツールを実装できるjQueryプラグイン「jquery.deviantartmuro」 HTML5とCanvasでアプリを作れるフレームワーク「iio Engine」 30以上のリッチコンポーネントが詰まったHTML5のUIライブラリ「Zebra」 フリーでHTML5ベースのリッチな管理画面テンプレート
WordPressのテーマファイルをHTML5にするチュートリアル
このサイトはまだHTML5にしてないので、WordPressのテーマファイルをXHTMLからHTML5にするステップごとに解説されたチュートリアルを紹介します。 Convert Your WordPress Theme to HTML5 下記は各ポイントを意訳したものです。 チュートリアルのゴール HTML5のベーシックなレイアウト Step 1: header.phpをHTML5化 Step 2: index.phpをHTML5化 Step 3: sidebar.phpをHTML5化 Step 4: footer.phpをHTML5化 Step 5: single.phpをHTML5化 Step 6: style.cssをHTML5化 チュートリアルのゴール このチュートリアルは、XHTMLでつくられたWordPressのテーマファイルをHTML5にするものです。テーマファイルはそれぞれ
HTML5機能を色々使ったスマホ向けWebアプリを作ってみた話：前編 - webとかmacとかやってみようか R
昨日、ドコモがやっているWebアプリコンテストのノミネート作品が一般公開されました。 私も、デザイナさんと協同して作品を一つ出しました！面白かったら下記ページの いいねをお願いします！ かきまる スマートフォンを使いながらも、アナログな感触をもっと楽しんで欲しい。そういう想いで考えられた、デジタルとアナログを繋ぐお絵かきWebアプリです。 . 子供達が家の中でスマホだけをいじって遊ぶのでは無く、実際のリアルな紙と色鉛筆で本物の感触で遊んで欲しい。そのきっかけをスマホアプリで与えられないか？というモチベーションで作られました。そのあたりのコンセプトはデザイナさんのアイディア。私は主にその実装担当です。 そういう狙いはあるのですが、簡単に言ってしまえば紙芝居形式で動物の絵を表示して、それをお手本に絵を描く、という至ってシンプルなアプリです。 何も考えずに作れば、複数のWebページを遷移する単な
[HTML5 入門]本文における画像の設置の簡単なガイドライン
img要素の解説は長い 仕様書におけるimg要素の解説は長いです。それはもう、読もうとする人を寄せ付けないレベルです。それでは一向に理解が進まないので、私なりに実際に画像を文書内に配置する場合の解説を書いてみました。あとHTML5で追加されたfigureタグの用法もわからないという人が多いですよね。今回は本文中で用いられる画像に限って解説します。 文章の代わりになる画像の設置 例えばBBQに行ったとして、その時の作文としてこういう一文を書いたとします。 BBQに行ってきました！場所は多摩川河川敷。この日はバーベキュー日和の快晴で、日差しも夏っぽくていい感じ。この日は早起きして色々準備してきました！ こうした文章の中に本文の内容として空がフレームインした画像を挿入したい場合、空の写真は本文の一部と置き換えることができます。 <p>BBQに行ってきました！場所は多摩川河川敷。<br> <img
![[HTML5 入門]本文における画像の設置の簡単なガイドライン](https://cdn-ak-scissors.b.st-hatena.com/image/square/913d9625c96461318e055dbb38b3d26c92683092/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F10%2Fintroduction-to-html5-150x150.png)
[HTML5 入門]HTML5要素に指定できる属性の分類、書き方の違いについて
http://roadstohtml5.com/html5karuta/ HTMLの各要素には属性というものがあります。これもまあまあたくさんあるので全部解説するわけではないんですけど、まずこの記事ではどういう種類のものがあるのかを確認してみましょう。 …といいつつこれは私の備忘録でもあるんですがｗ 興味ある人はお付き合いください★ HTMLの属性とは HTMLにおける属性(Attribute)とは、HTMLで各要素のタグに指定する設定の事です。例えばハイパーリンクであるa要素のaタグにはhref属性を指定します。href属性の属性値(value)にはURL等が入りますね。 要素自体のタグ名の後に続く一つ一つが属性です。そしてその属性には、予め指定できる属性値が一つに決まっているもの、いくつかに決まっているもの、ルールが決まっているもの、なんでも指定できるものがあります。 グローバル属性(
HTML5・CSS3時代のweb制作コンセプト
HTML5・CSS3対応のブラウザが増えてきて、制作のコンセプトも変化してきました。 プログレッシブエンハンスメントなどユーザーのブラウザ環境に焦点を置いた制作コンセプトをまとめました。 足りない知識を埋めながら書いたので一部認識が間違ってる箇所があるかも知れませんが、その場合はご指摘頂けると助かります。 Progressive Enhancement Graceful Degradation Polyfill Progressive Enhancement(プログレッシブエンハンスメント) どのブラウザでも基本的な水準のユーザーエクスペリエンスを提供をし、 新しく高水準のブラウザにはCSS3やjsなどでよりリッチなデザインや機能を提供するという考えです。 またProgressive Enhancementには下記の原則があります。 基本的な内容は、すべてのブラウザでアクセス可能である必要
TechCrunch | Startup and Technology News
When Alex Ewing was a kid growing up in Purcell, Oklahoma, he knew how close he was to home based on which billboards he could see out the car window.…
TechCrunch | Startup and Technology News
Live Nation says its Ticketmaster subsidiary was hacked. A hacker claims to be selling 560 million customer records. An autonomous pod. A solid-state battery-powered sports car. An electric pickup truck. A convertible grand tourer EV with up to 600 miles of range. A “fully connected mobility device” for young urban innovators to be built by Foxconn and priced under $30,000. The next Popemobile. Ov
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザインをこれから学ぼうと思っている人が、これだけは押さえておきたい「HTML5」のテキスト5選 | U-NOTE【ユーノート】
webamb.com
