https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

画像に枠線を入れる

{border:太さ 線の種類 線の色;} で画像に枠線を入れることができます。 線の色は記述しなくても枠線はデフォルトで表示されます。


(太さ 線の種類 線の色)の3つの値を記述する順序は自由です。
枠線の細かな指定方法はボックスの
枠線の太さを指定する 枠線の種類を指定する 枠線の色を指定するの項目を参照してください。

■ 枠線の種類

線の種類は以下の通り。

線の種類 説明
none 枠線は表示されません。
hidden 枠線は表示されません。
solid 通常の線
double 二重線
ridge 山形の線
groove 谷型の線
dotted 点線
dashed 大きな点線
inset 内側にくぼんだ線
outset 外側に突出した線

【ブラウザ表示】

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト

テキスト


ソース

<img src="./image/sinkansen.gif" alt="テキスト" class="wakusen1">
<img src="./image/sinkansen.gif" alt="テキスト" class="wakusen2">
<img src="./image/sinkansen.gif" alt="テキスト" class="wakusen3">
<img src="./image/sinkansen.gif" alt="テキスト" class="wakusen4">
<img src="./image/sinkansen.gif" alt="テキスト" class="wakusen5">
<img src="./image/sinkansen.gif" alt="テキスト" class="wakusen6">
<img src="./image/sinkansen.gif" alt="テキスト" class="wakusen7">
<img src="./image/sinkansen.gif" alt="テキスト" class="wakusen8">

外部ファイル

img.wakusen1{border:4px solid green;}
img.wakusen2{border:4px double silver;}
img.wakusen3{border:4px ridge red;}
img.wakusen4{border:4px groove blue;}
img.wakusen5{border:4px dotted navy;}
img.wakusen6{border:4px dashed purple;}
img.wakusen7{border:4px inset lime;}
img.wakusen8{border:4px outset maroon;}


<body>~</body>に直接記入する場合

<img src="./image/sinkansen.gif" style="border:4px solid green;" alt="テキスト">
<img src="./image/sinkansen.gif" style="border:4px double silver;" alt="テキスト">
<img src="./image/sinkansen.gif" style="border:4px ridge red;" alt="テキスト">
<img src="./image/sinkansen.gif" style="border:4px groove blue;" alt="テキスト">
<img src="./image/sinkansen.gif" style="border:4px dotted navy;" alt="テキスト">
<img src="./image/sinkansen.gif" style="border:4px dashed purple;" alt="テキスト">
<img src="./image/sinkansen.gif" style="border:4px inset lime;" alt="テキスト">
<img src="./image/sinkansen.gif" style="border:4px outset maroon;" alt="テキスト">

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

画像の周りに余白を入れる
画像の横に文字を回り込ませる
画像に並ぶ文字の位置を指定する
画像の横幅、高さを指定する
画像を切り抜く
画像のマスクを指定する

スタイルシート一覧のページに戻る