こんにちは、清田です。 WWDC 2014のSafari 8のセッション内で、CSS ShapesとCSS Compositing and Blendingをサポートすることが発表されました。 サポートされたCSS Compositing & Blendingについてご紹介します。 CSS Compositing & Blendingとは? 色の合成と混色をcss側で制御することが可能になったとのこと。それでもなんのこっちゃですよね。。。。 簡単なイメージ図で説明してみたいと思います。まず、従来のCSSでは、レイヤーAの上部にレイヤーBを被せたレイアウトをすると以下のようなに表示されるかと思います。 次に、同じレイアウトのまま、CSSのブレンドモードを反映して描画してみると以下のように色が合成された表示結果が再現されます。 ブレンドモードでは上部に重ねられたレイヤーが、下の要素の色味を取得

We were as excited as everyone else with last week’s Apple iOS 8 release announcement. We have only had the iOS 8 GA bytes for a few days, but we wanted to do as quick and complete a write-up as we could to give the global web developer community an in-depth look at Apple’s latest release. There’s no doubt we’ll see a few items we missed in the next couple of weeks and months, but for now we wante

iPhone 6でのスマートフォンデザイン iPhone 6の発売日を明日に控え今後のスマートフォンサイトデザインをどのようにしていけばよいかSNSで見かける悲鳴を拾い上げながらQ＆A形式で答えて見たいと思います。(実物を手に入れて間違っていたら後日修正します) Q.1 iPhone 6の解像度が750×1334でdevice-pixel-ratioが2だとCSS解像度は375×667だけど横幅320pxでデザインしても大丈夫？ A.1 横幅320pxでデザインしても大丈夫。基本最近のスマホ対応では多解像度に対してリキッドでフィットするようにするのが主流。 リキッドの場合ベースデザイン320pxを375pxに広げて表現するのは難しくないが、ベースデザイン375pxを縮めて320pxで表現するのは至難の業なのでスマートフォンデバイスでの最小幅である320pxでのデザインは当分続きます。 Q.

こんにちは、清田です。 WWDCの中で、次世代のSafari 8で「CSS Shapes and Compositiong」がサポートされたとのことで、 今回はCSS Shapesについてご紹介してみたいと思います。 CSS Shapesとは？ CSS ShapesのShapeは形を意味します。 CSSのプロパティから指定した任意の形状(Shape)に合わせて、レイアウトすることを可能にしたスタイルになります。 表現できる形は、丸、三角形、台形など簡単図形の描画や画像を形状として認識できるようです。 ブラウザの対応状況 以下の対応表を確認してみると、Safari 8から対応したのが確認できます。 導入方法について まず前提条件として、CSS Shapesを描画できるブラウザであることがあります。 基本的なでスタイルを反映方法は、従来の指定方法と同じようにdom要素に任意のid or cls

Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.

CSS Nite in OKAYAMA, Vol.5 「マルチデバイス対応の最新事情」に小林信次が出演します2014.09.18 2014年10月4日（土）に開催されるCSS Nite in OKAYAMA, Vol.5 「マルチデバイス対応の最新事情」に小林 信次が出演します。 2013年5月25日（土）に開催されたCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」、2013年11月9日（土）にCSS Nite in SAPPORO, Vol.11 「実践！ スマートフォン対応サイト制作」で、また2014年5月17日（土）には日本ディレクション協会「失敗しないスマホサイト制作講座 〜落としどころの審美眼を体得せよ〜」でお話ししてきた内容を、時代の流れとともにアップデートしたものになる予定です。 岡山近辺の方はぜひいらっしゃってください！