ReFlowの原因とマークアップの最適化 « NAVER Engineers' Blog
自己紹介 ネイバージャパンのUIT(User Interface Technology)チームの裵完理(ベワニ)です。 概要 CSSやJavaScriptを使って複雑なデザインや動的なページを実装しているサービスが増えてきていますが、速度低下などの問題が発生しやすくなっています。これを100%直すことは難しいですが、改善するにはブラウザレンダリングプロセスを理解する必要がありますので、理解した上で改善方法を探してみましょう。 ブラウザレンダリングプロセスの理解 ブラウザの基本構造 User Interface – アドレスバー、戻る・進むボタン、ブックマークメニューなど、メインウィンドウに表示(document)されるページ以外の部分 Browser Engine – UIとレンダリングエンジン間のアクションを制御するもの Rendering Engine – リクエストしたコンテンツを表
Page Layers - Website screenshots for macOS
Page Layers is a website screenshot app for macOS. It converts web pages to Photoshop files with separate layers for all page elements. It enables you to open web pages in Photoshop and saves you lots of time when re-designing or improving existing web page designs. Just open any page in the embedded browser and save the page as PSD with layers or as plain PNG image. In the HTML to PSD conversion
Sassの存在意義への補足
Sassの存在意義の話があんまりうまく伝わってない感じなので、3の別々に書けてSassで関連付けられるということについて少しだけ書く。抽象的な概念の話なので具体的な説明というのもなかなか難しいけど、CSSフレームワークを使う時にどうなるかみたいなことを取り上げる。 Twitter Bootstrapを始めCSSフレームワークはいくつもあるが、それらはだいたいユニークなクラス名を持っている。例えばTwitter Bootstrapで2カラムレイアウトを作る場合は以下のようなHTMLにしなくてはならない。 <div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div> div要素はsectionやaside要素などを使っても良いが、クラス名はこうでなくてはならない。Sass (やLESS)があ
引用元のマークアップ
引用で引用元について明らかにすることは大切です。blockquote要素にはそのための属性としてciteが用意されていますが、ほとんど飾りのようなもので、効果的にその情報を表示することは出来ません。じゃどうすれば良いのかというような話です。 figcaption要素で引用元の情報をマークアップし、blockquote要素と共にfigure要素で括るというのがどうやら王道なようです。 <figure> <blockquote cite="http://example.com/"> <p>Lorem ipsum dolor sit amet.</p> </blockquote> <figcaption> <p><cite><a href="http://example.com/">Example Website</a></cite></p> </figcaption> </figure> bl
はてなブログのデザインの裏側 - Uedayworks::HatenaBlog
このエントリーはHatena::Staff Advent Calendar 2011のために書かれたものです はじめまして。最近は映画けいおんが生き甲斐のuedayです。 11月8日にクローズドベータリリースした「はてなブログ」のデザイン全般を担当しました。裏側というほどの話ができるか微妙ですが書いてみます。 開発チーム 開発チームは、エンジニアid:cho45／デザイナーid:ueday／ディレクションid:onishiです。デザインはクオリティチェックをid:tikedaに依頼して、適宜フィードバックを貰いながら進めていきました。このほかに制作スタッフが数名います。プロジェクトが立ち上がったのが8月1日だったので、開発期間は約3ヶ月です。アルファ版完成が異常に速く、開発2日目か3日目で記事投稿ができるようになり、5日目でアルファ版を社内リリース。choさんほんとすごいなって思いました
CSS3で表現力が高くなったからと言って、span等でボタンを作るのはやめて下さい。いえ、やめなさい。もう少し真っ当なHTMLを作ることを心がけましょう。むしろ今すぐwebの仕事辞めて腹を切って死ぬべきである!
もう禿げ上がるぐらいに同意。teramakoさんはアクセサビリティの観点で言及した訳ではないみたいだけど、アクセサビリティの観点からも、spanやdivでボタン作るwebデベロッパは死ぬべきだと思う。恐ろしい事に、Googleなんかもこの過ちを犯している。 これが、Vimperatorのような『利用者が敢えてポインティングデバイス以外での操作を好んでいる』という場合だけ問題になるのならば兎も角、例えば音声ブラウザを利用せざるを得ない、視力に問題を抱える閲覧者にも影響が有るというのはどうなのか。そんな奴らは知ったこっちゃないって？ふーん? せめて、WAI-ARIAのrole属性を付けるとかして欲しい。role="button"とか。それならば、ある程度問題は小さく出来る筈だ。 取り敢えずteramakoさん始めVimperator使いな人達は、.vimperatorrcで'hinttags'
mf2md
本気のメモです。メモなのでタイトルをわかりづらくしておきました。SEO対策ですね。 hAtom From: <article class="hentry"> <h2 class="entry-title"> <a rel="bookmark" href="/blog/webdesign/document-structure.html"> 文書構造を見なおした(ている) </a> </h2> <footer> <p> Posted on <time datetime="2011-11-09T19:31:06+09:00" pubdate class="published"> 09 Nov, 2011 </time> in <a rel="tag" href="/blog/webdesign/"> Web Design </a> </p> </footer> <div class="entry
文書構造を見なおした(ている)
HTML5化した後、アウトラインがおかしかったところを修正したり、WAI-ARIAを導入したり、少し調整してたりしました。まだまだ行き届いていない所があるし、本当にこれでいいのとか色々座りが悪い感じですね。 body | +--header role="banner" | | | +--h1 | | | +--nav | +--div id="main" role="main" | | | +--section or article or nav | +--footer role="contentinfo" | +--address | +--section おおよそのページで共通の部分は以上のような形になっています。div#mainがちょっとアレな気がしますね。本当はページによってarticle要素にrole="main"持たせたりとか色々ちゃんとしたいところなんですが、Blosxomの
h1が見出しかどうとか気にするなら、HTMLの設計ミスを認識すべき - <s>gnarl,</s>技術メモ”’<marquee><textarea>￥
あれらの見出しタグは他の要素と違ってまったく構造化ということを考慮していない ―― これはおそらく歴史的経緯によるものだと思うが（次期仕様でsectionタグがどうのこうのって話があったような）。h*タグはfontタグやなんかと同様webの暗黒時代からの生き残りで、他の構造化されたタグと比べて明らかに異質だ。 だから見出し関係については、どうマークアップしても気持ち悪くなることを大前提として議論すべき。見出しに関しては、すっきりした正解など、ない。
どうでもいい雑記779 : 雑記帳 : rusica.net
Category: Web関係 はてなブックマーク – Azuna’s Favorite or BookMark Webページを制作する工程がRusicaさんの理想と自分のでは異なっていると感じました。 まーその辺はよくわからないけど、勘違いされてると私としては微妙なので一往補足。 私が前述の記事で書いたのは、あくまでも初心者が「ホームページ作りたい！」ってなったときに、取っつきやすいだろうWebページ制作講座としての理想、ね。Webページを制作する工程の理想については書いてない。というか、最初からそういうものを初心者に求めるのは酷だろう、と思っているので。 とりあえず体裁の整ったValidなHTMLとCSSを書けるようになってから、やる気のある人だけ難しいこと考えてくれればいいかなーとか思っている。 私個人としてはまず「表現したい内容ありき」。文書、ではなく内容ね。Webサイト作って何し
em要素とstrong要素 - 徒書
HTMLにはemとstrongという要素型があり、それぞれ強調《emphasis》とより強い強調《stronger emphasis》を示すものとされています。これらの要素については、強調の強弱を示すためなら要素を多重に入れ子にすればよい（例えば、<strong><strong>強調</strong></strong> のように）との考えから、強調を表す要素は2つも必要無いという意見があります。 野望の王国の強調に一言物申す < Blog < Black Box XHTML 2.0草案（2003年5月6日版）の9.11. The strong elementには、"Leave in, deprecate or remove? No consensus."という記述がある。尚、2004年7月22日版草案の9.11. The strong elementの項には記載されていない。 しかし、自分
Zen Coding: A Speedy Way To Write HTML/CSS Code — Smashing Magazine
In this post we present a new speedy way of writing HTML code using CSS-like selector syntax — a handy set of tools for high-speed HTML and CSS coding. It was developed by our author Sergey Chikuyonok and released for Smashing Magazine and its readers. In this post we present a new speedy way of writing HTML code using CSS-like selector syntax — a handy set of tools for high-speed HTML and CSS cod
Ron Garret「HTMLはオブジェクトコード」 - 以下斜め読んだ内容
Rondam Ramblingsの2009年8月のエントリ Rondam Ramblings: HTML is object code 2009年2月にテーブルレイアウト擁護論を公開した元GoogleのRon Garretによる、htmlのハンドコーディング禁止論 CSSレイアウトのもつ利点は、テーブルレイアウトでも実装可能 htmlのハンドコーディングはウェブの害悪の根源の１つ。 ウェブ標準な人からは出そうに無い感じの視点が出てて面白い。 いきなりCのソースコードとコンパイルされたコードを並べだしたので、斜め読み無理かもと思ったが、ソースコード／オブジェクトコードの理解が自分のように専門的でなくても斜め読みできた。 通念に反するためコメント欄が盛り上がり過ぎ。辿れない。 CSSアンチの議論の部分は自分は消化不良 以下斜め読んだ内容。 このエントリは・・・・ アンチCSSレイアウト＆tab
HTML5では、あの問題は解決するのでしょうか - カナかな団首領の自転車置き場ダイアリー
ふと思い出したわけですよ。 いや、p 要素の中に、ブロックレベルは配置出来ない問題なんですが。 問題文 2 ： しかし、私は上記に加えて、 ・水筒 ・タオル ・ちり紙 ・ビニールシート ・ビニール袋 ・雨具 も、必需品ではないかと思うのだ。 上記をどうマーク付けするか問題。 解答例 6 ： <p>しかし、私は上記に加えて、</p> <ul> <li>水筒</li> <li>タオル</li> <li>ちり紙</li> <li>ビニールシート</li> <li>ビニール袋</li> <li>雨具</li> </ul> <p>も、必需品ではないかと思うのだ。</p> これでいいや、ってことになったんでしょうか？（僕は、いいんだけど） 参照：マークアップの仕方、P 要素とか - カナかな団の躁鬱
セクションに就いて - Weblog
05/26 10:57 有料オプション利用の方へのカラースタープレゼントを開始しました 本日（5月26日）より、新しくはてなアンテナの有料オプション（月額120ポイント）を開始された方に、はてなのサービス内で広くお使いいただけるよう、 グリーンスターを3 個プレゼント 03/03 18:14 はてなダイアリーのヘッダの文言変更について ゲストの方がアクセスした際に表示される、はてなダイアリーのヘッダにある「ユーザー登録」という表記を、よりわかりやすい「無料ブログ開設」に変更し、ヘルプへのリンクを外すよ 02/18 17:56 有料オプションの有効期限が1日ずつ早くなる不具合を修正しました はてなアンテナの有料オプション更新時に、一部ユーザー様を対象に有効期限が1日ずつ早くなる不具合が発生しており、修正いたしました。 有料オプションの更新処理を行っているバック 02/03 18:15 2/1
自分的HTMLテンプレートの組み方 | Takazudo Clipping*
自分的HTMLテンプレートの組み方と例です。 まぁ、やるたびにちょこちょこ変えてるんですけど、2009年7月版ってことでざっくり説明。 空テンプレ モジュール一覧 サンプル ダウンロード用 エリアとモジュール 繰り返し使用される要素の塊をモジュールと呼び、エリアの中にこれを並べてページを作成するのを基本とする。 モジュールの開始要素には、「mod_moduleName」のようにclass（もしくはid）をつける。 モジュールやエリアのclass/idを起点に全てのスタイルを指定する。p、h1～h6、blockquote、table等、要素自体に直にスタイルを指定してはいけない。（グローバル変数を使っているような状態になってしまうため、以降考慮するのが面倒。リセット程度に済ます。） モジュールにスタイルを指定する際には、mod_moduleNameを起点としてスタイルを指定し、カプセル化を
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML is object code
https://blog.8-p.info/2009/06/html