タグ

2015年10月30日のブックマーク (2件)

  • Chrome デベロッパーツールで知っていると、Webサイトやアプリの制作が捗る便利なテクニックのまとめ

    先日「Chrome デベロッパーツールの使い方」で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。 デベロッパーツールの便利な使い方 タブ「Elements」を選択 DOM要素を選択 右パネルのタブ「Computed」を選択 「Computed」には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。 これは大きなサイトを制作している時に、非常に有用です。

    Chrome デベロッパーツールで知っていると、Webサイトやアプリの制作が捗る便利なテクニックのまとめ
  • phiary

    デフォルトの input[type=file] ってなんか古臭い感じがしますよね? とはいえ CSS でスタイリングしようとすると, デフォルトでかかってるスタイルが複雑でちょっとハードルが高かったりします. そこで今回は『Dropify』という jQuery プラグインを使って input[type=file] をかっこ良くする方法について紹介します. 『Dropify』を知ったきっかけ 『phpspot開発日誌』さんのこちらのエントリーで カッコ悪いinput[type=file]をモダンにしてドラッグ&ドロップ対応にする「Dropify」:phpspot開発日誌 紹介されていて, 便利そうだったので使ってみました. 『Dropify』とは? オフィシャルに Override your input files with style とあるように input[type=file] をかっ

    phiary