WEB掻っ穿じり

WEBデベロッパー備忘録とチャリ

architect

Firefoxだけtable内の画像スタイル max-widthが効かない現象

RWDサイト制作で、意外にもFirefoxだけスタイルが効かない現象の対策です。

tableタグ内のセル、tdタグを親要素とした画像(imgタグ)のリキッドデザイン、レスポンシブデザインで欠かせないスタイル要素、[max-width:100%]がFirefoxだけ無視されます。

そこで...


画像に3DポリゴンCGにような効果をつけるジェネレーターやジオメトリックな素材・背景(マテリアルデザイン)

最近良くみるポリゴンスタイルのイメージ効果や背景。
Illustratorでパスをなぞるのもなかなか時間がかかりますよね。

そこで簡単に効果をかけてくれるジェネレーターや、素材が手に入る情報をここでまとめてみました。

triangulate images

triangulate imagesサイトキャプチャ

サイト上に画像をアップし...


ビルドツールのGulp、使ってみる

Gulp イメージ

ビルドツールのGulp、Gruntよりも使い易そうなので取り入れてみました、Sass派です。

デザインもマークアップも一緒にやっているので、作業の効率化はツールの学習コストと将来性や実用性、普及具合と社内の共有なんかも考えなら取り入れています。

備忘録的な内容ですが基本を押さえたプ...


CSS Nite LP38 「Webデザイン行く年来る年(Shift8)」に参加してきました。

CSS Nite LP38「Webデザイン行く年来る年(Shift8)」

その年のWeb制作シーンを振り返るCSS niteの「Shift」シリーズに参加してきました。
CSS Nite LP38 「Shift8」2014 – 2015の会場はベルサール神田 イベントホール、出演者もほぼ昨年と一緒の顔ぶれ。

CSS Nite LP31:WEBデザイン行く年...


videoタグを使いBasic認証をかけてスマホで起こる不具合を回避

videoタグを使ったページでBasic認証をかけるとAndroidやiOSで再生できない症状の回避方法。
.htaccessに以下を追記。
.mp4.webmファイルを掲載時。)

          <Files ~ "\.(mp4|webm)$...

HTML5 videoタグの注意点、Miro Video Converterが便利

動画配信サービスで埋め込みを使えば楽なのですが、時間制限やクローズドな公開、審査だったり社外秘の内容だったり….。
html5のvideoタグを使うにあたっての注意点の備忘録です。

          
          

で済ませたいにも、まだブラウザやデバイスの...


Mac環境でIEテストするシステムを紹介

旧バージョンのIEの表示テストは皆さん色々な方法でやられているかと思います。
ブラウザのアドオンや、フリーのソフトウェア、また専用に閲覧テスト用のネイティブ環境をオフラインで持っていると言う方も珍しくないでしょう。
アドオンなどでは再現表示が甘かったり、古いパソコンを何台も管理するのも不便...


Sketch 3プラグインとかのまとめ

Sketch 3

Bohemian CodingSketch 3がリリースされてからしばらく経過して、セミナーやこもりまさあき氏の電子書籍「Sketch 3 Book for Beginner」を読んでみたりと色々情報が散らばっているので、ここでまとめたいと思います。

Sketch リソース

    ...

CSS Nite LP34『Webデザインで使うPhotoshop』に参加してきました

4月19日(土)の仏滅、CSS NiteのCSS Nite LP34『Webデザインで使うPhotoshop』に参加してきました。

CSS Nite LP34:Webデザインで使うPhotoshop

場所はいつものベルサール系のイベントスペースではなく、お茶の水にある「御茶ノ水ソラシティカンファレンスセンター」という会場で開催され、いつものLPよりも...


FireworksでSVG画像を出力するエクステンション

SVG画像などのベクターの取り扱いは基本的にはIllustratorで、ラスターはPhotoshopで作業するパターンでAdobeから当分抜け出せないのですが、ラフ案を見せるときなど昔の名残でFireworksをまだまだ使うことがあります。

Fireworks CS5 アイコン

FireworksでパスをそのままSVGで...


Page 2 of 3