新着記事『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
失われたウェブ制作のベスト・プラクティス
ベスト・プラクティスは多くの人には固定的なものだ。しかし本来は流動的なもので、革新者によって大きな変化が起きる。ウェブ制作におけるベスト・プラクティスも変化しており、その過程でいくつも失われていった。 ウェブ制作においては、技術革新の多い世界であることと、他の世界の変革に対応しなければならないことから、よりいっそう変化が速いとも言えるだろう。だからといってベスト・プラクティスが意識するに留めておけば良いという程度のものというわけではない。例えば<!DOCTYPE html>について考えてみよう。 <!DOCTYPE html> これはHTML5が産声を上げた時期に先駆者である人々が編み出した魔法の言葉だ。これによりほとんどすべてのブラウザーでウェブ標準に準拠した形でHTMLが表示されることが保証される。つまり個々のブラウザーで大幅に違う挙動になることはなくなり、予期せぬ問題の発生を大幅に低
複数のPNGからICOへ変換
favicon.icoの作成を自動化しようとして、いくつかCLIの変換ツールを物色していた。最終的にImageMagickのconvertに行き着いたので、あまり得られるところはなかった……。 png2ico $ png2ico favicon.ico logo-16.png logo-32.png logo-48.png logo-256.png 特に何も考えずに使える良いツールだった。しかし256x256以上、つまり256x256のアイコンは含めることができない制限がある。16x16以外に32x32だけでなく、256x256を含めてやりたい現状だとちょっと使いづらい気がする。 ToICO $ toico -o favicon.ico logo-16.png logo-32.png logo-48.png logo-256.png これもあまり考えずに使えた。しかし生成されるICOファイ
Web アクセシビリティを身近に感じてもらうためのごく簡単なお話
この記事は、Web Accessibility Advent Calendar 2014、1日目の記事です。去年は WAI-ARIA の導入方法について、ごく初歩的な記事を書いたんですが、今年は初っぱな、1日目の記事と言うことで、ごくごく簡単な記事でハードルを下げにいってみようかと思います （余計なお世話）。 さて、「Web Accessibility （ウェブアクセシビリティ）」というと、高齢者や障害者向けなど、限られた一部 ※1 の人達に向けて、特別な対策を取ることだと思っている方もいると思いますし、これは Web サイト制作を仕事にしている人の中にも同じような考えの人、いるんじゃないでしょうか。 確かに、WCAG （Web Content Accessibility Guidelines） だの、JIS X 8341-3 だの...... あるいは、WAI-ARIA だの、支援技術が
HTML5 Differences from HTML4（HTML4からのHTML5の差分）
この文書の位置付け この節は、公開時点におけるこの文書のステータスについて説明する。他の文書がこの文書に取って代わるかもしれない。現在のW3C発行物のリストとテクニカルレポートの最新版は、W3C technical reports index at http://www.w3.org/TR/で見つけることができる。 これは、HTMLアクティビティの一部であるHTMLワーキンググループによって製作された2014年12月9日のWorking Group Noteである。HTMLワーキンググループは、Working Group Noteとしてこの文書を発行することを意図する。コメントのための適切なフォーラムは、W3C Bugzillaである。（public-html-comments@w3.org、公開アーカイブメーリングリストは、もはやコメントを追跡するために使用されない。） W3C Work
シニアが使いやすいウェブサイトの基本ルール
2014年11月24日 著 『シニアが使いやすいウェブサイトの基本ルール』という本を読了。本書はChapter1の基本編とChapter2の実例編からなり、ルール自体は前者に、その実例が後者にまとめられています。気になったのはそのバランスで、総ページのうちだいたいChapter1が1/4、残りの3/4をChapter2（ページ面積の多くが実際のサイトの画面キャプチャに割かれている）が占めているという。そういう意味では内容的に濃くはないのだけど、それは店頭で実際に手に取って分かったうえで購入。 上記の構成もさることながら気になったのが、基本編と実例編のあいだにある齟齬。たとえば、基本編のp.16でプルダウンメニューの使用は要注意、またp.17ではシニアには「パンくずリスト」の意味は理解されない傾向があると言われますとしていながら、その両方をp.66〜67のJTBの事例では長所のように取り上げ
<script async>でJavaScriptの非同期読み込みを - fragmentary
JavaScriptファイルをスクリプトから非同期で読み込むパターンは古い、という話を目にしたのはもう半年前のこと。 言ったのはIlya Grigorik。月末のGoogle Japanでのイベント、月初のHTTP2ConferenceにくるWebパフォーマンス界のすごいひとですよ。 Script-injected "async scripts" considered harmful - igvita.com 件のパターンは、スクリプトで動的に script を生成して、そこに読み込みたいJavaScriptファイルをぶっこんで読み込むというもの。 <script> var script = document.createElement('script'); script.src = "//somehost.com/awesome-widget.js"; document.getEleme
<picture>まわり雑感 その1 - fragmentary
Chrome 38が出て<picture>が有効になったので、いくつか記事を訳した。 レスポンシブイメージのネイティブサポート - HTML5 Rocks Dev.Opera — ネイティブサポートされたレスポンシブ・イメージ Dev.Opera — レスポンシブ・イメージ：ユースケースと入門用のコードサンプル HTML5 Rocksのは<picture>の簡単な使い方をざっと紹介。Dev.Operaのネイティブうんぬんは<picture>と<img srcset>, <img sizes>を細かく説明。もひとつのDev.Operaのサンプルのやつはユースケースごとに組み合わせをいろいろ書いたサンプル。それぞれ少しずつ違っている。おすすめは2つ目。ちょっと長いけど、書いているのがBlink, WebKitで<picture>とかを実装しているYoavなので。 以下いろいろ。 だいたい<im
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
新着記事
新着記事
新着記事
GitHub - hail2u/html-best-practices: For writing maintainable and scalable HTML documents