特集

普通のHTMLの書き方

保守しやすく、規模に依存しないHTML文書のために

民主的なデザイン

インターネットの普及に伴い、ユーザーのフィードバックを得る敷居は格段に低くなりました。しかし、そのことはあまり良くない結果をもたらしたと言えるでしょう。

“マークアップ”するということ ~ HTML5勧告に寄せて ~

HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。

ウェブ・タイポグラフィーのベスト・プラクティス

インターネットを見渡してみると、如何にタイポグラフィーがウェブ・デザインにおいて絶対的な支配力を持っているかに気付くことでしょう。とにかくウェブ・デザインの95%はタイポグラフィーだというわけです。このようなことを考える時は、様々なことを考慮しなくてはいけません。インターネットとはコンテンツであり、コンテンツとは文字そして文章です。すなわちタイポグラフィーを意味するわけです。

初心者のことを考えよう

デザイナーであるところの我々は、自身のプロダクトと距離を置かなすぎるという失敗を繰り返しています。あるプロダクトの開発に長い間従事していると、その複雑さやややこしさを深く理解するようになるため、我々は必ずその領域における熟練者となってしまうのです。そしてその熟練度に最適な形で操作性や手順を作ることにより、その知識をデザインに反映させるようになります。そういった操作性や手順は、意図せず我々開発者とユーザーが同じ程度プロダクトに精通していることを求めることになるのです。彼らもまた熟練者である、と。

Sassの基本

Sassを使えるようにするには、まずあなたのプロジェクトにSassをセットアップする必要があります。もし単にこの文書を読みに来ただけなら、そのまま読み進めてください。しかしながらまずSassをインストールすることを薦めます。インストール手順の解説を読めば、セットアップに必要なことは全て知ることができるでしょう。

安全でアクセシブルなアイコン・フォント

アイコン・フォントを利用する場合、あらゆるユーザーに適切にアイコンを提供しようとすると、かなり気をつける必要があります。そのフォントが読み込まれなかった時にどうなりますか?@font-faceがまだサポートされていないブラウザーでは?どうすれば安全に(bulletproofに)アイコン・フォントを利用できるかをこれから解説したいと思います。

CSSポストプロセッサー時代の到来

SassやLESSといったCSSプリプロセッサーは市民権を得たと言って良いと思う。しかしそれらCSSプリプロセッサーは開発という段階にのみ利をもたらすもので、今のところはそれ以上ではない。CSSを実際にユーザーに届けるまでには、開発だけではなくレビューとリリースという段階もある。レビューとリリースも確実性を持って効率的に行うためには、CSSポストプロセッサーと総称されるようなツール群が必要になるだろう。

ベンダー拡張プリフィックスヲ削減セヨ

とあるブラウザーで特定の機能を有効化する場合、現在、多くのウェブ開発者たちはCSSでベンダー拡張プリフィックスを使っていることでしょう。そのこと自体は良いのですが、サンプル・コードやプリフィックスを追加するツールで、時々サポートし過ぎでやたらめったら全てのプリフィックス(今まで実装されたことがないようなものまで)を追加しようとしているのを見かけます。最早ベンダー拡張プリフィックスが不要なCSSプロパティーは数多くあると思いますし、そうでないとしてもその数は減らすことができるでしょう。

ファビコン・カンニング・ペーパー

ファビコンのサイズや形式についての読むと頭が痛くなる偏執的なカンニング・ペーパーです。

あなたのサービスが落ちた時にユーザーになんと言うべきでしょうか?

つい最近、私達は多くの有名なサービスが完全に停止するという状況に遭遇しました。この出来事は、こういった何か不具合が起きた時にユーザーとどうコミュニケーションをとるかについて学ぶ良い機会なのではないかと思います。あの時InstagramとAirbnb、IFTTT、Vineがユーザーに送った通知は以下のようなものでした。

HTMLにおけるimg要素のalt属性

HTML Standardの4.8.1.1 Requirements for providing text to act as an alternative for imagesをざっと把握できるように日本語で箇条書きにしただけのものです。最終的には原文をしっかりと読むべきでしょう。

翻訳は簡単だよ、本当に

僕が最初に就職したのは大体7ヶ月前で、T3とPC Gamer Indonesiaで記者として働き始めた。主な仕事はT3 UK Magazineの記事の翻訳だったけど、たまに今やってるゲームのこととかイベントの取材などの自分の記事も書かせてもらっている。

スタイル・リポジトリ

10年以上HTMLやCSSを書いてきた中で他の人達の書いたHTMLやCSS、そしてJavaScriptから私が学んだものは少なくありません。というより全てをそれから学んだと言っても良いでしょう。Max CSSに書かれている意見には大いに賛成することができますし、ホワイトスペースとコメントを取り除いて圧縮されたCSSから得られるものがほとんどないことにも同意できます。

抄訳 RDFa Lite 1.1

この文書はRDFa Lite 1.1 (W3C Recommendation June 07 2012)の一部を日本語に訳したものです。正確な仕様についての情報を得たい方は、上記URLを参照してください。

Flexbox、おもしろいですよ?

Flexboxについて知っていますか?多分、名前は聞いたことがあるでしょう。もしかしたらチュートリアルくらいは読んだことがあるかもしれません。既に試していたりしますか?

Sassで行こう!

CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。

余白の美

私の最初のデザインの仕事はマンチェスターの小さな印刷系のデザイン事務所でのもので、そこでは様々なものをデザインしました。パッケージや出版、ノベルティ、そして…ダイレクトメール。中でも、大きく、太く、そしてゴミゴミさせることが常のダイレクトメールをデザインする時には、大学で習ったグラフィック・デザインの原則はわずかしか役に立ちませんでした。忘れもしませんが、クライアントの一人にこう言われたことがあります。「余白は無駄なスペースだ」と。

Sass - チュートリアル

Sass公式ウェブサイトに載っていたチュートリアルの日本語訳です。

Sass、そしてSassy CSS (SCSS)

CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass(主にSCSS)の良さを解説する。

結局どうすればいいの? - Dive Into HTML5

この章ではまったく何も間違っていないHTMLのページを改善します。その一部は短くなるでしょうし、一部は長くなるでしょう。そして、その全てがもっと意味のあるものに(セマンティックに)なるでしょう。素晴らしいですよね?

HTTPエラーページに意味を持たせよう

サイト製作者である我々はもっと訪問者に意味のあるエラーページを作成することができる。そうすればたとえエラーページであっても訪問者をサイトに留まらせ、彼らが探しているものに関連性のあるコンテンツを提供できるかもしれない。この記事ではどうやってそのようなエラーページを作成するかを説明する。

Git Cheat Sheets JP

Gitを使い始めた人のためのカンニング・ペーパー。

Version Control for Designers

このドキュメントは Version Control for Designers の日本語訳であり、元のドキュメントと同じくソースコード管理に予備知識がまったくない人を想定している

ソート機能付き ポケモン一覧表

ポケットモンスター ダイヤモンド・パールのぜんこくずかんに基づいています

RSS 2.0 Notes

この文書はRSS 2.0 Specificationを元に、RSS 2.0を解説したものです。正確な仕様についての情報を得たい方は、上記URLを参照してください。

CSS 2 browser support information

各ブラウザのCSS 2.0で定義されているプロパティなどのサポート状況の表です。

HTTP status message list

サーバーから返されるHTTPステータス番号のリストです。

Support for JavaScript and JScript Objects in Opera

OperaはECMAScript第二版と第三版を完全にサポートしており、DOMレベル2も完全にサポートする予定です(独立したDOMに関する文書も将来出す予定です)。

216 Cross Platform Colors

いわゆるWebセーフカラーと呼ばれる色の表です。

Character entities table

HTML 4で定義されている文字実体参照と数値実体参照の一覧の表です。

CSS2 property table

CSS 2.0で定義されているプロパティーの一覧表です。

Draw lightning in Photoshop 7

Photoshop 7で稲妻を生成する。

Sketch photo by pencil in Photoshop 7

Photoshop 7で写真を鉛筆画風に加工する。

Complex @import rules

各ブラウザでサポート状況がマチマチな@importルールのサポート状況の表です。

RSSについて

RSSとはRich Site Summaryの頭文字をとって略された名称で、実体はXMLです。Resource Description Framework (RDF)に基づいたRSS 1.0では、RDF Site Summaryの頭文字をとったものとされています。また、RSS 0.9系の後継として、RSS 1.0とは別に開発されたRSS 2.0では、Really Simple Syndicationの頭文字をとったものとされています。

Atom 0.2 Spec日本語 HTML 版

この文書は、dive into markのAtom 0.2 snapshotにある、Informal 0.2 specを日本語に意訳し、HTML化したものです。本ページは上記URLとは何の関係もないことをご了承した上でお読みください。

OPML 1.0 Specificationの勝手な日本語訳

この文書はOPML 1.0 Specificationの勝手な日本語訳です。本文中の誤りはすべて勝手に日本語訳をしたKyo Nagashimaに責任がありそうです。かなり私的な解釈が混ざっている訳ですので、正確な情報を得たい方は原文を読んでください。