Webデザインに欠かせないPhotoshop。Photoshopには便利なプラグインがたくさんあり、作業に応じて使いわけることでWeb制作が爆速化します！プラグインを使えばガイド引き、レイヤー編集、レイアウト作成などを助けてくれるので、作業が通常の何倍も捗るでしょう。 そこで今回は、Web制作を爆速化して作業時間を短縮してくれる、無料のPhotoshopプラグインを16個まとめてご紹介します。使ってみて損があるどころか、使わないと人生の時間を損するレベルのプラグインたちです！

2015年9月24日 便利ツール 巷ではgulpやGruntなどを使ったスタイルガイド生成ツールが多く存在します。しかし、CSSのコメントに書き込んだりするのはWeb制作者でないと難しい部分もありますし、そもそもファイルを作るのがめんどうだったり…と、なかなかスタイルガイドを作る気になれない人もいるんじゃないかと思います。今回は非Web制作者でも簡単にスタイルガイドが作れちゃうFrontify Style Guideを紹介します！ ↑私が10年以上利用している会計ソフト！ スタイルガイドとは？ Webサイトを一人で制作、運営している場合、そのサイトに必要な画像やロゴ、配色パターンなどはすべて自分が把握できているものです。しかしチームを組んで運営していく場合は、コーディング規約と同様、デザインのルールをひとつにまとめておくといいでしょう。そのルール集がスタイルガイドです。スタイルガイドを作る

Windows の Git クライアント SourceTree がいい感じです。 私はこれまで、Windows の Git クライアントは TortoiseGit、GitExtensions、GitHub for Windows などいろいろ使ってきましたが、ようやく SourceTree に落ち着きました。バージョン管理ツールはもっともよく使用するツールのひとつですので、使いやすいものを選びたいですよね。Windows の Git 環境に満足されていない方は、ぜひ試してみてください。 この記事では、SourceTree の良いところ残念なところ、インストール方法を紹介します。 動作確認環境 Windows7 64bitSourceTree1.0.8.0 目次 SourceTree のいい所 SourceTree の残念なところ インストール Git コマンドをインストール Mercuri

本記事では、GUIで操作できるGitクライアントであるSourceTreeを使用し、バージョン管理を行う際に必要なリポジトリの作成やリポジトリへのファイルの追加/削除、コミットといった基本的な作業について説明します。 【連載】SourceTreeで始めるGitバージョン管理入門 第1回：リポジトリの作成と基本的なバージョン管理 第2回：タグとブランチ 第3回：国産のGitリポジトリサービス「SourceForge.JP」 本記事について 本記事は、2014年10月22日にソフトバンク クリエイティブより発売された書籍「デザイナーからプログラマーまで 絶対わかるGitバージョン管理」から、「第2章 バージョン管理はじめの一歩」の一部を抜き出し再構成したものです。 なお、本書の解説ではMac OS X版のSourceTreeを使用していますが、Windows版の場合でも同じ操作で作業を行うこと

Paste and Indent JavaScript & CSS CDN Suggestions scriptタグやstyleタグを書くと、CDNが使えるJSファイルやCSSファイルの名前を提案してくれ、選んでいくだけでCDN呼び出しタグを書くことができます。これがあると、ネットで探し回る必要ないかも。 Brackets Extension: CDN Suggestions CDN Finder jsDelivrで公開されているCDNを検索し、URLを手軽に取得することができます。 CDN Finder Autoprefixer 名前の通り、ファイルの保存時に自動でプレフィックスを付与する拡張です。 Can I Useの情報から判断して、不要なものは取りのぞいてもくれます。 機能を有効にするには、「編集」メニューから「Auto prefix on save」にチェックをしておく必要があり

【2015年6月11日 追記】file_get_contents()の使い方に注意しよう 重要なことでしたので追記します。こちらの内容はコメントにて教えていただきました。教えていただかなかったら全く知らない事実でした…本当にありがとうございます！ file_get_contents()は「allow_url_fopen =off」のサーバー環境では動いてくれない APIを取得する際に使用しているfile_get_contents()というPHPの関数には注意が必要です。まず、その関数が動かない環境があるということ。file_get_contents()を使うにはサーバーの「allow_url_fopen」の設定をONにする必要があります。もし設定がOFFになっている場合はfile_get_contents()が使えません！ ONにする方法としては以下の記事がわかりやすくまとめてくれていまし

サイトデザインをする上で、デザインがワンパターンになったり、煮詰まったりすると思います。そんな時、Instagram を使わない手はありません世界中のインスピレーション溢れるアート系の発信やデザイン系のイメージがたくさん参照できます本記事ではデザインのヒントになること間違いなしの海外のアートデザイン系の Instagram アカウントをご紹介します。

最近色んなところでBrackets使ってますの声を聞けて嬉しい感じなんですが、Bracketsのアドベントカレンダーも余裕で挫折しているのでまた仕切り直して、せっせと紹介記事書いていきますね。今回は新しく知った拡張機能のなかでコーディング関連のものを紹介します。これまでの紹介したものはいくつかありますので見てみてくださいー。 Bracketsだって激しく進化してますよ！メインエディターとして1年使ってみて – WEBCRE8.jp PSDデザインカンプからのコーディングに超便利！Extract for Brackets – WEBCRE8.jp SVGをBracketsで使用・作成・編集するのに便利な拡張機能 – WEBCRE8.jp Brackets CSS Class Code hint 便利過ぎワロタ系のやつです。編集中のHTMLが読み込んでいるCSSのセレクターに書かれているcla

作成：2015/03/2 更新：2016/06/29 Web制作 > 今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。 エンジニア速報は Twitter の@commteで配信しています。 もくじ インタラクティブ １．クリック時のエフェクト ２．フォームクリック時のエフェクト ３．テキストに１１種の動きを出すエフェクト ４．分離するエフェクト フルスクリーンの見栄えをよくする ５．フルスクリーン 縦スライド３つ ６．全画面+オーバーレイ ７．フルスクリーン背景＋ローディング ８．写真から背景色を抽出 ９．background-size 対策 ドロワーメニュー １０．ドロワーメニュー３つ スクロールエフェクト １１．スクロ

CSS Sprite Maker is a freeware Windows application that combines different images into a single image for use in modern web design and generates relevant CSS. Using CSS Sprite Maker is very simple. Just select the different icon images you want to join, tweak the options as per your need and hit the Generate button. It will make a single transparent PNG from the icons and generate necessary CSS an

本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、「Adobe Dreamweaver CC」（以下、Dreamweaver）をメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。さまざまなモダンな技術としては、「Sass」「Compass」「Emmet」（旧、Zen-Coding）を想定している。 今回は、Dreamweaverの概要と最新版Dreamweaverの新機能、WordPressの概要、Dreamweaver＋WordPressの環境構築を行う際に必要な初期設定などを紹介していこう。 そもそもDreamweaverとは、なぜDreamweaverを使うのか DreamweaverはWebサイト／Webアプリケーションの制作ツールだ。HTMLエディタという見方をすれば非常に動作が重そうで、他の軽量なエデ

Photoshopは標準機能だけでも便利なツールですが、もっともっと便利になる機能拡張やアクションを紹介します。 定番として入れておきたいものから、特別な使用シーンに使うものまで、優れ物ばかりです。 Photoshopでのガイド引きに欠かせない強力な機能拡張 定番のGuideGuideは3.1.2にバージョンアップ 幅の異なる複数のガイドを一気に作成できる優れ物 Photoshopのスウォッチをフォルダで管理 カラーピッカーを開かずにカラーのコードを簡単コピー 複数のさまざまなオブジェクトのカラーを一元管理 手元の画像からシームレスなテクスチャを1クリックで作成 ビットマップのオブジェクトをベクターに変換 画像にパースをつけてかっこよく見せる パラグラフのレイアウトを段組みに変更 要素のサイズやエフェクトやフォントなどの情報を書き出す エレメントやマージンのサイズを書き出してくれる 黄金比

3media.biz 2023 著作権. 不許複製 プライバシーポリシー

Cドライブの肥大化の原因を追究するために、C:\Windowsフォルダのサイズなどを調べていると、C:\Windows\winsxsが大きな領域を使用していることがあります。WinSxSはWindows コンポーネントストアディレクトリでサービシング処理に使われており、これにはWindows更新プログラム、Service Pack、修正プログラムなどが含まれています。 WinSxSフォルダ内にはハードリンクが置かれており、これらを削除することはWindowsを不安定にする危険性が高いため推奨されません。そこで今回はWindowsのService Packを恒久化することで、WinSxSの容量を減らしたいと思います。 Service Packのインストールを恒久化することで、Service Packファイルに使用されている領域を再利用することができますが、Service Packを恒久化した

どうすれば GW をゴールデンに過ごせるか、思案中のLatinです。 今回はスマートフォン対応プラグインの良し悪しについて。 WordPressのスマホ用プラグインは結構な数ありますが、結局の所、「いっちゃんいいヤツ」ってどれだろう？とふと思い立ち、勝手ながらカンタンに考察をまとめさせていただきました。 他にも、こっちの方がいいよ！こんなプラグインがあるよ！とかありましたらぜひ教えてください。 まずは、よく使われている5つのプラグインを比較 Ktai Style いわずと知れた有名プラグイン。サイトを携帯電話（ガラケー）対応させるプラグイン。 ガラケー人口って意外にまだまだ多いんですよね。 Ktay Style WPtouch こちらも有名プラグイン。 手軽にサイトをスマートフォン対応できます。 「メニュー」をタップするとタグ、カテゴリー、RSSフィード等のタブメニューが展開されます。 W

[Å]【保存版】ブログを効率良く書くために超便利なブログツールまとめ

※この記事では「Webデザイナー」は、「ノンプログラマ」の意味で使っています。 psd、ai などの材料データの管理ではなく、サーバーにアップするファイルの管理の話です。 サルでもわかるといわれても、やっぱりわからない・・・ Web制作をやっている人は、少なからずバージョン管理システムの話を聞いたことがあると思います。 特にGit（ギット）っていうのは、内容まで知らなくても名前くらいは聞いたことがありますよね。 で、ネット上ではバージョン管理システムのメリットに関するブログ記事なんかもたくさんあって、変更履歴をたどれるとか、複数人で同じファイルを修正したりといった時のトラブルに対応できるとか、なんか便利そうだなーとは思っていたわけですが、ずーっと導入は見送ってきました。 その理由は・・・ 「Git入門」とか書いてある記事を読んでも導入方法が書いてあるだけで、実際に使うシチュエーションが思い