Tagbangers Blog

難波 理恵

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...

弊社オフィスへの道のり

7月にオフィスを引っ越してから駅からオフィスまでが少し距離が増えました。 (お客様が迷ってしまうこともしばしば。。) というわけで、横浜駅きた東口から弊社オフィスまでの道案内です。 では横浜きた東口からスタート。 出口左手にあるエスカレーターを利用しベイクオーター方面へ ベイクオーター到着。 お店がいっぱいあるので帰り道に寄り道もオススメです。 KALDIとLAWSON前を通ってベイクオーターの中を通り抜けます。 右側の歩道橋へ進みます。 歩道橋の上からポードサイド公園交差点が見下ろせます。 歩道橋を降り右手へ進みます。右側に交番があります。 右手に壁画を見つつずーっと直進します。 PORTS...

Noto Sans Japanese軽くしてみた

Noto Sans Japaneseこと、NotoSansCJKの元ファイルは結構な容量なので軽量化してwebfontで使おう計画第一歩。 Noto Sans Japanese試してみたの続編です。 NotoSansCJKjは1ファイル(1ウェイト)でだいたい16MB越えなので、それらを軽量化します。 使うツール サブセットフォントメーカー WOFFコンバータ 1. サブセット化 サブセットフォントメーカーを使ってフォントファイルの中身を削ります。 作成元フォントファイル:NotoSansCJKjp-Medium.otf フォントに格納する文字:以下のアルファベット+@ 、。,.:;?! ゙ ...

ChromeでWebサイトを印刷する時の備忘録

ChromeでWebサイトを印刷する際、デフォルトだと背景が消えてしまいます。 本来なら印刷する際にはインクの消費や見やすさの観点から背景は含まない方が良いと思うのですが、背景付きで印刷したいケースも多々あるかと思います。そんな時に役立つであろう備忘録です。 印刷設定変更 サンプルではいつもお世話になっているwww.google.co.jpを使わせて頂きます。 1.印刷プレビューを開く まず印刷プレビューを開きます。 デフォルトの設定だとwww.google.co.jpの象徴、ロゴが消えてしまっていますね。 2. オプション変更 オプションのところにある、「背景のグラフィック」にチェックを入れ...

Bootstrap 4 alphaがくるよ!

http://blog.getbootstrap.com/2015/08/19/bootstrap-... Bootstrap4がもうそろそろ来ますよーって告知があったので一部ご紹介。 3.2.0が来たのが2014の夏頃(だった気がする)ので、 ちょうど一年ぶりくらいのメジャーアップの予感。 特に下記注目。 ”Dropped IE8 support and moved to rem and em units.” Dropped IE8!(大事なことなので。 github(https://github.com/twbs/bootstrap/commits/v4-dev)を見ても分る通り、 大工事...

placeholderの見た目を変えたいときの備忘録

HTMLのformパーツ定番のinputなどに使えるplaceholder属性の見た目を調整する際に使用するセレクタめも。 これでfont-sizeとか諸々のスタイルを編集出来ます。 /* Chrome, Safari */ ::-webkit-input-placeholder { } /* Firefox 18- */ :-moz-placeholder { } /* Firefox 19+ */ ::-moz-placeholder { } /* IE 10+ */ :-ms-input-placeholder { } ちなみに、 /* セレクタまとめたい症候群 */ ...

MacのiCalでアプリの自動起動

普段ChromeでGoogleカレンダーを利用している私はあまりiCalは利用していませんでしたが、 少し調べてみたら便利そうな機能を発見したのでご紹介します。 タイトルの通り、Macにインストールされているアプリを特定の日時に起動させることができます。 使うもの 標準装備のiCalことカレンダーアプリを使います。 使い方 1.イベント登録します タイトル、日時をご自由にどうぞ。 2.イベントに起動したいappを指定する イベント登録時の吹き出しの下の方にある"添付ファイルを追加"のメニューからお好きなappを選びます。 3.その時を待つ 指定した日時に選んだappが起動します。 Macの自動...

Sublime Textで簡易HTTPサーバ

HTML周りのコーディングに便利なSublime Textを使って簡易サーバが立てられちゃいます。 気軽にローカル環境で表示チェックをしたい時にピッタリです。 SublimeServerをインストール 1.Command Palletを開く メニューのToolsの一番上にあります。 ショートカットはcommand + shift + pです。 2.Package Control: Package Installを選択 ※Package Controlも別途インストールする必要があります。(https://packagecontrol.io/installation#st3) 3.表示されたリス...

今更ながらEmmetのご紹介

Emmetとは HTMLとCSSの入力補完。 Zen-Codingの後見。 展開後のカーソル位置が親切。 Sassなどのプリプロセッサ系より導入コストが低い。 少し覚えるだけですぐ便利。 導入 IntelliJ IDEA 標準サポートなのですぐ利用出来ます。 キーマップなどはお好みで変更出来るのでお試しください。 Preferencesの中で"Emmet"で検索をすると項目がすぐ見つかります。 SublimeText 他のプラグイン同様、Package Control からInstall Packageを選択します。 リストからEmmetを選ぶだけ!簡単ですね。 他の定番エディタたち、Coda...