Tips

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

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

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)が姿を  >>続きを読む

スターツールがクモヒトデみたいになった場合の対処法〜Illustrator

スターツールには第1半径と第2半径の2つの半径が存在します。 第1半径が星の中心から尖った先までの長さで、第2半径が中心から内側にくびれたところまでの長さです。 command(ctrl)キーを押しながらドラッグすると第  >>続きを読む

Photoshop で動作がおかしい場合の対処方法〜環境設定ファイルの再作成

Photoshopを使用していて何か不審な動きをするときの対処方法です。 Photoshopを長く使っていると、選択ツールやレタッチを行うときに思わぬ挙動をする場合があります。 例えばコピーツールを使用したときに、うまく  >>続きを読む

Google Mapのスクロールを止める方法

Google Map共有機能の「地図を埋め込む」を使って、サイトにMapを表示する場合iframeが使用されます。 簡単に導入することができて便利に使えますのでさまざまなサイトで活用されています。 ところが、ひとつ問題点  >>続きを読む

Git〜リモートリポジトリから必要なブランチをローカルに取得する方法

Gitのリポジトリをローカルにクローンしても全てのブランチが取得されるわけではありません。 そのような場合、どうして必要なブランチをローカルに取り込めばよいかについての説明です。 sourceTreeを使用している場合の  >>続きを読む

MacOS X El CapitanでUSBをフォーマットしてWindowsと共有させる方法

Macで作業を行い、USBを介してWindowsとデータのやり取りを行う場合、USBのフォーマットに注意しないとWindowsでは認識できないことになります。 Mac側でUSBをフォーマットするには、ディスクユーティリテ  >>続きを読む

Macのlibraryフォルダの場所についてちゃんと知っておく

Photoshopのエクステンションを導入するときに 「Library/Application Support/Adobe/CEP/extensions」 にダウンロードしたフォルダを置く事と指示があったりします。 けれ  >>続きを読む

appearanceプロパティについて〜CSS

appearanceプロパティは、ボタンなどの見た目をコントロールするものです。特にスマホサイト作成の時には重宝されることが期待されましたが、主要ブラウザの対応はマチマチで、なおかつW3CのCSS3仕様書から削除されたり  >>続きを読む

WordPressテーマ開発中にvar_dump()の結果をターミナルに表示

WordPressのテーマを開発中にPHPのvar_dump()を使うことがあると思います。 var_dump()の結果がページの中に大量に表示されるとレイアウトは当然崩れます。できれば別窓に表示さるとありがいたいもので  >>続きを読む

Sublime Text3の便利な使い方

*2017/5/7追記しました。 Sublime Text3のソースフォーマット Sublime Text3のソースフォーマットはデフォルトで用意されています。 フォーマットしたい部分を選択するか、全選択してメニューから  >>続きを読む

デザインスペースを使ってみよう〜PhotoshopCC2015.1

注意:PhotoshopCC2017からデザインスペースは(プレビュー)は使用できなくなっています。Xdを使ってねということでしょうか、XdのWindows版はまだ出てないけど。。あまり振り回されないでCS6活用している  >>続きを読む

replaceWith()の使い方〜jQuery

replaceWith()はある要素を指定されたHTMLやDOMエレメントで置き換えるものとリファレンスでは説明されていますが、少しわかりにくいので解説します。 ざっくりとみると、html()と働きが似ています。 htm  >>続きを読む

Flexboxを使ったECサイト向けパーツ

ECサイトなどで見かける商品別のブロックをFlexboxを使って作成するサンプルです。 参考にしたのはこちらのページです。Some Inspiration for Pricing Tables 折角Flexboxを使って  >>続きを読む

Git〜コミットのコメント内容を変更したい時

Gitでコミットしたけれども、コミットの内容を変更したい時の方法です。 SourceTreeでの操作方法ですが、簡単そうでどこを操作したら良いのかわかりにくいです。 操作方法 上にあるコミットボタンをクリックします。 コ  >>続きを読む