JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。 この記事で学べること デベロッパーツールの使い方 JavaScriptのブレークポイ

2016年11月7日 便利ツール 数日前Adobeのエディターツール、Dreamweaver CC 2017が新機能とともにリリースされました。過去にDreamweaverからCodaに乗り換えた私ですが、苦楽をともにしてきたCodaさんがどうもアップデートのたびにプラグインがうまく動かないなど、使いづらくなってきて…。そんな時に新生Dreamweaverの情報を耳にしたので、さっそく試してみました。 ↑私が10年以上利用している会計ソフト！ Dreamweaver CC 2017をインストール Adobeのツールはサブスクリプションモデルなので、Creative Cloudに契約する必要があります。Photoshop CCやIllustrator CCなど、多彩なAdobeツールが使い放題のコンプリートプラン（月額4,980円）、Dreamweaverのみ利用できる単体プラン（月額2,1

レスポンシブイメージ、使ってますか？ ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。 そ・こ・で！ 本日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも！アートディレクションまで自動化できるんです。 ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基本的な考え方、それから自動化について書いてみます。 では、行ってみ

CakePHPに限らず、自作でCMSを作っているとブログのように自由にフォントカラーを変更したい、自由に好きな箇所に画像を入れたいなどまるでWordPressの記事投稿のように行いたいケースもあるかと思います。 そこで大変便利なのがCKEditorとCKFinderです。 CKEditorはJavascriptベースで動き、まるでブログCMSのようなプラットフォームを提供してくれます。 これだけすぐれたUIでしかも無料なので　使わない手はありません。 CakePHP以外にも使えるよ CKEditorはCakePHPはもちろん、WordPressやEC-CUBEなんかにも導入できます。CakePHPに導入するのはあくまでも一例にすぎません。

いまやウェブ制作に欠かせない、Font Awesomeですが、500アイコン以上あるので、なかなか探すのも大変です。 公式サイトで、アイコンを検索できますが、あまり一覧性が高くないので、このページで、オリジナルのアイコン検索を作成しました。アイコン名から検索するほか、サイズを指定したり、回転したりと、アイコンをカスタマイズできます。 以上です。 ここから下は、Font Awesomeの基本的な使い方などについて紹介します。 Font Awesomeとは Font Awesomeは、500以上のアイコンが利用できる、オープンソースのアイコンフォント（ウェブフォント）です。 無料で利用でき、導入も非常に簡単です。ファイルをダウンロードしてサイトに組み込むこともできれば、CDNでも配信しているので、CDNのパスを取得して、ページに貼り付ければ、すぐに利用することもできます。Bootstrapとの

CSSアニメーションは直感的じゃないから作りづらい CSSでアニメーションを作るとき@keyframesを使います。オブジェクトを拡大縮小するアニメーションなどは次のようなスタイルで指定します。 @keyframes scale-anime { 0% { transform: scale(1); } 33% { transform: scale(2); } 66% { transform: scale(0.75); } 100% { transform: scale(1); } } .el { animation: scale-anime 1s linear; } Web開発者にはお馴染みのChromeデベロッパーツール。デベロッパーツールの機能の中に「Animations」があり、CSSアニメーションのテンポや尺(時間)を調整できます。 まずは、作成したアニメーションをChromeで表示

Webサイトを構築する上で、必ず行うべきことの一つがサイト競合分析です。 なぜか？ネット上では「比較」という行為がほぼ確実に行われるからです。 ネットリテラシー向上、タブブラウザの普及、比較サイトの拡大などによりユーザにとって比較という行為は、ネットを使う上で一般的なものとなりました。 そんな中で、競合分析をせずにWebサイトを構築したらどうなるでしょうか？ 自分たちではベストだと思って作ったものが、実は他社サイトよりも劣っていたとしたら？ 今回はそんな状況にならないために、弊社が実際にサイト構築を行う際に、事前におこなっているサイト競合分析手法をご紹介します。 それではいってみましょう。 ※今回ご紹介する競合分析手法は、あくまでWeb上での競合分析手法です。 新興市場でまだWeb上の競合が少ない、またはリアルの現場であたる競合などに対抗する場合はまた別の手法が必要なので、その点予めご了承

ホーム トライアウト TypeSquare Web Font Tryout は TypeSquareで配信されるフォントを使って、 あなたのWebサイトの書体を自由に変更できます。 ページの下にあるフィールドでURLを入力して「Tryout」をクリックすると ご自分のページにTypeSquare を適用した様子を見ることができます。 1フォントの選択 TypeSquareでご利用いただけるすべてのフォントをお選びいただけます。 2一覧・選択履歴からフォントを選択 をクリックすると、書体一覧や選択履歴から書体を選択できます。 3フォントの大きさ、行間の編集 をクリックすると、2つのスライダーで「文字サイズ」と「行間」を調整できます。 4現在のスタイルを保存 ページに適用したスタイルを3つまで保存できます。 ※別のブラウザからは呼び出せません

ここ最近知人に教えるととても喜ばれるので、エントリでも紹介。人を選ぶアドオンだとは思いますが、その道の人には大変役に立つアドオン「Launch Clipboard」です。 Launch Clipboard :: Add-ons for Firefox https://addons.mozilla.org/ja/firefox/addon/7273 やれることはとてもシンプルで、クリップボードに張り付けたデータの中からURLを取り出して、それをタブで開いてくれるアドオンです。URLだけを丁寧に抽出する必要はなくて、適当にコピーしてもURLだけを認識してタブで開いてくれるのが超絶便利。また、URLは「http」形式のテキストと、「<a href=」で始まるリンクタグの両方を使い分けられるのもこれまた便利。 具体的な使い方の例を出すと、たとえばExcelでまとめてあるURLをタブで全部開きたいと

メールやチャットなどでやりとりしたテキストメッセージに複数のURLが表記されていて、すべて閲覧の必要があることがたまにあります。 1つずつページを開いていくのは時間が掛かりますし、あまり数が多いとポチポチクリックして手が痛くなったりしますよね。 そんなとき、クリップボードにコピーしたテキストの中から、URLだけを一気にタブで開く方法があります。 Firefoxの場合はアドオン、Chromeの場合は拡張機能を使って出来ますので、その方法を説明していきます。 Firefoxで複数URLを一気に開く方法 「Multi-Link Paste and Go」というアドオンを使います。 まずはMozillaの公式アドオンサイトで「Multi-Link Paste and Go」をダウンロードしてインストールします。 このアドオンはインストールしてすぐに使用可能で、Firefoxを再起動する必要がありま

説明 Contact Form 7 は複数のコンタクトフォームを管理できてその上フォームとメールの内容を簡単なマークアップで柔軟にカスタマイズしたりもできます。Ajax によるフォーム送信、CAPTCHA、Akismet スパムフィルタリング等々サポートしています。 ドキュメントとサポート contactform7.com では使い方や FAQ など、Contact Form 7 に関する詳細な情報を提供しています。もし FAQ やその他のドキュメンテーションにあなたの疑問の答えを見つけられなかったなら、そのときは WordPress.org のサポートフォーラムをチェックしましょう。既存のトピックを見ても問題解決できなかったなら、新しいトピックを作成してください。 Contact Form 7 はあなたの支援を必要としています 無償配布するプラグインの開発とサポートを継続することはとても

Twitter Analytics（ツイッターアナリティクス）、使いこなせていますか？「Twitter（ツイッター）」でのユーザーの反応は、Webサイトのコンテンツの成果を測るための大事な指標です。 以前は、Webサイトに設置できるTwitterボタンに、そのページのTweet数が表示されていました。それが廃止されたため、その代わりとなるものとして重要になっているのが「Twitterアナリティクス」です。 Twitterアナリティクスでは、自分のツイートがどれほどTwitter上で見られているか、どれほど反応されているか、自分のWebサイトのページがどれほどツイートされているかが分かるため、反響の大きいコンテンツを知ることができます。 Twitterアナリティクスを使いこなして、自分のWebサイトやツイートの効果を測定し、それに基づいてコンテンツの質を改善していきましょう。 この記事は、3

みなさんこんにちは、フォノグラム デザイナーのニッキーです！ 突然ですがみなさんは、自分で書いた手書きのイラストをデザインに使用する際どうやっていますか？ 私は描いたイラストをスキャンしてIllustratorで「ライブトレース」機能を使ってシェイプ化したり… もしくはスキャンしたイラストをそのままペンツールでちまちまトレースしていました。 そんな私だったのですが…神アプリを見つけてしまいました。 もうイラレで人力トレースは不要の時代になったのです！！パスを引く時代は終わったのです！ もし私と同じような工程でイラスト作成をしている方がいたら、ぜひスマホアプリ「Adobe Capture」を試していただきたいです！ Adobe Captureでらくらくベクター化！ Adobe Capture CCって？ Adobe Capture CC Adobe Capture CCモバイルアプリでは、1

ブラウザ上でWeb制作作業を行うことも多くなってきましたが、拡張機能は揃ってますか？DevToolsしか使っていないという方にはこの記事はまさにおすすめ。便利な拡張機能を使って、効率良くWeb制作をしましょう！ FireFoxを使っているかたは、FireFoxの無料アドオンまとめも合わせてチェック！ Chromeおすすめ拡張機能まとめ 25本 Web Developer 定番のWeb開発ツール。javascriptのオンオフや画像の非表示など多くのことができます。 Web Developer Checklist Web開発にやるべきことのチェックリストを作れる拡張機能。タスク一覧が表示されるシンプルなチェックリストです。 Page Ruler コンテンツのサイズをドラッグ＆ドロップで測定できるChrome拡張機能。Webサイトのサムネイルの大きさや、コンテンツの間隔などを測定するときに使っ