WEBデザイン 【コーディング】カーソルを乗せると画像が「ズームイン」するホバーエフェクトの実装方法をご紹介
画像やリンクボタン等にカーソルを乗せた時の動きを「ホバーエフェクト」と呼びますが、調べてみると沢山の種類のエフェクトが紹介されていたりします。その中でもメジャーなズームイン系のホバーエフェクトを先日初めて使ってみたので、この場でおさらいして...
Webデザイン
WEBデザイン 
WEBデザイン 【コーディング備忘録】○番目の要素を指定する際の「nth-child」と「nth-of-type」について学ぶ
「○番目」や「奇数・偶数」などの特定の要素にだけ変化をつけたい、そんな時に便利な疑似クラス「nth-child」と「nth-of-type」について学んでみましょう。使う機会は多いものの、忘れたりごっちゃになったり、なかなか定着しないので簡...
WEBデザイン 【Illustrator】オブジェクトの拡大・縮小で変化する線幅の対処法
イラレでは初期設定の状態だと、オブジェクトを縮小するとこのようにオブジェクトの大きさに対して線幅が太くなってしまいます。元の線幅を維持したまま縮小しているからこうなってしまうんですね。 そこで今回は、線幅を大きさに応じて可変させながらオブジ...
WEBデザイン 【Illustrator】表示されるとなかなか消せないアレ（遠近グリッド）の消し方
イラレを使用中に、たまに表示されるコレ。ピンとくる方いないでしょうか。 遠近グリッドというツールで、上図の二点透視図法のような遠近表現をする際に便利なガイド機能です。結構な頻度で現れ、消そうにもなかなか消えてくれず、時間のロスになる事があり...
WEBデザイン 【Illustrator】画像を文字で切り抜く方法〜クリッピングマスク〜
みなさん、イラレのクリッピングマスクは活用してますか？ 個人的にはかなり使用頻度の高い機能のひとつなので、マストで覚えるべき機能だと思います。 そこで今回は、クリッピングマスクを使って①画像を文字で切り抜く方法と、 ②画像をオブジェクトのパ...
WEBデザイン 【Illustrator】画像をはめ込んで合成する「モックアップ」の作り方
最近、知人からの依頼で看板のリニューアルデザインをしています。 看板のデザインを作成するのは初めてなので、アドバイスを頂きながら進めているのですが、その中でモックアップの作成を勧められました。（モックアップとは、よりイメージを掴みやすくする...
WEBデザイン ロゴ制作に役立つ参考サイトをご紹介
ただいま、業務としては初めてのロゴ制作に取り組んでいるところです。 最初はなかなか良いアイデアが思いつかず、色んなサイトを巡っていました。ひたすら手を動かしスケッチしてはサイトを巡り、またスケッチしてはサイトを巡り、を繰り返してようやく形に...
WEBデザイン 【Illustrator】オブジェクトが正常に選択できない時の対処法
イラレでオブジェクトを編集しようと対象をクリックするも、アンカーポイントが表示されない•••（ロックをかけていないのに！）なんてことありませんか？ 私は文字がドラッグできなくなる度にアワアワしています。 その原因は、おそらく境界線が隠れた状...
WEBデザイン 【コーディング備忘録】「display:inline-block」でリストを横並びにした時に生じる余白の対処法
グローバルナビなどリストを横並びにする時に発生してしまう余白について書き記しておこうと思います。 先日、リストタグに対して「display:inline-block」を使って要素を横並びにした時に、liとliの間に謎の余白が発生している事に...
WEBデザイン 【Illustrator】色決めに迷ったときに役立つ「カラーガイド」の使い方
デザインの色決めをしていて、「色の方向性は何となく決まったけどイマイチしっくりこない...」となる事はありませんか？ また、スウォッチパネルの初期カラーパレットばかり使っていると、毎回似たような色になりがちですよね。 本日は、少しでも色の幅...