HTML/CSS Category Archive

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

CSS Flexible Box (Flexbox) を使ってみよう - 最新仕様対応版

CSS Flexible BoxCSS3 のモジュールとして策定されている CSS Flexible Box (CSS3 Flexbox) は、CSS によるレイアウトを実現するための仕組み。

レイアウトのための CSS プロパティは他にもありますが、CSS Flexible Box は特にスクリーンサイズや可変するウィンドウサイズなどに柔軟に対応した、その名の通りフレキシブルなレイアウトが可能です。

現在最新の仕様書は下記。2012年 9月 18日付けで勧告候補になっています。

Posted by:

Firefox OS Simulator 4.0 がリリース

FirefoxFirefox OS Simulator は Firefox 向けのアドオンですが、デスクトップ環境で実機を使わずに Firefox OS アプリ のテストやデバッグが可能になります。この Firefox OS Simulator の最新版である、4.0 がリリースされました。

なお、インストールには Firefox 19 以降が必須です。

Posted by:

Instagram で写真や動画の外部埋め込みが可能に

InstagramInstagram に投稿した写真や動画を外部の Web サイトなどに埋め込むことができるようになったと、公式 Blog で発表されていました。

YouTube、Twitter、Flickr などなどのように、自分や他の人が Instagram に投稿して公開している写真や動画を Web 版の Instagram ページから簡単に埋め込むためのソースコードが取得できます。

Posted by:

フラットデザインの次にくるトレンドを先取りした Bootstrap テーマ

グラデーションやドロップシャドウを使った立体的なデザイン (つまり凸) の次にフラット (平ら) デザイン(←今ココ)と来たら、次のトレンドは 「凹」 でしょ ということで Bootstrap と一緒に読み込むだけで簡単に凹んだデザインを再現できる Bootstrap テーマ、「Dent UI」 を公開しました。

Posted by:

HTML5 や CSS などのリファレンスサイト (未完成) を公開したよ

HTML5実はずいぶん昔に一回作ろうと思って途中で挫折した結果、しばらく放置状態だったんですけども、暇を見つけてはちょっとずつ進めていた Web 界隈の方々向けリファレンスサイトがとりあえず公開できそうな感じになったので晒してみますよ。

作ってるのは下記です。

ただし、なんとか形になってるのは HTML5 タグリファレンスの部分だけなんですけどね......

Posted by:

Firefox 22 が正式リリース CSS Flexible Box の有効化、data、time 要素のサポートなど

Firefox6月 25日、日本だと同日深夜ですが、Firefox の最新版、Firefox 22 が正式リリースされました。さっき自動更新の方もきたので紹介。

仕様変更で色々あった CSS Flexible Box は、Firefox 18 からデフォルト無効なものの実装はされていましたが、今回の Firefox 22 からデフォルトで有効化されました。

HTML5 関連では、data 要素、time 要素への対応、input 要素の、type="range" のサポート。JavaScript 関連で、新 JavaScript エンジン 「OdinMonkey」 による JavaScript の高速化、asm.js、ES6 の Arrow Function 構文を実装、また WebRTC もサポートするなど、多くの変更が行われています。

Posted by:

Pure を使って 5分でレスポンシブな Blog テンプレートを作る

PurePure は Yahoo! が公開した CSS フレームワークですが、試しに使ってみましょうということで、自分で書くスタイルは極力少なくして、簡単に Blog のテンプレートっぽいものを作ってみました。

さすがに 5分はウソです すいません。でも簡単でしたよ。

Posted by:

Firefox が longdesc 属性をサポート... って前からしてなかったっけ?

Firefoxミツエーリンクスさんのアクセシビリティ Blog 経由ですが、Firefox が longdesc 属性をサポートするとのこと。なんですが、Firefox (っていうか Mozilla のころから) ってすでに longdesc 属性に対応しなかったっけ? って思ったのでちょっと確認してみた話と、ついでなので longdesc 属性についてサンプルソースとか交えて簡単に書いてみます。

Posted by:

Twitter カード 7タイプの使い方をカード種別ごとに解説するよ

TwitterTwitter Cards (Twitter カード)、この Blog でもかなり前から指定して使っていますが、7種類のカードから選択できたり、それぞれに指定できる値が異なってたりしてわかりにくいっていう声を聞きましたので (公式な日本語ドキュメントも今のところないし)、簡単に各カード種類別の仕様をまとめてみました。

Twitter Cards は、Facebook や Google+ などが採用している、OGP (Open Graph Protocol) を利用して、ウォールやタイムラインにリンクを投稿する際の表示内容を指定するのと同じ。それの Twitter 版です。タイムラインに URL が投稿されたときに、meta 要素で指定したメタデータに応じて、Cards (カード) と呼ばれるコンテンツをツイートの付加情報として表示します。

Posted by:

Chrome Beta for Android 28 が Fullscreen API に対応

Chrome BetaChrome Beta for Android がバージョンアップして ver.28 (28.0.1500.21) になりましたが、Fullscreen API に対応したそうです。

Fullscreen API は Web ページ内の任意の要素をフルスクリーン表示可能にする仕組みで、現在 W3C でも標準化が進んでいます。この Blog でも、2年くらい前ですが Fullscreen API に関して書いていますので、その時に作ったデモページで実際に試してみました。

Posted by: