■ 画像を微調整する
「好きな場所に、好きな画像を表示させたい！」そんなあなたにピッタリな方法を紹介します。
今回のテーマは「画像を微調整する」です。
「好きな場所に、好きな画像を表示させたい！」そんなあなたにピッタリな方法を紹介します。
（「ささいなズレも許さないよ！」そんな職人肌のあなたにもオススメです（笑））
「なんとなくシックリいかない。」
「この画像自体は大好きだけれど、何かスッキリしない。。。」
「お気に入り画像の表示場所を固定したい。。。」
このように感じたことはありませんか？
実は、このような感覚は誰でも１度は経験します。
そして「なんとなくスッキリしない」というその正体は、、、
主に「ズレている」ことが原因です。
ホームページには限られた
狭いスペースの中に情報が詰まっています。
パッと見、あまり気にならないズレでも
見た目や感じ方に大きな影響を与えてしまいます。
例えば、全く同じ画像でも10px右にずらしてみると
驚くほど印象が変わる。。。。
そんなことはとてもよくあることです。
さて、使い方の解説です。（前フリが長すぎという噂も、、、（笑））
● 画像を微調整する方法
▼ エッセンス
スタイルシートの{position:absolute}を利用する。
▼ 説明
{position}（ポジション）は位置を指定するプロパティです。
位置を指定するにはtop,leftを利用します。
（他にはbottom,rightも使えます）
▼ 使用例 （コピー＆ペースト可能です。）
<img src="gazo.gif" style="position:absolute;left:100px;top:100px;">
（読みかた）
「"gazo.gif"を左から100px、上から100pxの場所に表示させます。」と読みます。
left,topの値を変えるだけで望みの場所に画像を固定することができます。
（1pxでも2pxでも心ゆくまで微調整することが可能になります。）
● 調整のしすぎにはご注意を、、、
職人肌の人は特に注意してくださいね（笑）
職人気質とは無縁な私も、昔そうでした。
誰も気付かないような場所の微調整を繰り返し
気が付いたら朝だった、、、、（笑）
そんな朝はとても達成感がある。やり遂げた感がある。
しばらくしてあることに気が付く。。。
「やばい！ホームページが進んでいない、、、」と、、、（笑）
とても簡単に使えるスタイルシートで、
効果がすぐに目に見える、とってもいいやつです。
その代わり、ドツボにはまる（時間をかけすぎてしまう）
とても危険なスタイルシートでもあります（笑）
ご注意を！！！（手）
ちなみに、私はついつい多用してしまいます。
<img src="xxx.gif style=position:absolute、、、
このように<img>タグを書くついでにスタイルシートの記述をしていしまします。
習慣とは恐ろしいものです。。。（笑）
▼ 今日の一言？
「職人肌の人は気をつけよう！」
（↑何のこっちゃ、、、）