Tips

safariで自動再生の動画が再生しない場合の対処方法

自動再生されるはずの動画が、safariで自動再生されない場合はsafariの設定が必要です。 環境設定から「webサイト」タブを選択して左のメニューから「自動再生」を選択します。 特定のサイトを許可する場合はそのサイト  >>続きを読む

WordPress固定ページにカテゴリを設定する

WordPressの固定ページの編集画面にはカテゴリの設定がありません。 固定ページにもカテゴリを設定したい場合は別途functions.phpに記述が必要です。 functions.phpに下記の記述で固定ページ編集  >>続きを読む

リクルート A3RT Image Search APIを活用した画像検索

リクルート A3RT Image Search APIを活用した画像検索を作成しました。 あまり精度はよくないと思いますが、遊んで見てください。 Image Search APIを活用した画像検索

NTT docomoの雑談対話APIを使ったAI Bot

NTT docomoの雑談対話APIを使ったAI Botを作りました。 AI Bot 雑談(NTT Docomo API) 投げかけた言葉に返事が返ってきます。ピント外れな内容もありますが、普通の雑談のように時々話題を変  >>続きを読む

NTT docomoの知識Q&A APIを使ったbot作りました。

サンプル置き場にNTT docomoの知識Q&A APIを使ったbotのサンプルを置いておきます。 遊んでみてください。 デモ

jQueryで動的に高さを取得するときにハマる問題点

jQueryでブラウザのスクロール量を取得するには、スクロールすると発生する「scrollイベント」と「scrollTop()メソッド」を使うことで値を取得することができます。 また、ある要素の位置を動的に取得することは  >>続きを読む

WordPress子テーマ作成のポイント

WordPressのテーマには様々なものが無料、有料を問わず存在します。これらを上手に活用してサイトを作成することはそのサイトの成功に繋がるでしょう。なぜなら、デザインをあれこれ迷ってテーマを一から作ることは時間の無駄で  >>続きを読む

slickの使い方〜jQuery

レスポンシブ対応のカルーセルを導入したい場合にjQueryのプラグインでslickがあります。 受講生の作品づくりにも人気のものですが、なぜか導入が上手くいかないという質問が多いので導入方法を書いておきます。 上手くいか  >>続きを読む

DreamweaverCCのFTP機能でファイルサイズや修正日が表示されない時の対処

DreamweaverCC(2017.5)のFTP機能ではファイル名とフォルダ名しか表示されてなく、ファイルサイズや修正日が表示されていません。 旧来のようにこれらの情報を表示させる方法です。 次の画像がDreamwea  >>続きを読む

リクルートA3RTを使ったAI Bot

リクルートA3RTを使った簡単なAI Botを作成しました。サンプル Sample置き場に置いていますので、暇なとき会話してみてください。

クリーンインストールしたMacOS “High Sierra”にSophos Home導入の注意点

Sophos Homeは無償マルウェア対策でMacで手軽に使用できるものです。 MacOS High SierraにSophos Homeを導入する場合、ちょっとわかりにくかったので書いておきます。 システム環境設定の「  >>続きを読む

PhotoshopCCの画像アセットの生成機能の使い方

PhotoshopCCの画像アセットの生成を使えば、カンプを作成する最中にWebで必要な画像がどんどん書き出される便利な機能があります。これを使うとスライスの必要がほば無くなります。 今回の例はPhotoshopCC20  >>続きを読む

Photoshop レイヤーマスクと選択範囲作成小技

人や動物の選択を行う方法です。 ペンツールのパスで大まかに選択してレイヤーマスクを作成 パスを選択範囲に変更するにはctrl(command)+return 毛並みなど複雑なところは色域指定など使って別途選択範囲を作成   >>続きを読む

アスペクト比を保ちながら拡大縮小できるブロックの作成

レスポンシブサイトを作成するときに、アスペクト比(縦横比)を保ったまま拡大縮小するブロックを作成したい場合があります。簡単そうで結構ハマるところです。 今回はアスペクト比を保ちながら拡大縮小できるブロック領域の作成テクニ  >>続きを読む

Mac Retina ディスプレイでPhotoshopの作業を行う時に解像度を変更する方法

最近のMacBook ProなどはRetina ディスプレイが標準になってきています。Retina ディスプレイでは解像度が驚くほど高くなっていることが売りです。 そしてこれまたRetina対応したPhotoshop(C  >>続きを読む

Photoshopで作成した複数のシェープのパスをつなげる方法〜PhotoshopCC2017

Photoshopでシェープを作成した後に複数のシェープのパスをつなげることができます。PhotoshopにもIllustratorのパスファインダーのような仕組みが用意されています。 複数のシェープを作成するとその数だ  >>続きを読む

animate()メソッドのプロパティの値に「toggle」キーワードを使うと便利〜jQuery

jQueryでスライドして表示非表示を切り替えるにはslideDown()やslideUp(),あるいはslideToggle()などのメソッドを使用することで簡単に実現できます。簡単で便利ですから頻繁に活用されるものと  >>続きを読む

Illustratorのカラー設定

Illustratorのファイルを渡されて、カラーピッカーを使って塗りや線の色の設定を行おうとしても色が着かない場合があります。 ドキュメントのカラーモードでRGBを選択しているにも関わらずカラーピッカーで選択した色にな  >>続きを読む

Photoshop 文字パネルの初期化

Photoshopの「文字ツール」で入力したテキストのトラッキングや垂直比率などを変更すると、次回また文字ツールを使用した場合に前回設定したトラッキングの値がそのまま適用されてしまいます。 テキストを入力したら基本的には  >>続きを読む

Adobe CC 2017のPhotoshopとIllustratorの新規ドキュメントを速く開く

Adobe CC 2017のPhotoshopとIllustratorで新規ドキュメントのダイアログが開くのがモタモタしていて嫌なのです。 それくらいシャキッと開けよ、余計な事はしなくて良いから!と思いませんか。 早速環  >>続きを読む

phpMyAdminのログインをする方法〜MySQL

初期状態のphpMyAdminでは新規ユーザーを作成した後で、再びphpMyAdminを開いてもログイン画面が出てくれません。そのため、作成したユーザー権限でphpMyAdminに入れなくて困った方も多いのではないでしょ  >>続きを読む

CSSのメディアクエリの記述をSassのmixinでまとめました

iPhone5〜7に対応したCSSメディアクエリをSassの@mixinにしました。 GitHubに置いていますので、下記アドレスからファイルをダウンロードしてください。 https://github.com/haido  >>続きを読む

not(“:animated”)とstop()の使い分けについて〜jQuery

not(“:animated”)とstop()の使い分けについて説明します。 :not(:animated)は、アニメーション中ではない時にアニメーションの命令を受け付けることです。 従って、現在  >>続きを読む

Windows10にしたらXAMPPのApacheが使えなくなる現象

OSをWindows10にバージョンアップしたらXAMPPのApacheが使えなくなりました。 これはWindowsがデフォルトでポート80を使用しているためです。 原因 Microsoft Internet Infor  >>続きを読む

:nth-child練習ページ・jQueryセレクタ練習ページ作成しました。

:nth-child練習ページとjQueryセレクタ練習ページを作成しました。 :nth-child練習ページの使い方 :nth-child練習ページ Lesson1 li要素を10個用意しています。 各li要素はfle  >>続きを読む

CSSのpositionでtop bottom left right全て指定した結果

CSSでpositionプロパティでabsoluteを指定した上で座標の指定をtop bottom left right と四方向すべてに対して行ったとしたらどうなるでしょうか。 結果はサンプルのとおりになります。 to  >>続きを読む

さくらサーバーの日本語Webフォントを使う方法と本文に対応させる方法

さくらのレンタルサーバでなんとモリサワの日本語Webフォントが使えるサービスが始まりました。 とりあえずはWordPressのプラグインで使えるようになっています。(月間PV2.5万以下が対象ですが、現在(2016/7)  >>続きを読む

PhotoshopCC(2015.5)選択とマスクのワークスペースを使う

PhotoshopCC(2015.5)の新機能「選択とマスク」を使うと細かい選択作業が軽減されます。 今回は朝顔の写真と青空の写真を「選択とマスク」を使用して合成します。 完成例 元写真(朝顔) 元写真(青空) 旧バージ  >>続きを読む

Photoshop CC 2015.5の「ゆがみ」を使う

Photoshop CC 2015.5の「ゆがみ」で人物の顔を修正してみたところ、これは優れものです。 あまりにも簡単な操作で良い結果を得ることができます。 画像をPhotoshop CC 2015.5で開いたら、メニュ  >>続きを読む

Bracketsの使い方

Sublime Text だの Atom だの便利なエディタがほとんど無料で使用できる中、Dreamweaverの存在価値が無くなってきていました。 そんな中突如 Dreamweaver CC 2017(Beta)が姿を  >>続きを読む