安田 学
pngで表示していたような画像の代わりとしてSVGを使うのがいちばん手軽な方法です。通常の画像と同じように``要素で指定します。 ``` html ``` 使用するSVGファイル内には`viewBox`属性、`width`属性と`height`属性を必ず指定します（IEとAndroid対応）。 SVGファイル内で`width`と`height`属性が指定されていない場合にIEとAndroidでアスペクト比がおかしくなることがあります。`width`と`height`属性を指定し直します。 `preserveAspectRatio="none"`をSVGファイルに指定して直す方法もあります。仕様上、viewBoxのアスペクト比と`width`と`height`属性でのアスペクト比が異なる場合、アスペクト比と維持しながらスケーリングし、中央寄せで表示されます。`preserveAspectRatio`属性はこの挙動を変更するもので、`none`と指定することでHTML側で指定したサイズでviewBoxがフィットするようになります。 ### フォールバック フォールバックは処理が冗長になるので、IE8に対応するのであればSVGは使わないようにするのがベターです。 SVG非対応ブラウザ向けのフォールバックにはHTMLでの対応とJavaScriptでの対応の2パターンがあります。 HTML側で対応する場合は``要素ではなく、``要素を使います。``要素は下記のようにフォールバックを含めた記述ができます。 ``` html ``` JavaScript側で対応する場合は、SVG非対応ブラウザのときには.svgを.pngに置換します。 ``` js if(!window.SVGSVGElement){ //SVG非対応ブラウザの判別 $('img[src*="svg"]').attr('src', function() { return $(this).attr('src').replace('.svg','.png'); //拡張子を置換 }); } ``` フォールバック画像の作成は[svg2png](https://www.npmjs.com/package/gulp-svg2png)などで自動的に生成することができます。...
Illustratorを使った場合の書き出しに関する注意点をまとめています。レイアウト崩れの原因を取り除いたり、不要なコードを最低限にします。一部の設定は変更してもかまいません。 1. [別名で保存]をクリック（Macの場合はcommand + shift + S） 2. [ファイル形式]は[SVG(.svg)]を選択 3. [詳細オプション]をクリックしてオプションを開く 4. 以下のリストを参考にオプションを指定する - [SVG プロファイル]はSVG1.1（最新版を指定） - [フォント]の[文字]は[SVG]、[サブセット]は[なし（システムフォントを使用）] - [Illustrator の編集機能を保持]をチェックしない（サイズ削減のため） - [CSS プロパティ]はスタイル要素を指定する（サイズ削減のため） - [未使用グラフィックスタイルを含める]をチェックしない（サイズ削減のため） - [小数点以下の桁数]を1もしくは2にする（サイズ削減のため） - [エンコーディング]は[UTF-8]...
通常の画像と同じく`background-image`プロパティでSVGも表示させることができます。 ``` css .bg { background-image: url("image.svg"); } ``` フォールバックをする場合はフォールバック用のpng画像を先に指定します。 ``` css .bg { background-image: url("fallback.png"); background-image: url("image.svg"), none; } ``` 使用するSVGファイル内にはviewBox属性、width属性とheight属性を必ず指定します（IEとAndroid対応）。
- [SVG 1.1 仕様 （第２版） 日本語訳](https://triple-underscore.github.io/SVG11/index.html) - [SVG | MDN](https://developer.mozilla.org/ja/docs/Web/SVG) - [svg要素の基本的な使い方まとめ](http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo.htm)
SVGとして使うアイコンやロゴなどを_作るとき_に気をつけることをまとめています。 通常の画像と違いコード(XML)として書き出されるので、作り方によってIllustratorの指定を無視したり変換されることによって意図しないデザインとして出力されたり、ファイルサイズを増やしてしまう原因になります。 ### Illustratorの基本設定 Illustratorで作成する場合の基本的な設定です。一部は使いやすいように変更してもかまいません。 環境設定の初期設定。 - [単位]はすべてピクセル - [一般]の[キー入力]は0.5px - [一般]の[プレビュー境界を使用]にチェックを入れる（［整列］パネルからでも設定可能） - [テキスト]のトラッキングは10/1000em（`letter-spacing:0.1;`に相当） - [ガイド・グリッド]の[グリッド]を10px、[分割数]を2px 新規ドキュメントの初期設定。 - [単位]はピクセル - [カラーモード]はRGB - [ラスタライズ効果]はスクリーン（72ppi） - [プレビューモード]はピクセル - [新規オブジェクトをピクセルグリッドに整合]のチェックを外す アートボードの初期設定。 - [ウィンドウ]メニューの[ワークスペース]を[Web]...
### サーバー設定 サーバーによってはMIMEタイプの設定が必要があります。 .htaccessに以下のように追加します。 ``` AddType image/svg+xml .svg .svgz AddEncoding gzip .svgz ```
[Svgsus](https://itunes.apple.com/jp/app/svgsus/id1106867065?mt=12) - Macの無料アプリ - カテゴリ分けをして管理できる - アイコンをコピーして、IllustratorやKeynoteなどにアイコンをペーストできる - アイコンをコピーして、テキストエディタにSVGコードをペーストできる（Jadeとして変換も可能） [svgo](https://www.npmjs.com/package/svgo) - npmパッケージ - Gulpなどやコマンドで実行ができる - SVGの最適化 [SVGOMG](https://jakearchibald.github.io/svgomg/) - svgoのWebアプリ - ブラウザでSVGの最適化ができる [svgstore](https://github.com/w0rm/gulp-svgstore) - npmパッケージ - SVGスプライト（svgstore）の自動化 - ``要素と`id`属性を自動的に紐付ける
現状ではページ単位での個別のスタイルは専用のCSSファイルを作ることになっている。つまり、共通で使われないスタイルはFLOCSSの中に含まない。 1枚のCSSファイルとして書き出したい場合に個別ページ特有のスタイル（Projectレイヤーの上書きなども含めて）を書けるレイヤーがない。 object/page/_comment.scssのようにする。Sassのファイル名はページのファイル名とディレクトリ名と基本的には合致するようにする。つまり、ディレクトリ名だけだったらディレクトリ共通、ディレクトリ名とファイル名を含んでいたらページ専用のスタイル。 `body`タグに`.pg-comment`のように、接頭辞`.pg-`とSassファイルと同じクラス名をつけ、スタイルを記述する。 読み込む順番は以下のようになるのが適切か？ 1. Object 1. Component 2. Project 3. Page ←new! 4. Theme 5. Scope 6. Utility 7. QA/Test まとめ - object/page/ - 接頭辞は`.pg-` - ファイル名は参照するHTMLファイルを特定する一意なもの（ファイル名やディレクトリ名を入れる） -...
git-operational-rules.md GitHubとBacklog共通のGitに関するルールや運用フローを決める。それぞれのルールは - github-operational-rules.md - backlog-operational-rules.md としてまとめる。
各HTML専用のCSSファイル（以下個別CSS）内でComponentやProjectレイヤーを上書きするときにどんな書き方をするのがいいのか？ 個別CSSはそのページがスコープになる（他のページでは読み込まれない）ので詳細度を気にする必要はほとんどないのかもしれない。 それよりも上書きのしやすさや、HTMLをいかに簡潔にするかを優先したほうがいいかもしれない。 ``` scss .c-block {} .c-block__element {} .cp-block {} .cp-block > .c-block__element {} ``` ``` html ``` のように1つのブロックを指定して、CSS内で上書きするセレクタと結合子を指定してHTMLを簡潔にする。