WEB掻っ穿じり

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

源ノ角ゴシック Source Han Sansをビルド、サブセット化してからのWebフォント化

Source Han Sans、日本語名では源ノ角ゴシックは、AdobeがGoogleと共同開発したオープンソースのフォントファミリーで、オープンソースのフリーフォントとしてSIL Open Font License 1.1というライセンスで公開されています。

クセがなくフラットな書体で...


Google Analytics 解析数値を乱す(not set)の対処

仕事の運営サイトや、このブログでもGoogle Analyticsで解析しているが、最近全体的にアクセスが増えてきている印象…。
日によって数値にムラがあっても最初はなんとなくスルーしていたが、ユーザの言語情報を見ると(not set)からのアクセスが異常に多く明らかに不自然。

Google Analytics 言語ユーザー一覧

この...


Middleman フロントエンドツールで静的サイトを開発

サイトの目的に合わせて開発ツールを選択するそのベストプラクティスも最近ではそれぞれです。

動的ページ生成のようにサーバに負荷をかけずに、SPA構築のようにエンジニアに負担をかけずに、静的ページのHTMLファイルを生成してくれる静的サイトジェネレーターを導入してみました。

今回はMac OS...


Macアプリ アイコン作成・変更方法 SKETCH.appデータなど

Mac OSのDockに並ぶよく使うソフトのアイコンたち、使い勝手以上に何より見た目を気にしてしまう人も多いと思います。
ブラウザのアイコンも顕著ですが、Yosemite以降よりフラット化されたデザインのアイコンのを多く見かけます。

WEB開発系のツールなどはどれも洗練されてポップなアイ...


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

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

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

そこで...


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

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

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

triangulate images

triangulate imagesサイトキャプチャ

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


MacとXperia Z3 SOL26 でUSBテザリング…できました

デバイスを複数持ち歩くとwi-fiテザリングが便利なんですけど、Macbook Proだけネットに繋げてテザリングするときは、USBテザリングできた方がスマホを充電しながらできますし、パフォーマンスも有線の方が良いのでUSBテザリングする機会があるんですけど、XperiaにしてからMacをUSB...


ビルドツールの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)$...

Page 3 of 7