タグ

ブックマーク / webnaut.jp (6)

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

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

    Sublime Textのスニペットの内容を一覧表示するツール | WebNAUT
  • 縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール「Print1」 | WebNAUT

    モバイルサイトのデザインデータなど、縦長の画像を自動分割して印刷用に1枚にまとめるツールを作成しました。 データのアップロード等も不要ですので、機密性の高いデータを印刷する場合でも安心して無料でお使いいただけます! 明けましておめでとうございます。年もWebNAUTをよろしくお願い致します。私の新年1目の記事は特に正月らしい内容ではありませんが、Web制作の各場面で使える「痒い所に手が届く」ツールを紹介させていただきます。 デザイン確認時のよくあるやりとり ディレクター: ここでディレクターさんはデザインの確認と指示出しをどのように行うでしょうか? デスクトップ上で修正指示を書き込むようなアプリも幾つかありますが、やはり見やすさや書き込みのしやすさでは紙に印刷して手書きで指示を書く事が多いと思います。 その際、縦に長い画像を印刷しようとすると一般的なアプリではこのようになってしまいます

    縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール「Print1」 | WebNAUT
    rinxmoon
    rinxmoon 2015/01/09
  • 新人くん、これわかる!?書体の要素が手っ取り早くわかる例え画像 | WebNAUT

    こんにちは!新人デザイナーの入社を今か今かと待ち望んでいるデザイナーのタカハマです。 前回は「定番書体代わりに使えるGoogle Fonts」をご紹介しましたが、今回は「書体の要素」をちょっとした例え話と画像を用いてご紹介します! フォントにも家族がある デザイナーが書体を語る上で、まず知っておきたい言葉「フォントファミリー」 書体の太さ・傾き・字幅が異なっても、書風に一貫性のあるフォント群をまとめて「ファミリー」と言います。 そう、書体にも家族があるんです!次の画像はヘルベチカファミリーの一例です。 そんなフォントファミリーの特徴をWebNAUTにちょこちょこ登場しているキャラクター「ウェブノートくん一族」に例えてご紹介します。 太さ(ウェイト) 同じ書風で太さに変化をつけた書体を用意することをウェイト展開といいます。いわば体重ですね。 シンくんはガリガリタイプで、レギュラー・ブックくん

    新人くん、これわかる!?書体の要素が手っ取り早くわかる例え画像 | WebNAUT
  • あなたは見分けられる!?定番フォント代わりに使えるGoogle Fonts 27書体 | WebNAUT

    ※この記事は2014年1月6日に執筆された記事です。現在は内容が異なる可能性があります。 あけましておめでとうございます!定番フォントを愛してやまない、デザイナーのタカハマです。今月からTypeSquareの「MORISAWA PASSPORTプラン」が始まるようで、国内サイトでもWebfontの使用が一気に増えそうですね! そこで今回は、WebNAUTでも使用しているWebfontサービス「Google fonts」から、定番フォントの代わりに使えそうな書体をリストアップしました。 定番フォントをカタチ別にピックアップ 今回は定番フォントの偏りを防ぐために、誠文堂新光社「ABCのみほん〜かたちで見分けるフォントガイド〜」を参考に次のようなカテゴリで分類させて頂きました。 Historical Script 歴史的書体 Serif セリフ書体 Hybrid ハイブリッド書体 Sans Se

    あなたは見分けられる!?定番フォント代わりに使えるGoogle Fonts 27書体 | WebNAUT
  • 一度書いたコードは二度と探さない!スニペットを究めて快適コーディング!【HTML, CSS, JavaScript】 | WebNAUT

    一度書いたコードは二度と探さない!スニペットを究めて快適コーディング!【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか?「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう! スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための

    一度書いたコードは二度と探さない!スニペットを究めて快適コーディング!【HTML, CSS, JavaScript】 | WebNAUT
  • 【業務効率が変わる!】こんな時に役に立つ「正規表現」の使い所 | WebNAUT

    ※この記事は2013年7月10日に執筆された記事です。現在は仕様が異なる可能性があります。 大変です! あなたは、公開間近でクライアントから少々面倒な修正依頼を頂きました。 対応したいのですが、大型案件の為、納品するページ数は膨大にあり、該当する箇所がどれほどあるのか想像がつきません。 さて、この場合どのような対応がベストでしょうか? 今回は、ベストな対応をしたい方の為に便利な正規表現の使い所をご紹介します。 公開間近でクライアントからこんな修正依頼が、、、 クライアントから下記の修正依頼を頂きました。 該当するページ数は未だ不明ですが、調査対象は明日公開予定の膨大な数のHTMLファイルです。 1. ¥を円の表記に統一(¥9,000→9,000円) 2. 「しております」「してます」を「しています」に統一 3. 外部リンクのaタグは別窓指定 4. 素材と販売元の行を入れ替える 5. 最後の

    【業務効率が変わる!】こんな時に役に立つ「正規表現」の使い所 | WebNAUT
  • 1