HTML&CSS

ドットグラデーションの作成〜Photoshop

ドットグラデーションを加えると通常のグラデーションより随分印象が変わります。 手軽にできますので作成方法を覚えておきましょう。 [完成例] まず、通常のグラデーションを作成します。 ポイントは白と黒でグラデーションを作成することです。 できあがった白と黒のグラデーションにメニューから「フィルター」→  >>続きを読む

\nのクオテーションはダブル〜PHP

文字列内で改行を表す特殊文字「\n」を改行として使用したい場合は、「”」を使用します。「”」は特殊文字を理解して改行します。ところが、「’」は「\n」を改行として表示せずにそのまま「\n」で表示します。 HTML内でPHPを使用する場  >>続きを読む

イメージマップのリンク部分の青い線を消す

Chromeなどでイメージマップのリンク部分に青い線が表れます。 これを消すにはareaに対してCSSでclassなどを使用して以下の設定をします。 area{ border:none; outline:none; } IEの古いバージョン対策ではHTMLタグの中に以下の属性を加えます。 onFoc  >>続きを読む

floatとdisplay:inlineを一緒に設定する理由〜CSS

時々CSSでfloatとdisplay:inlineを同時に指定するコードを見ることがあります。 なぜ、floatして横並びにしているものをわざわざdisplay:inlineにして幅とか高さとか設定できなくなるのでは?と考えてしまいます。 これは、今となってはもう古い書き方でIE対策を施しているも  >>続きを読む

ベベルとエンボスの正体〜Photoshop

Photoshopで作成したオブジェクトを盛り上げたり、くぼませたりするのにベベルとエンボスを使用しますが、いまひとつ正体の分からないまま使用していませんか。今回はベベルとエンボスを掘り下げみたいと思います。 そもそもベベルとエンボスとは何? ベベル「bevel」は直訳すると「斜面」あるいは「斜角」  >>続きを読む

jQuery.extendを使ってみる

jQuery.extendとは jQuery.extendは複数のオブジェクトをマージして返します。 と言われてもよくわかりませんので使い方を見てみます。 もっとも簡単にJavaScriptでオブジェクトを作成するには連想配列を作ります。 次のサンプルのように、変数にオブジェクトを作成して代入し、j  >>続きを読む

過去のアピアランス効果が適用される〜Illustrator

アピアランスを使用して何らかの効果をつけたり、変更した後に、次の新しいオブジェクトを作成するとその前に使用したアピアランス効果がそのまま適用される場合があります。 例えば、鉄道の線路をアピアランスを使用して作成した後に、通常の線を引いても鉄道の線になったりする現象です。 これはアピアランスパネルの右  >>続きを読む

ul要素の構造〜余計な余白は誰?

ul要素とli要素はナビゲーション作成などで使用頻度の高い要素です。 リストは特殊な構造になっています。 ulとliは組み合わせて使用する必要があります。 特にulの直接の子供はliのみとなりますので、ulの入れ子状態で再びulを使用する場合などに注意が必要です。 以下の例は間違いの書き方です。 &  >>続きを読む

Illustrator〜1ピクセル単位で正しく保存する

Illustratorの1pxのサイズのずれ Illustratorでイラストを作成してpngやgif形式にして保存する場合に、1pxまたは2pxサイズが大きくなることがしばしばあります。 それがシンプルな四角形であっても1pxまたは2pxの誤差がでます。 この原因は作成しているオブジェクトのx,y  >>続きを読む