2015年7月15日のブックマーク (3件)

  • Sublime Textのスニペットの内容を一覧表示するツール | WebNAUT by Beeworks

    この記事はSublime Text Advent Calendar 2014の16日目の記事です。 Sublime Textのスニペット、皆さん活用していますか? 今回はそのスニペットの管理に役立つツールを作ってみましたのでご紹介致します。 目次 スニペットとは? チームで共有しよう 一覧ツール おすすめスニペット ブログリレー企画”Adventar”に参加しています スニペットとは? 以前こちらの記事でも取り上げましたが、改めて定義についておさらいしておきましょう。 ▼一度書いたコードは二度と探さない!スニペットを究めて快適コーディング!【HTML, CSS, JavaScript】 自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 コーディング作業には欠かせない機能で

    Sublime Textのスニペットの内容を一覧表示するツール | WebNAUT by Beeworks
  • CSS専門のスニペット共有サイト・CSSPop

    コードスニペットを共有できる Webサービスは沢山ありますが、 CSSPopはCSSを専門としたコード 共有サイトです。なかなか珍しい し、結構便利な小技も見かけま した。 CSS専門のスニペット共有サイトです。動作デモも見る事が出来ますよ。 CSSのコード共有サイト。ユーザー登録も出来ますが、しなくてもコードを書いてデモを確認する事も可能です。 Findからコードを探せます。サムネイルがあるので探しやすい。カテゴリはdiv、input、buttonなどのDOM要素で分けられています。 Createでコードを書く画面に進みます。入力項目はHTMLCSSで、書くと同時にプレビューに繁栄されます。あとはtypeと説明を書けばOKです。 結構見ちゃいますね。数も結構揃っています。 CSSPop

    CSS専門のスニペット共有サイト・CSSPop
  • スタイルシートの有用なスニペットのまとめ | コリス

    よく使うclearfixから、見出しの画像置換や見た目非表示の新しいスニペット、レスポンシブによく利用されるスニペットなど、スタイルシートのよく使用する有用なスニペットを紹介します。 A Collection of Handy CSS Snippets 下記は各ポイントを意訳したものです。 ショートハンドのclass デザイン関連のスニペット 開発関連のスニペット 印刷・Retina・検証用のスニペット ショートハンドのclass よく使用するショートハンドのclassから始めましょう。 ポイントはセレクタでエレメントを定義するのではなく、すぐに利用できることを前提にしています。 まずは、テキストと画像を配置する時に簡単に使えるfloatです。 .float-left /* こんな感じに直観的に分かる名前で */ { float: left; } .float-right /* こんな感じ