CSSで写真に額縁をつけよう(1)
こんにちは。Nakaiです。
蒸し暑い日が続いていますね。
九州の方の大雨のニュースを見るたびに、千葉は恵まれているな、と思います。
さて、今日は、CSSの話題です。
写真に額縁をつける
というと、Photoshopでの加工を思い浮かべる方も多いと思いますが。
写真に何も加工をしなくても、CSSをちょっと記述するだけで出来てしまいます!
写真を枠線で囲ってしまえばよいだけなのです。
↑こちらの写真(2ヶ月くらい前に種をまいておいた自宅のひまわり。
お教室に飾っています!)
マウスを上においてポイントしてみてください。
周りの黄色の色が、少し濃い黄色に変わりましたよね。
マウスの操作に合わせて、装飾が変化するリンクは、簡単に設定が
できるので、ナビゲーションなどに使うと効果があります。
今日は、まず「額縁をつける」CSSの記述を覚えましょう。
a img.imagelink{ border:10px double #ffffbb; }
これは、「画像の周りに10pxの#ffffbb(薄い黄色)の二重線を引く」
という意味です。
imgタグには、imglinkというクラススタイルを設定しておけば、
この記述だけで、簡単に額縁がつきます。
CSSはいろんなことができるので、楽しいですよ!
次回は、マウスポインタが重なると変化するリンクについて
ご説明しますね。
パソコンスクールISA船橋FACE校 Nakai
夢を叶えるキャリアアップスクール パソコン教室ISA船橋FACE校
「すべては受講生のために」をモットーに、ビジネスに必要なパソコンスキルから
就転職に向けてのパソコン資格の取得まで個別授業を行っています。
是非お気軽にご来校ください。
住所:千葉県船橋市本町1丁目3-1 FACEビル12F
連絡先:TEL: 047-424-3544
Mail: isa_funabashi@isa-school.co.jp
授業時間
月~木 10:30~20:30
金~日 10:00~17:00