Tagbangers Blog

Chrome

Chrome DevTools 小ネタ 〜shadowをつける〜

Hello web developer :) Web屋さん御用達のChrome DevTools小ネタを紹介。第1弾。(シリーズ化する風) 要素にshadowを追加する時に便利なTipsです。 まずいつも通りDev Toolsを開きます。( Macは command + option + i ) 今回使うのは一番馴染みがあるであろう、ElementsのStylesタブです。 好きな要素のStylesにマウスカーソルを載せると5つアイコンが出てきます。左から2つめがshadowです。 吹き出しの中の青いトグルを動かすと直感的に影の向きと大きさ、影のぼやけ方、影の距離を変更できます。便利! こんな...

Webサイトデザイン調査用ChromeExtension 7選

Webサイトを作る時、他のサイトさまを参考にすることってよくあると思います。 その際によく使うおすすめChromeExtensionをご紹介します。 1.スクリーンショットを撮る Awesome Screenshot https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj App版 https://chrome.google.com/webstore/detail/awesome-screenshot-app/mfpiaehgjbbfednooiha...