プログラマーにおすすめのATOMパッケージ | コムテブログ

2017/04/03 113 users プログラマー おすすめ

作成：2017/04/3 更新：2017/04/03 Tool 以前、ATOMの基本操作を Atomひと通りの使い方（Windows・Mac編） に書きましたが、今回はATOMおすすめのパッケージを追記。メジャーなパッケージは除外してます。 マークダウンのアウトラインを自動生成 マークダウンのヘディング(h2/h3など)を読み取って、アウトラインを右側に表示してくれるパッケージ。表示されたインディ... 続きを読む

CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10 | コムテブログ

2016/11/27 111 users CSS テキスト Bac エフェクト 透過処理

作成：2016/11/28 更新：2016/11/28 Web制作 ここ最近画像や動画を使ったエフェクトも増えてきましたが、シンプルにテキストだけ動かしたりデコレーションすると結構洗練された見え方になります。もちろん画像や動画の上に動きのある文字を配置しても面白いです。ということで今回はCSSのみで実現するテキストを動かしたり飾り付けたりするコードをまとめました。 透過処理で文字のくり抜き bac... 続きを読む

最高にわかるChromeデベロッパーツールの使い方(チートシート付き) | コムテブログ

2016/07/10 161 users Chromeデベロッパーツール デベロッパーツール 簡潔

作成：2016/07/11 Tool 初めてデベロッパーツールを触る人でも分かるように、簡潔・シンプルに書きました。画像付きのチートシートのようなものですね。今回は初心者の方向けということでChromeデベロッパーツールの入門編。Chromeは最新版です。 設定 背景色を黒にする タブの幅を変える エディタ エディタとして使う ローカルファイルのコードを整形する コンソール ログの閲覧・JavaS... 続きを読む

意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ | コムテブログ

2016/02/07 461 users jQuery pocket CSS エフェクト 一味

CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。 セグメンテッド コントロール pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール（Segmen... 続きを読む

それなりに使える、Web制作者がお世話になる便利ツール | コムテブログ

2016/01/04 581 users 便利ツール WEB制作者 お世話

毎回使うわけではないけれど、いざとなったら意外と役に立つもの。今回はディレクターからコーダーまで「それなり」に使えそうなツールをまとめました。作業労力を軽減してくれる系です。 便利なツール ロゴの特許、商標の検索 キーワードを入力すると登録番号・出願・商標・出願人・登録日の他、ロゴイメージなどを見ることができるサービス、特許情報プラットフォーム。ロゴを作成し商標登録後はここでチェックしておきたいで... 続きを読む

プログラミングやコーディングを学習したい人に役立つツール | コムテブログ

2015/11/16 300 users コーディング プログラミング コレ 最初 ツール

初心者の生徒さんに「どうやったらコーディングできるようになりますか、最初に何を準備するとよいですか」と漠然と質問されることが多いので「一番最初は何を使って、どう設定するとよいのか」簡単にメモしておきます。 また「○○の時は何を使う、これで練習する」といった感じで決めておけば、コーディングも楽になるかと思います。今回は「最初はコレ！」といった感じで選抜してみました。初心者の方向けの記事となります。 ... 続きを読む

1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ | コムテブログ

2015/08/10 941 users チートシート 完結 ワンクリック テンプレート WEB制作者

ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 もくじ WordPress版 受託用マニュアル １．ヒアリングシート ２．WP版ホームページ制作の流れ ３．WordPress管理マニュアル ４．WP版品質チェックシート ５．... 続きを読む

Webデザイナー必見、実務で役立つ逆引きレイアウト集 | コムテブログ

2015/07/21 216 users 実務 Webデザイナー必見

オシャレなレイアウトやユーザーが使いやすい配置を実現するには、どのようなことに気をつければよいのか。クライアントの要望に合わせてアイデアを出したいとき、レイアウトで困った時に読んでおきたいメモ。イメージが湧きやすいように、国産サイトを多めにピックアップしました。 もくじ １．視線を停止させたい ２．上質さを出したい ３．静寂さを出したい ４．親しみやすさ を出したい ５．文字の存在感を出したい ６... 続きを読む

これからGit を始めてみようという人のための使い方と入門フロー | コムテブログ

2015/06/08 162 users Git キット GUI コマンド 筆者

Git（ギット） でどういったことができるか、メリットなどは結構知っている人が多いと思うので、ここでは「コマンドやGUIなどの初歩的な部分だけを１日で使える」ようになるためのフローをポイントだけメモしておきます。 内容は知っているけど実際に使っていない人、筆者のような超初心者、分厚い本を読むのが苦痛な人、すぐに使いたいのでポイントだけサクッと教えて欲しい人対象となります。 もくじ 準備 準備する物... 続きを読む

今っぽくなった！トレンドをおさえたjQuery プラグインまとめ | コムテブログ

2015/04/06 397 users トレンド ヒップアップ マイクロインタラクション 細部 粘性

トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピップアップ。 もくじ マイクロインタラクション １．粘性 ２．移動するプレースホルダー ３．滑らかにページ移動させる ４．パスワード強度を可視化 ５．オートコンプ... 続きを読む

Web制作者はおさらいしたい！CSSの勉強になる実用的な基本テクニックまとめ | コムテブログ

2015/03/22 615 users CSS 勉強 WEB制作者

実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済むCSSテクニックなどをまとめました。今回はWeb制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 もくじ 画像 １．画像の下にできる隙間をなくす ２．画像の下にテキストが回り込まないようにする ３．floatを使わずに横並び ４．デバイスによって、画像を変更する ５．画像の上に文字を配置 ６．鏡像 マ... 続きを読む

ここまで動かせる！楽しいcss アニメーションのサンプル集 | コムテブログ

2015/03/16 147 users アニメーション サンプル集 Flash CSSアニメーション

小気味よいアニメーションを用いたWebサイトを国内でも多く見かけるようになってきました。CSS3により画像編集やFlashが減りメンテナンス性も向上しています。2015年もアニメーションを取り入れるサイトは増えていくでしょう。 今回はCSSアニメーションを使って、面白い動きができるコードをご紹介します。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 もくじ エフェクトサンプル １．ア... 続きを読む

Web制作に使える！オシャレなサイトに見せるためのCSSやjQueryプラグインまとめ | コムテブログ

2015/03/02 386 users CSS インタラクティブ jQueryプラグインまとめ

今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。 もくじ インタラクティブ １．クリック時のエフェクト ２．フォームクリック時のエフェクト ３．テキストに１１種の動きを出すエフェクト ４．分離するエフェクト フルスクリーンの見栄え... 続きを読む

意外となかった！Web制作者が助かるヒアリングシートや問い合わせ返信に使えるテンプレート | コムテブログ

2015/01/04 515 users テンプレート ヒアリングシート WEB制作者

遠方のお客様からのサイト制作依頼、メール問い合わせがあった時に、どんな内容を返信すればよくて、どんなことを聞いておけば概算見積もり（初期費用・ランニング費用）を作りやすくなるのか。ヒアリング時も、ある程度聞き出したい。 ネットや本でも意外と「具体的な例」がないなぁと思い、今回はコーポレートサイトやECサイト制作依頼があった時に、メール返信や、最低限クライアントに聞いておきたいことや尋ね方をまとめま... 続きを読む

綺麗な動きになった！Web制作前に見ておきたいjQueryプラグインまとめ | コムテブログ

2014/12/07 344 users jQueryプラグインまとめ

比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キュー... 続きを読む

知っておくと便利！あのサイトでさりげなく使われていたCSS小技集 | コムテブログ

2014/11/09 651 users CSS小技集

今回はCSSのみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたいCSSテクニックです。 もくじ 画像 １．キュレーションサイト風のランキングボタン ２．画像の右上に三角形の要素を配置する ３．透過ネオンカラー ４．画像の表示範囲を指定 ５．透過させながら画像を合成する ６．マスクをかける 簡単に要素を並べる ７．左右に分割して区切り線... 続きを読む

デザインセンスが上がった！レイアウトに詳しくなるまとめ | コムテブログ

2014/10/27 217 users レイアウト デザインセンス 余白 対称 見栄え

どうすれば初心者でも「分かりやすく見栄えのするレイアウト」を作ることが出来るのか。余白の使い方や知識、さまざまなレイアウトの例をご紹介させていただきます。闇雲な配置にならないように、レイアウトを組む前に読んでおきたいこと。今回はWebデザインのセンスを上げるために、イラストや構図から学べる知識をまとめました。 もくじ レイアウトの基本知識 １．分割、対称、軸 ２．イラストから学ぶ構図 ３．ダイナミ... 続きを読む

今風になった！Web制作で使える最近のjQueryプラグインまとめ | コムテブログ

2014/10/14 762 users jQueryプラグインまとめ Web制作

比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。 もくじ 動き １．ジオメトリック 背景 ２．フルスクリーンでスライドさせる ３．ドロアー風ライトボックス ４．動画を... 続きを読む

Webデザイナーが捗る！知識を増やす最近のトレンドまとめ | コムテブログ

2014/09/29 395 users Webデザイナー トレンドまとめ 知識

Webデザインの流行りを知るために、トレンド感のある配色や洗練されたレイアウトをつくり上げるために、知っておきたいことや方法など。他に、Web制作において今後積極的に挑戦してみたいものをまとめました。 もくじ 配色 １．ネオンカラー ２．washed out＋パステルカラー ３．グラデーション ４．マテリアルデザイン 模様 ５．ジオメトリー／幾何学模様 背景 ６．背景色を時間の経過で変化させる ７... 続きを読む

起業するときに助かる！Web制作者が独立するために必要なまとめ | コムテブログ

2014/09/15 425 users WEB制作者 まとめ

筆者が起業するまでに必要だったことや流れ。今回は簡易的な情報となっていますが、知っておくとフリーや起業前に役に立つことをまとめます。起業から少し時間が経ったので記憶があいまいですが、ざっくりとした流れと気をつけておきたいことをメモしています。 もくじ 創業前に準備すること １．定款作成前 ２．税金・経費 ３．会計・帳簿 ４．事業計画書／補助金 ５．事務所改装確認事項 ６．登記申請に必要な定款の内容... 続きを読む

Web制作で使えた！jQueryプラグインまとめ＋起業しました | コムテブログ

2014/08/31 447 users Web制作

報告が遅れましたが、5月に退社し6月に起業（株式会社コムテ）しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブログを見てくださっている皆様、ご紹介させていただいたサイト運営者様、応援して下さっている皆様には心よりお礼申し上げます。経営や制作の部分ではまだまだ未熟ですが、今後ともご指導ご鞭撻のほど、よろしくお願いします。 今回は「We... 続きを読む

メモしておきたい！サイト制作時に知っておくと「意外」と役に立つこと | コムテブログ

2014/08/04 281 users サイト制作時

今回はサイト制作において毎回使うこと、意外と面倒で忘れがちなものをメモしておきます。事前に知っておくことで効率的にコーディング、納品できると思います。 もくじ ドメイン＋サーバ １．独自ドメインでHPとgmail を運用させるまで ２．コマンド ３．IP制限 CSS ４．画像の回り込み ５．marginの相殺 ６．ショートハンド ７．ビューポート設定 ８．IEでCSS3を再現 IE対策 ９．fil... 続きを読む

知っておいてよかった！Web制作時に効率上げる「便利」なCSSテクニック | コムテブログ

2014/07/14 553 users CSSテクニック Web制作時 マルチカラム 半透明 段組み

少し前にサイト制作でさりげなく使われているCSSテクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。 もくじ 画像 １．ブレンドモード ２．表示範囲 ３．透過＋合成 ４．半透明 エフェクト ５．マウスオーバーアイデア一覧 ６．CSSのみでメニューアイコン 段組み ７．マルチカラム ８．段の表示順 ９．コンテンツ流し込... 続きを読む

センス上がった！タイプ別に分けたWebデザインの参考になるサイトまとめ | コムテブログ

2014/06/30 606 users センス webデザイン 参考 タイプ別 コーポレートサイト

サイトのデザインセンス、または操作性などが良いのか悪いのかわからない。 オシャレで洗練されたデザインにするため、少しでもセンスを上げるために色々なサイトをチェックしておきたい。 今回はただWebデザインギャラリーサイトを紹介するのではなく、ページ別・職種・動き・制作別など「サイト制作時に役立つ」くくりでまとめました。コーポレートサイトやECサイト・自社サービスのデザイン考えるとき、提案前に一度は見... 続きを読む

デザインのレベルを上げる！レイアウトやタイポグラフィに関するまとめ | コムテブログ

2014/06/16 473 users タイポグラフィ フォント 名刺 レイアウト 基礎

先日名刺の入稿用データを作成していたのですが、印刷物用のデザインは慣れていなかったので結構時間がかかってしまいました。Web関係の知識だけでは、綺麗な制作物は出来ないと思い、総合的なデザインができるようにデザインの基礎を勉強。今回はWeb関係者も知っておきたい、タイポグラフィやフォントに関する知識をまとめました。また使う機会があるかもしれないので、メモしておきます。 もくじ レイアウト １．アクテ... 続きを読む