CSSで写真に額縁をつけよう(1)

こんにちは。Nakaiです。

蒸し暑い日が続いていますね。

九州の方の大雨のニュースを見るたびに、千葉は恵まれているな、と思います。

さて、今日は、CSSの話題です。

写真に額縁をつける

というと、Photoshopでの加工を思い浮かべる方も多いと思いますが。

写真に何も加工をしなくても、CSSをちょっと記述するだけで出来てしまいます!

写真を枠線で囲ってしまえばよいだけなのです。

img_0151.JPG

↑こちらの写真(2ヶ月くらい前に種をまいておいた自宅のひまわり。
お教室に飾っています!)

マウスを上においてポイントしてみてください。

周りの黄色の色が、少し濃い黄色に変わりましたよね。

マウスの操作に合わせて、装飾が変化するリンクは、簡単に設定が
できるので、ナビゲーションなどに使うと効果があります。

今日は、まず「額縁をつける」CSSの記述を覚えましょう。

a img.imagelink{ border:10px double #ffffbb; }

これは、「画像の周りに10pxの#ffffbb(薄い黄色)の二重線を引く」
という意味です。

imgタグには、imglinkというクラススタイルを設定しておけば、

この記述だけで、簡単に額縁がつきます。

CSSはいろんなことができるので、楽しいですよ!

次回は、マウスポインタが重なると変化するリンクについて
ご説明しますね。

パソコンスクールISA船橋FACE校 Nakai

Follow me!

夢を叶えるキャリアアップスクール パソコン教室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

パソコン教室ISA船橋FACE校のご案内はこちらから


個別授業の無料体験のお申し込みはこちらから

資料請求はこちらから

パソコン教室ISAのご案内はこちらから

MOS資格のご案内はこちらから

教育訓練給付制度のご案内はこちらから

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

前の記事

はじめまして。Inoueです。

次の記事

七夕★