HTML/CSS Category Archive

HTML/CSS カテゴリの記事一覧。(1 / 17 ページ)

Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩

GruntGrunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが......

とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか?」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー (主に HTML や CSS を書くフロントエンドな人) さん向けに、初めて Grunt を使うならこれだけまずはやってみたら? っていう内容で書いてみようと思います。

なるべくコンパクトに書こうと思ったんですが、終わってみればかなり長い記事になってしまいました...... 覚悟してどうぞ。

Posted by:

新しい picture 要素の仕様が公開、レスポンシブ・イメージ最新動向

Responsive Images Community Group所謂、レスポンシブ・イメージ (Responsive images) のお話ですが、HTML5 extension (HTML5 拡張仕様) として策定されている picture 要素に関して、最新の仕様 (Editor's Draft) が年明け、1月 2日に公開されました。

ちょっと時間が経ってしまいました (10日以上、下書きのままで放置されていたのはナイショ) が紹介と、レスポンシブ・イメージ関連の最新動向を簡単にまとめてみます。

Posted by:

今年も Web 関連の良記事がそろう Advent Calendar 2013

Adventarアドベントカレンダー (Advent Calendar) ってのは、元々クリスマスまでの日数を数えるために使用されるカレンダーですが、ある話題だけで 25日間記事を書いていこうぜっていう Web 版アドベントカレンダーが、今年も Adventar で多数立ち上がり、多くの人が記事を書いています。

Posted by:

HTML5 で追加された属性の中からマイナーっぽいのを紹介してみる

HTML5この記事は、HTML5 Advent Calendar 2013、11日目の記事です。

去年の HTML5 Advent Calendar 2012 では、Microdata 関連の記事を書いたんですが、今年も登録してみたものの、見事にネタが無いのでどうしようかなと...... ということで、HTML5 から追加された属性 (要素じゃなく属性の方) の中から、まだあまり広く使われてなさそうな属性さんたちに日の目を見て頂くための紹介記事を書いてみようかと思います。

ちなみに、「あまり広く使われていなさそうな」 は完全に私の独断と偏見ですのでよろしくお願いします。

Posted by:

background-blend-mode プロパティで背景をブレンドしてみよう

CSSCSS Property Advent Calendar 2013、6日目の記事です。「CSS のプロパティに関することだったら何でも OK です」 とのことでしたが、広く使われているプロパティについて今さら書いても仕方ないし、多分他の人とかぶるしってことで、最近になってブラウザが対応したあまり一般的じゃないプロパティを選択してみました。

それが今回取り上げる、background-blend-mode プロパティです。

Posted by:

WAI-ARIA はじめの一歩。サンプルソースで学ぶ WAI-ARIA 導入方法

この記事は、Web Accessibility Advent Calendar 2013、4日目の記事です。ベタな内容なのでもしかすると他の方とかぶるかもしれませんが、気にせずいきます。

とはいっても、WAI-ARIA の仕様をすべて詳細に取り上げるのは大変なので、まずは WAI-ARIA を既存のマークアップに取り入れる際に、扱いやすい項目についてピックアップしつつ、それぞれのサンプルソースを挙げながら、紹介してみたいと思います。まだ WAI-ARIA をマークアップに取り入れたことがない方が、初めて使うきっかけになれば幸いです。

Posted by:

Google タグマネージャで Web ページに読み込む JavaScript を管理してみる

Google タグマネージャGoogle タグマネージャ (Google Tag Manager) をこの Blog 内の各ページで読み込んでいる JavaScript コードの管理に数ヶ月前から使い始めていますが、結構使いやすくて便利なのと、ページの表示速度的にもいい結果が出たので紹介してみます。

Posted by:

Google っぽいプリローダーを CSS だけで作る

Lea Verou 氏の Blog に、CSS のみで、Google の Web アプリケーションで使われているようなプリローダー (画面ロード中に表示されるインジケーター) を作るっていう記事がアップされていましたので紹介。

CSS だけで再現しているため、サイズの調整などにも柔軟に対応できます。

Posted by:

HTML 5.1 など W3C 仕様が複数更新、Microdata 仕様は WG Note へ

HTML510月29日付けで W3C の HTML 5.1 仕様が更新されました。

加えて、HTML Canvas 2D Context, Level 2、および HTML Microdata の仕様も 同日付けで更新されています。

また、ほぼ同時にですが、11月1日付けで WHATWG の HTML(5) 仕様も更新され、blockquote 要素のセクションで説明されたマークアップ例に大きく差が出たことから、改めて引用元の表記をどのようにするのが最適解なのかという話が出たりしています。

Posted by:

Firefox 25 が正式リリース、Web Audio API、iframe srcdoc 属性などに対応

FirefoxFirefox の最新版、Firefox 25 が正式リリースされ、自動更新も提供開始されました。

Web Audio API をサポートしたほか、iframe 要素の srcdoc 属性、CSS3 で追加された background-attachment プロパティの値 「local」 のサポートに加え、ECMAScript 6 関連の実装強化などが行われています。また、Android 版では、ゲストブラウジング機能が追加されました。

Posted by: