2019年7月29日月曜日

<img>画像表示

こんばんは、燃えPaPaです。

きれいなウェブサイトを作る際など、画像掲載はもう必須と言ってもよいですよね。
そんな際、htmlで画像を表示するには、
<img>タグを使います。

使い方は簡単で、
<img src="画像のファイルパス(相対でも絶対でも)" />
これだけで、指定箇所に画像を表示することができます。
また、この指定だけですとアップしてある画像の縦横サイズそのまま出てしまいますので、
<img src="画像のファイルパス" width="300" height="200" />
のように、
縦サイズ、横サイズを指定することができます(数字はピクセル単位)。
ただし、近年の、ソースコードでデザインを制御せず、
スタイルシートに任せる考え方では、あまりここでサイズを指定せず、
imgタグにクラスを当てたりして、スタイルシートでサイズを決める方が主流となっています。
まだあまりサイト作成技術に詳しくなく、
タグやhtmlファイルでほとんど決めたい方などにはこのオプションも必要かと。

燃えPaPa

2019年7月17日水曜日

<br />改行

こんばんは、こうちゃんです。

htmlを書く際に、

ソースファイル中で、本文に改行を入れたとしても、
ブラウザで見た際には改行されません。

例:
ソースファイルで、
----

この文章は、
改行されてますか。

----

と書いたとしても、ブラウザを通してモニタで見ると、

----

この文章は、改行されてますか。

----
と一続きの文章にされてしまいます。
このような文で改行して欲しい場合は、

改行タグ br を入れます。

書き方としては、
改行したいところに

<br />

を入れるだけです。
※以前は<br>でもよかったが、xhtmlの普及により、単体のタグでは閉じを意味する / を入れる

先ほどの文章では、

----

この文章は、<br />改行されてますか。

----

と書けば、ブラウザ上では、

----

この文章は、
改行されてますか。

----

として改行されて表示される。

サイト上で長い文章や、テーブル内に入れた文章は、行末でも自動改行されますが、
基本的には、適宜改行タグを入れて見やすくする方が一般的です。

こうちゃん

2019年7月4日木曜日

<hr />水平線

こんばんは、こうちゃんです。

今回は、
<hr />水平線
のご紹介です。

(hr ← horizontal rule)

<hr />このタグを入れたところに、(サイズ等指定していない限り)横一直線の棒(水平線)が挿入されます。
内容的に、文章の前後を分けたい、段落分けをはっきり見せたい、などの時によく利用されます。

↓実際



通常、何も指定しないデフォルトでは、

黒色で
1px幅
表示領域の左端から、右端まで

の線が表示されます。
もちろん、このままではサイトデザインとかみ合わないことも多々ありますので、
スタイル指定で、

size (線の幅)
width (線の長さ)
color (線の色)

などと組み合わせて表示するのが通常です。
※といっても、今はデザインはタグで制御しないで、スタイルシートで制御すべし、というのが主流ですので、あまりタグのオプションは覚えなくても平気です。

こうちゃん