タグ

ブックマーク / www.tam-tam.co.jp (3)

  • CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える | Tips Note by TAM

    「どうやってコーディングをして組み立てていこうか?」 いくつもの案件を経験しても、いつも悩んでしまうのがCSSの書き方です。「それなら自分なりの考えをまとめてルールを作ってしまおう」と考え、CSS設計に関する情報から自分なりにコーディングルールを作りました。 今回の内容は社内勉強会で発表した「CSSのファイル構成と命名規則」の資料を再編したものです。 すべての案件内容で最適な方法ではないこともあると思いますので、1つの考え方だと捉えていただけるとありがたいです。 詳しいコードやルールはGitHub(個人のアカウント)を参照してください。「使用しているテンプレート」リンク先のstyle.scssで実際の全体の構成が確認できます。 使用しているテンプレート CSSコーディングルール CSSは影響範囲の管理が難しい CSSで難しいことのひとつは「影響範囲」を管理することだと思います。 クラスを追

    CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える | Tips Note by TAM
  • PhantomJS と CasperJS で複数ページを一括キャプチャする | Tips Note by TAM

    Web 制作をしているとページの表示確認やコンポーネントの洗い出しなどで、大量にキャプチャを撮ってきたい時があります。 しかしブラウザのエクステンションで1枚ずつ撮るのも面倒です。 そこで PhantomJS と CasperJS を使うとキャプチャを自動化することができるということなので、先達たちの情報を参考に、キャプチャしたいURLと想定するデバイスを CSV で管理して、楽にキャプチャがとれるものを作成しました。 PhantomJS と CasperJS とは PhantomJS ですが、グラフィカルな画面のないブラウザで「ヘッドレスブラウザ」と呼ばれるブラウザです。コマンドラインからブラウザの機能を使うことができ、フォームの操作やページの要素を取得することができます。よく CI ツールと組み合わせて自動テストを行ったり Web スクレイピングで使われたりします。 PhantomJS

    PhantomJS と CasperJS で複数ページを一括キャプチャする | Tips Note by TAM
  • Git 2.7 で .gitignore が便利になっている | Tips Note by TAM

    2016年1月に Git 2.7 がリリースされました。 色々なコマンドが増えたりしていますが、なかでも .gitignore に関する仕様追加が興味深かったのでまとめます。 .gitignore とは Git で管理したくないファイルを設定するためのファイルです。 たとえば .gitignore ファイルにこのように書いて置いておくと、 *.json /sample-folder 拡張子が .json のファイルと、 /sample-folder というフォルダ配下は Git で管理されなくなります(変更などがあっても無視される)。簡単ですね。 .gitignore の設定を、打ち消したい場合 ! 記法で、設定の打ち消しが可能です。 たとえばこう書くと、 *.json !required.json 拡張子が .json のファイルは無視されるのですが、 ! をつけた required.j

    Git 2.7 で .gitignore が便利になっている | Tips Note by TAM
  • 1