Bootstrapのグリッドシステムのガイドラインをデザインツールで表示する ｜ Tips Note by TAM
こんにちは。 僕はデザインとフロントエンドを兼ねて仕事をしているのですが、デザイン段階でCSSフレームワークのガイドラインを意識してデザインすると、コーディングが格段にスピードアップするのを実感しています。 本記事は今までグリッドシステムを使ってデザインをしたことがないという方を対象に、Bootstrapのグリッドシステムを例にして、ガイドラインの考え方とデザインツールでのガイドラインの引き方をご説明します。 Bootstrapのグリッドシステムのガイドラインとは? Bootstrap CSSフレームワークの代表。作業を効率化できるCSSがあらかじめ組み込まれた枠組みです。 http://getbootstrap.com/ グリッドシステム Bootstrapでは12本の縦のガイドラインが存在し、そのガイドラインの幅に沿ったコンテンツを実装することができます。 Bootstrapのグリッド
CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える ｜ Tips Note by TAM
「どうやってコーディングをして組み立てていこうか？」 いくつもの案件を経験しても、いつも悩んでしまうのがCSSの書き方です。「それなら自分なりの考えをまとめてルールを作ってしまおう」と考え、CSS設計に関する情報から自分なりにコーディングルールを作りました。 今回の内容は社内勉強会で発表した「CSSのファイル構成と命名規則」の資料を再編したものです。 すべての案件内容で最適な方法ではないこともあると思いますので、1つの考え方だと捉えていただけるとありがたいです。 詳しいコードやルールはGitHub（個人のアカウント）を参照してください。「使用しているテンプレート」リンク先のstyle.scssで実際の全体の構成が確認できます。 使用しているテンプレート CSSコーディングルール CSSは影響範囲の管理が難しい CSSで難しいことのひとつは「影響範囲」を管理することだと思います。 クラスを追
CSS3でアニメーション：初歩の初歩 ｜ Tips Note by TAM
まだすべてのモジュールが勧告には至っていませんが、CSS3でアニメーションが使えるようになって数年たち、複雑ではないちょっとした動きなら、クライアントからCSSでの実装を依頼されることが増えてきました。 CSS3アニメーションを使う際のネックになっていた、IE8、IE10のサポートも終了したことで、ますます使う機会が増えるのではないかと思います。（VistaのIE9は生き残っていますが…） 配布されているソースを貼るだけで普通に動いてくれるので、どのプロパティが何を指定するものなのか、漠然としかわからないまま使っていましたが、使ってみたら、意外と理解できていないことが多かったので、調べました。 CSS3のアニメーションには「animation」と「transition」がありますが、まずはその違いから。 ■animation ループできる 自動再生できる keyframesで、動きを細かく
git コマンドで差分納品 zipを作る (かつ、不要ファイルは含めないようにしたい) ｜ Tips Note by TAM
2017.06.22 git コマンドで差分納品 zipを作る (かつ、不要ファイルは含めないようにしたい) 受託案件あるあるなのですが、普段の開発では git でコード管理していても、納品は zip ファイルにまとめて渡さなければならないことがありますね。gitでは、コマンドの組合せで差分の zip ファイルの作成もさくっと行えますので、その方法をご紹介いたします。 また、「開発時は git管理しているけど納品物には含めたくない」というファイルがある場合も、.gitattributes ファイルの設定を組み合わせることで zipから除外することが可能です。(たとえば sass ファイルだったり、テストデータだったり) [TL;DR] 結果のコマンド 説明が長くなりそうなので最初に結果のコマンドを書いておきます。 git archive master --format=zip -o 出力フ
Webサイト制作でWordPressの配布テーマを使うメリット・デメリットとカスタマイズ方法について。 ｜ Tips Note by TAM
2015.11.30 Webサイト制作でWordPressの配布テーマを使うメリット・デメリットとカスタマイズ方法について。 Webサイト制作のCMSとしてWordPressを使用している方は多いと思いますが、Webサイト制作の場合はオリジナルでテーマを作ることが多いと思います。 TAMでもデザインから作成して、オリジナルのテーマにすることが多いですが、予算や納期に合わせて、既存のテーマをカスタマイズして作る取り組みなども行っています。 僕も2回ほど既存テーマをカスタマイズしてサイト制作を行う機会があり、メリットやデメリット、カスタマイズするときのポイントが見えてきたので紹介しようと思います。 既存テーマを使う4つのメリット 既存テーマを使う4つのデメリット 有料テーマや野良配布テーマを使う時の注意点 カスタマイズ方法 既存テーマを使う4つのメリット 工数を減らすことが出来る 簡単に高品質
【作業効率化】レイヤー名をまとめて置換「Group Layer Renaming」 ｜ Tips Note by TAM
「Group Layer Renaming」はその名の通り、レイヤーをリネームしてくれるPhotoshopのスクリプトです。 新しいネタではありませんが、画像アセットと合わせて使うと便利だったので紹介します。 導入 「Group Layer Renaming」をダウンロード ダウンロードはこちら。 [KAM] Layers Renamer - APR.jsx ファイルがダウンロードされます。 ダウンロードしたjsxデータをPhotoshopのスクリプトフォルダに格納する 格納場所は使用しているOSやPhotoshopのバージョンによって異なります。 下記はAdobe Photoshop CC 2017の場合。 Windows C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Scripts Mac Macintosh HD/App
開発環境でも使えるメタ情報チェックツール「Simple Meta Checker」を作りました ｜ Tips Note by TAM
サイトのメタ情報のチェックに悩んでいる制作者やディレクターの皆さん、こんにちは。 HTMLのタイトルやメタ情報、h1など、とても大事なんですが確認するのめんどくさいですよね？ 僕はめんどくさいです。ページ数が多かったら、それはもう大変です。 こういった情報を確認するためのツールは、探せば色々と公開されているのですが、 開発環境（IP制限やベーシック認証がかかっている領域）で使えない 今見ているページしかチェックできない 1度にチェックできる数に制限がある などの条件があるものが多く、僕としては「サイト公開前に一括で確認したい！」といったような状況が多いのですが、合うものが見つかりませんでした。 そういうわけで、自分でツールを作ってみたので、会社のブログを利用して紹介させてくださいｗ デモサイトをGitHub Pagesで作ってますので試してみてください。 https://kandai.gi
「Google Fonts+ 日本語 早期アクセス」を使ってみる ｜ Tips Note by TAM
Webフォント「Google Fonts」に、先月「日本語の9書体」が試験的に追加されましたので、早速使ってみました。 ［参照］Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access https://googlefonts.github.io/japanese/ フォント一覧 M+ 1p （weight：7種類、多くの漢字も収録） Rounded M+ 1c （weight：7種類、多くの漢字も収録） はんなり明朝 （weight：1種類、ひらがな・カタカナのみ） こころ明朝 （weight：1種類、ひらがな・カタカナのみ） さわらび明朝 （weight：1種類、多くの漢字も収録） さわらびゴシック （weight：1種類、多くの漢字も収録） ニクキュウ （weight：1種類、カタカナのみ） ニコモジ （weigh
【imageswitch】jQueryでウィンドウサイズによって画像を切り替える ｜ Tips Note by TAM
レスポンシブWebデザインではおもにウィンドウサイズによってレイアウトを変更していきますが、画像はHTMLとCSSだけでは最適化するのが難しいです。 backgroundプロパティであればメディアクエリで切り替えられますが、imgタグで指定したい場合には使えません。また、srcset属性を使えばウィンドウサイズや解像度によって画像を切り替えることができますが、IEはまったく対応していないので専用のプラグインを読み込む必要があります。 そこで使用しているのが、jQueryで画像ファイル名の一部を置換して表示する画像を切り替える方法です。 ウィンドウサイズを検知して画像ファイル名を置換する HTML側は.js-image-switchのついているimg要素のファイル名を以下のように変更して表示を切り替えていきます（ここでは仮に768pxとします）。.js-image-switchにはCSSでス
透過PNGをIEできちんとopacityさせたい ｜ Tips Note by TAM
透過PNGをIE6/7/8にエラーなく反映させたい時、みなさんどのように対処されていますか？ 今回、つまずきがちなその問題に立ち向かうべく、私なりに色々と調べてみました。 有用と思しき記事に出会うたび、リンク切れだったり、ちょっと難しかったりしたので、 簡単にわかりやすく、次に自分が対応するときのことも考えて記事に残したいと思います。 今回はMach3.laBlogさんのページを参考に実際のサンプルを作っていくことにいたしました。 【参考サイト】 IEの透過PNG+opacityの不具合を治すメモ | Mach3.laBlog 透過PNGをIE6で使用する際に有名なのは「DD_belatedPNG」ですが、 IE6向けのライブラリのため、IE8ではエラーが出てしまいます。 IE6/7/8全てに透過PNGを対応させるため、Mach3.laBlogさんの記事を元に、 「DD_belatedPN
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
