Webdesign

Illustrator CC 2017から書き出したSVGは、GIMP 2.8.22で正しく表示できない


2017-07-06追記: 問題が起きる原因と対策を、記事にまとめていただきました。
GIMPでSVGファイルの表示が崩れる問題とその解決策 - 週刊SVG
圧縮された座標パスを正確に解析できない、既知の不具合です。GIMPで編集可能とする場合は、圧縮ツールを使わないようにしてください。また、Illustratorの場合は非圧縮となる「別名で保存」などを使用してください。

エントリー末尾の補足情報も参照ください。

表題の通りです。同じ状況になる人がいずれ出てくるかもしれないので共有します。

結論から書きますが、これはGIMP側の仕様で、ブラウザでの表示においては問題ありません。
どうもGIMPは、SVG関連の対応は読み込み・書き出しともに遅れているようです。

Android Studioでも色情報が引き継がれない問題が報告されています。

Sketchたまご: Illustratorから書き出したsvgをAndroid StudioにImportすると色情報が反映されないことの解決法

この記事には続きがあります

Webdesign

Atomic Designの思想でCSSフレームワークを作るのは難しいので代替案を考える


一昨日、「FLOCSSがわかりにくい」「Atomic Designの思想でフレームワークを作ってみたい」という記事を書いたところ、とてもたくさんの感想をいただきました。

【Webdesign】Atomic Designの思想で、文系でもわかるCSSフレームワークを作りたい | ウェビンブログ

大半がフロントエンドエンジニアからの突っ込みです。著名な方々にもたくさん意見をいただいただのでまとめました。ありがとうございます。

「Atomic Designの思想で、文系でもわかるCSSフレームワークを作りたい」に識者たちの鋭すぎる突っ込みが入る - Togetterまとめ

Atomic DesignがCSS設計に適していない理由

ピクセルグリッドの高津戸さんによると、そもそもAtomic DesignはCSSやJSの設計とは全く関係ないそうですが、よく考えてみると、たしかに厳密な階層構造を持っているAtomic Designの設計は、デザインレベルからの意思統一が可能な環境でなければ破綻してしまいます。

私はデザインを外部に発注することが多いですし、CMSベースで構築すると、どうしてもマークアップやクラスの命名に手を出せない箇所が出てきます(※)。

そんなこんなで、Atomic Designを採用することは諦めて、既存のCSS設計を、専門のマークアップエンジニアではなくても理解しやすくする方向で考え直すことにしました。

この記事には続きがあります

Webdesign

Atomic Designの思想で、文系でもわかるCSSフレームワークを作りたい

Atomic Designの構成図かわいいです

2017-06-16追記:Atomic Designをフレームワークに採用すべきでないという結論になりました。悲しい。こちらの記事でもう少し技術的な考察をしています。
Atomic Designの思想でCSSフレームワークを作るのは難しいので代替案を考える

久しぶりにいくつかコーディングの仕事をすることになりそうで、CMSの構築と比較して効率化できていなかった、CSSの設計を見直すことにしました。

最近のCSS設計は、OOCSSFLOCSSSMACSSなどがあり、高度かつ多岐に渡ります。ウェブデザイン設計についても、Material DesignAtomic Designなどがあります。

どれも素晴らしい内容なのですが、どうも私の中ではもやもやとしています。
かつてと比較すると、あまりにも理系寄りで難解だと感じるのです。

この記事には続きがあります

Webdesign

「たった2日で楽しく身につく HTML/CSS入門教室」を読みました

札幌の高橋朋代さん(コモモ)と、森智佳子さん(モリコ)の著書、「たった2日で楽しく身につく HTML/CSS入門教室」を読みました。

私は初心者でも指導者でもないのですが、前作「作りながら学ぶ HTML/CSSデザインの教科書 」がベストセラーとなっている二人の新刊ということと、最近ちょっとWeb制作に疲れていて、原点に返ってみようという気持ちがあって読んでみました。

この記事には続きがあります

Webdesign

cmq: grunt-combine-media-queriesのインデントを、タブ→スペース2個に直す方法


年度末のお仕事をしながら、ここ一年ですっかり効率が落ちてしまった、コーディングの見直しをしています。
昨年からずっとSass+Compass+JSの処理にGruntを使っているわけですが、「grunt-combine-media-queries(cmq)」の挙動で気に入らない点がありました。

cmqは、CSSファイル内でバラバラになっているメディアクエリを、同じ条件ごとにファイル末尾にまとめてくれるタスクパッケージですが、これで整形したあとのCSSファイルは、Sassの設定でcompressed(圧縮)を選択していてもCSSが展開され、さらにインデントが「タブ」になってしまいます。

このあとでさらに「grunt-contrib-cssmin」を通して圧縮すれば、CSSが展開される問題は解決できます。
ですが、制作会社に納品する場合はCSSを圧縮せずに引渡すことが多く、CSSファイルだけタブになっているのがやたら気になっていました(どうでもいいことなんですけどね)。

パッケージの中をのぞいて、修正をしてみました。

この記事には続きがあります