下線を引く方法とspanタグ HTMLタグ復習①
ホームページやらブログの作成からだいぶ離れていたので タグやCSSの復習と勉強からしていきます。
勉強、復習期間は6カ月を予定しています
勉強していったらこのページも編集していきます。
タグは全部手打ち派です。
php,java,mysql,androidアプリ作成も中学時代はある程度できてたけど全て忘れました。笑
今回は文字に下線を引く方法とspanタグについてです。
・下線を引く方法
文字に下線を引く場合は 下線を引きたい部分を<u>タグで囲みます。
<u>文字に下線を引く</u>
そうすると次のようになります。
文字に下線が引かれました
・spanタグについて
spanは簡単に言うと
spanタグで囲まれた部分を一つのグループにするという意味で、あまり深い意味があるわけではありません。これが後々CSSとかで役立ってきたはずです。笑
例えば次のように記述します
<span style=”border-bottom: solid 5px red;”>赤のアンダーライン</span>
すると次のようになります
赤のアンダーラインが引かれました
・borderについて
boderでどこに線を引くかを決めています
今回はbottomを指定しているので 文字の下に線が引かれます。
bottom以外にも次のようなものが使えます
bottom 文字の下に線を引く
top 文字の上に線を引く
left 文字の左に線を引く
right 文字の右に線を引く
何も指定しないと文字を前後左右で囲みます。
<span style=”border-bottom: solid 5px red;”>下に線が引かれます</span>
下に線が引かれました
<span style=”border-top: solid 5px red;”>上に線が引かれます</span>
上に線が引かれました
<span style=”border-left: solid 5px red;”>左に線が引かれます</span>
左に線が引かれました
<span style=”border-right: solid 5px red;”>右に線が引かれます</span>
右に線が引かれました
<span style=”border: solid 5px red;”>前後左右に線が引かれます</span>
前後左右に線が引かれました
・solidについて
solidは一本の線という意味です。
solidの他に次のようなものが使えます
double 2重線
dotted 点線
dashed 破線
inset 立体的な線
outset 立体的な線
ridge 立体的な線
groove 立体的な線
<span style=”border: solid 5px red;”>ノーマルな線が引かれます</span>
ノーマルな線を使いました
<span style=”border: double 5px red;”>二重線が引かれます</span>
二重線を使いました
<span style=”border: dotted 5px red;”>点線が引かれます</span>
点線を使いました
<span style=”border: dashed 5px red;”>破線が引かれます</span>
破線を使いました
<span style=”border: inset 5px red;”>insetな線が引かれます</span>
insetを使いました
<span style=”border: outset 5px red;”>outsetな線が引かれます</span>
outsetを使いました
<span style=”border: ridge 5px red;”>ridgeな線が引かれます</span>
ridgeを使いました
<span style=”border: groove 5px red;”>grooveな線が引かれます</span>
grooveを使いました
〇pxについて
〇に入る数字によって文字の太さが変わってきます。今回は5pxを使いました
