DESIGN

ついつい忘れてしまう英語の省略表記

随分と更新の間隔が開いてしまいました・・・。反省します。久々の投稿なので備忘録を残しておこうと、普段ついつい忘れてしまう英語の省略表記をメモメモ。きっと誰かの役にも立つと信じて。。。曜日の場合 曜日 ...
Illustrator

【Ai】チラシでよく見る立体文字を作る方法

新聞の折り込みチラシで、上のイメージのような文字を立体的に浮き出したような表現を見かけます。これってどうやって作ってるのかなぁ~っ???と思ったので色々と試してみましたが、比較的簡単にできる方法があり...
CSS

【初心者向け】はじめてのCSS ~第3話~ ウェブセーフカラーについて

前回の記事「【初心者向け】はじめてのCSS ~第2話~ 色の指定方法について」にて、色の指定方法について記述しましたが、今回はその続きとして「ウェブセーフカラー」について解説していきたいと思います。(...
Illustrator

「効果のワープ」と「エンベロープのワープで作成」って何が違うの?

テキストを「円弧」や「アーチ」などで変形させたいという時に、一般的なやり方として以下の2通りあります。あまり極端に変形をさせてしまうと文字自体が歪んでしまうのできちんと調整をしながら使用した方が良いで...
CSS

【初心者向け】はじめてのCSS ~第2話~ 色の指定方法

フォントカラーや背景色、リンクカラーやボーダー色など、様々な要素やプロパティに対して「色」を指定することができます。CSSによる色の指定方法には、以下の3つの方法があります。 16進数による指定 10...
Photoshop

金属感を演出するヘアライン加工の作り方

久々のPhotoshop Tipsになります。「高級感のあるイメージでバナーを作ってください。」「とにかくゴージャスに飾りを入れてください。」そんなザックリ依頼が飛んできても、もう大丈夫!「金属感を演...
CSS

【初心者向け】はじめてのCSS ~第1話~

最近、「WEBをイチから学びたい!」という意欲旺盛な挑戦者とやり取りをすることがあります。その際に利用している自分なりにまとめた資料があるのでご紹介しようと思います。ちなみにこの記事は「WEBデザイン...
ブログ

文章校正は苦手…という人が気を付けるべき5つのこと。

WEBデザイナーであっても、日々の業務のなかで必要とされる「文章校正能力」。企業サイトでも商品のランディングページでも、デザイン業務ではなく新規企画の提案においても、デザイナーといえど「文章」とは関わ...
HTML

Google HTML / CSS Style Guideを翻訳してみた。

Google HTML/CSS Style Guide (【改正】2016.2.24 )これまで何となく認識しているルールとか、規則ってありますよね・・・。「決まりがあることは知っているけど、守らなく...
jQuery

ウィンドウサイズによるクラス名の付与&削除する方法

レスポンシブサイトを作成するときに、画面サイズによって要素のクラス名を外したり、付与したりする方法をご紹介します。jQueryを使ってクラス指定をコントールしてみましょう。 サンプル1 ・・・背景色を...
CSS

リンククリック時の点線を非表示にする方法

画像のリンクボタンをクリックした時に、四方にちゃっかり出てくる「点線」を非表示にする方法をご紹介します。気にならない人はいいかもしれませんが、個人的にはかなり気になってました・・・。どういうことかとい...
DESIGN

ちょっとした工夫で出来る!ロゴデザイン13個のヒント。

「ロゴ」と言っても、「企業ロゴ」や「商品ロゴ」など規模の大きなものから、個人サイトなどの小規模なロゴまで、対象となるものを色や形で象徴するような「ロゴ」が、世の中には数多く存在しています。その商品や企...
CSS

hr要素の罫線をちょっと装飾してみる。

<hr>要素は「罫線(けいせん)」を表示するタグですが、そのまま罫線を引くだけでは面白くないので、CSSでちょっと装飾してみることにします。▼まずは、デフォルトで設定されていhr要素のスタイルをリセッ...
jQuery

横並びにしたブロック要素の高さを揃えたい!

横並びに配置したコンテンツが、中身の高さ(画像の大きさやテキストの長さ)によって、バラバラになってしまうことってありませんか?そんな場合には、コンテンツ内の要素に関係なく一番高さを取っている要素に合わ...