これは便利！SNSボタンを好きな場所に入れる方法 [WordPress小ネタ]
WP Social Bookmarking Light プラグインを使って、SNSボタンを設置しているブログをよく見かけます。 多くのワードプレスユーザーに支持されているだけあって、とっても使いやすい高性能なプラグインで…
マンガっぽい表現を使ったWebサイトまとめ
実制作でマンガっぽいデザインをする機会があり、探したところまとめられているサイトが意外と少なかったので今回のテーマにあげさせていただきました。 あくまで「っぽい」なので、イラストを全面に出したようなデザインは避け、写真や…
GoogleMapをかっこ良くする！カスタマイズ方法
地図などを表示するページを作る際に、GoogleMapを読み込むといった事はよくやると思います。 サイトの雰囲気と違っていても、「仕方がない・・・」と妥協した、といった経験も少なからずあるはず。 実はGoogleMapは…
XAMPP・MAMPをインストールして、PHPを動かす環境をつくろう [MAMPのセキュリティ 設定]
前回は、MacOS X にMAMP（マンプ）をインストールして初期設定を行いました。 しかし、初期設定のままでは下の図のように、あなた以外のパソコンから仮想サーバ（開発環境）にアクセスができてしまうので、 セキュリティ的…
Dreamweaverの仕事効率をあげる方法
HTMLやCSSのコーディングを担当する人は、オーサリングツールとしてDreamweaverを使用しているケースが多いと思います。 Dreamweaverを単にエディタとして使うだけでなく、Dreamweaver独自に用…
Photoshopを使って画像を壊してみた
Photoshopで色調補正を行う際、頭においておきたいこととして 「色調補正をするたびにデジタル画像は壊れていく」ということがあります。 ちょっと壊れているだけなら見た目にも分かりませんし、品質的にも問題ないです。 し…
XAMPP・MAMPをインストールして、PHPを動かす環境をつくろう [XAMPPのセキュリティ 設定]
XAMPPは、手軽にお手持ちのパソコンへPHP開発環境を構築できる便利なツールですが、インストールしただけでは パスワード や アクセス制御 をしていないので、ネットワークを通じて不正アクセスをされる可能性があります。 …
キャッシュってなに？
キャッシュという言葉を聞いたことがありますか？ 現金という意味の「キャッシュ」ではありません。 今回ご紹介する「キャッシュ」は、例えばこんな場面で使われる言葉です。 〜ウェブ制作のお仕事で お客様からホームページ修正のご…
Photoshopでの切り抜きがすごく楽になる方法
デザインをしていく中で、Photoshopで人物や物を切り抜くことが多々あると思います。 みなさんはどのような方法で切り抜いているでしょうか？ 昔はパスツールで地道にパスを描いていましたが数が多…
すべてレスポンシブ対応！！画像系jQueryプラグイン4選
今回はレスポンシブに対応している画像ギャラリー系のjQueryプラグインをいくつか紹介したいと思います。 Image Lightbox Responsive and Touch‑friendly デモ：公式…
HTML5で追加された新機能まとめ
一部、前回の記事でも触れましたが、HTML5では色々な要素や機能が追加されており、今まではHTMLだけでは不可能だったことが、HTML5だけで表現できるようになったのも嬉しい限りです。 今回は、そんなHTML5で追加され…
XAMPP・MAMPをインストールして、PHPを動かす環境をつくろう [Mac OS X のMAMP 設定]
前回は、 Mac OS X に MAMP （マンプ）をインストールしました。 MAMPインストール直後の初期設定は、http://localhost:8888/ にアクセスをすることで ドキュメントルート を参照できます…
デザイナー必見！今さら聞けないフォントの基礎知識
今回はデザインをする上でとっても大事なフォントの基礎をまとめてみました。 Webデザインを始めたばかりの方など参考にしていただければと思います。 このジャンルの話は深堀ればそれだけで本一冊出せるくらいの情報量があるので(…
HTML5の新規タグ「section、article、header、footer」の使い方
さて今回は、HTML5で追加されたタグ、section/article/header/footerの使い方を改めて復習しようとおもいます。 Web制作の現場でも、HTML5がだいぶ普及してきたことによって、使う機会が多く…
XAMPP・MAMPをインストールして、PHPを動かす環境をつくろう [Mac OS X にMAMPをインストールする]
Mac OS XにMAMP（マンプ）をインストールして、PHPを動かす環境を作ります。 Mac OS Xには、元々OSに Apache と PHP が入っていて、購入時の設定では機能が OFF になっています。 わざわざ…
パララックス(視差効果)を効果的に使ったサイトまとめ 日本編
パララックス（parallax）は直訳すると「視差」という意味。 具体的には、スクロールの動作に応じて、複数のレイヤーを異なるスピードで動かすことで視差を生み出し、立体感や奥行き感を演出する手法です。 2012年くらいか…