<b>タグで囲まれたテキスト(<b>~</b>の間の文字)は太字(Bold)になります。
<b>は非推奨要素ではありませんが、フォントの見栄えに関する指定には、
できるだけスタイルシートを利用した方がよいです。
※近年のhtml形式の変化で、サイトの構造と見栄えは分離することが推奨されているため
スタイルシートでは、<span style="font-weight: bold">~</span> などと記述します。
また、強調することが目的の場合は<strong>タグの使用が推奨されています。
例示
この記事で、ここは太字になります。
2019年8月6日火曜日
2019年7月29日月曜日
<img>画像表示
こんばんは、燃えPaPaです。
きれいなウェブサイトを作る際など、画像掲載はもう必須と言ってもよいですよね。
そんな際、htmlで画像を表示するには、
<img>タグを使います。
使い方は簡単で、
<img src="画像のファイルパス(相対でも絶対でも)" />
これだけで、指定箇所に画像を表示することができます。
また、この指定だけですとアップしてある画像の縦横サイズそのまま出てしまいますので、
<img src="画像のファイルパス" width="300" height="200" />
きれいなウェブサイトを作る際など、画像掲載はもう必須と言ってもよいですよね。
そんな際、htmlで画像を表示するには、
<img>タグを使います。
使い方は簡単で、
<img src="画像のファイルパス(相対でも絶対でも)" />
これだけで、指定箇所に画像を表示することができます。
また、この指定だけですとアップしてある画像の縦横サイズそのまま出てしまいますので、
<img src="画像のファイルパス" width="300" height="200" />
のように、
縦サイズ、横サイズを指定することができます(数字はピクセル単位)。
ただし、近年の、ソースコードでデザインを制御せず、
スタイルシートに任せる考え方では、あまりここでサイズを指定せず、
imgタグにクラスを当てたりして、スタイルシートでサイズを決める方が主流となっています。
まだあまりサイト作成技術に詳しくなく、
タグやhtmlファイルでほとんど決めたい方などにはこのオプションも必要かと。
燃えPaPa
2019年7月17日水曜日
<br />改行
こんばんは、こうちゃんです。
htmlを書く際に、
ソースファイル中で、本文に改行を入れたとしても、
ブラウザで見た際には改行されません。
例:
ソースファイルで、
----
この文章は、
改行されてますか。
----
と書いたとしても、ブラウザを通してモニタで見ると、
----
この文章は、改行されてますか。
----
と一続きの文章にされてしまいます。
このような文で改行して欲しい場合は、
改行タグ br を入れます。
書き方としては、
改行したいところに
<br />
を入れるだけです。
※以前は<br>でもよかったが、xhtmlの普及により、単体のタグでは閉じを意味する / を入れる
先ほどの文章では、
----
この文章は、<br />改行されてますか。
----
と書けば、ブラウザ上では、
----
この文章は、
改行されてますか。
----
として改行されて表示される。
サイト上で長い文章や、テーブル内に入れた文章は、行末でも自動改行されますが、
基本的には、適宜改行タグを入れて見やすくする方が一般的です。
こうちゃん
htmlを書く際に、
ソースファイル中で、本文に改行を入れたとしても、
ブラウザで見た際には改行されません。
例:
ソースファイルで、
----
この文章は、
改行されてますか。
----
と書いたとしても、ブラウザを通してモニタで見ると、
----
この文章は、改行されてますか。
----
と一続きの文章にされてしまいます。
このような文で改行して欲しい場合は、
改行タグ br を入れます。
書き方としては、
改行したいところに
<br />
を入れるだけです。
※以前は<br>でもよかったが、xhtmlの普及により、単体のタグでは閉じを意味する / を入れる
先ほどの文章では、
----
この文章は、<br />改行されてますか。
----
と書けば、ブラウザ上では、
----
この文章は、
改行されてますか。
----
として改行されて表示される。
サイト上で長い文章や、テーブル内に入れた文章は、行末でも自動改行されますが、
基本的には、適宜改行タグを入れて見やすくする方が一般的です。
こうちゃん
2019年7月4日木曜日
<hr />水平線
こんばんは、こうちゃんです。
今回は、
<hr />水平線
のご紹介です。
(hr ← horizontal rule)
<hr />このタグを入れたところに、(サイズ等指定していない限り)横一直線の棒(水平線)が挿入されます。
内容的に、文章の前後を分けたい、段落分けをはっきり見せたい、などの時によく利用されます。
↓実際
通常、何も指定しないデフォルトでは、
黒色で
1px幅
表示領域の左端から、右端まで
の線が表示されます。
もちろん、このままではサイトデザインとかみ合わないことも多々ありますので、
スタイル指定で、
size (線の幅)
width (線の長さ)
color (線の色)
などと組み合わせて表示するのが通常です。
※といっても、今はデザインはタグで制御しないで、スタイルシートで制御すべし、というのが主流ですので、あまりタグのオプションは覚えなくても平気です。
こうちゃん
今回は、
<hr />水平線
のご紹介です。
(hr ← horizontal rule)
<hr />このタグを入れたところに、(サイズ等指定していない限り)横一直線の棒(水平線)が挿入されます。
内容的に、文章の前後を分けたい、段落分けをはっきり見せたい、などの時によく利用されます。
↓実際
通常、何も指定しないデフォルトでは、
黒色で
1px幅
表示領域の左端から、右端まで
の線が表示されます。
もちろん、このままではサイトデザインとかみ合わないことも多々ありますので、
スタイル指定で、
size (線の幅)
width (線の長さ)
color (線の色)
などと組み合わせて表示するのが通常です。
※といっても、今はデザインはタグで制御しないで、スタイルシートで制御すべし、というのが主流ですので、あまりタグのオプションは覚えなくても平気です。
こうちゃん
2019年6月3日月曜日
文字表示
タグリファレンスなのに第一回はタグを使っていなくて申し訳ないですが、
まずは画面に文字を表示するロジックをひとつ
まず、メモ帳を開き
本文にただ
test
この1単語を書いて
名前をつけて保存しましょう
ここでは、
index.html
と名づけましょう
これで保存し、保存したファイルをダブルクリックするだけで
、
インターネットエクスプローラが起動し
画面に、
test
と表示されたはずです
これだけでホームページになるのです
基本はこんな単純な仕組みです。
これをいかに作り進めるかてサイト作りは進展します。
んでは、第1回はこんな感じで
まずは画面に文字を表示するロジックをひとつ
まず、メモ帳を開き
本文にただ
test
この1単語を書いて
名前をつけて保存しましょう
ここでは、
index.html
と名づけましょう
これで保存し、保存したファイルをダブルクリックするだけで
、
インターネットエクスプローラが起動し
画面に、
test
と表示されたはずです
これだけでホームページになるのです
基本はこんな単純な仕組みです。
これをいかに作り進めるかてサイト作りは進展します。
んでは、第1回はこんな感じで
2019年5月22日水曜日
<s>打消し線</s>
<s>打消し線</s>
<s>タグで囲まれたテキスト(<s>~</s>の間の文字)は文字上に打消し線が引かれます(文字に横線が上乗せされる)。
<s>は非推奨タグなので、
できるだけスタイルシートを利用してください。
スタイルシートではclassを当ててスタイルシートで、
ないし直接styleタグで、
<span style="text-decoration: line-through">***</span>
のように記述します。
現在のデザイン、構造分離のWEB業界の方針からは、
このような文字修飾は、できるだけスタイルシートを利用することが推奨されています。
例示
この記事で、ここ←は打消し線がかけられます。
<s>タグで囲まれたテキスト(<s>~</s>の間の文字)は文字上に打消し線が引かれます(文字に横線が上乗せされる)。
<s>は非推奨タグなので、
できるだけスタイルシートを利用してください。
スタイルシートではclassを当ててスタイルシートで、
ないし直接styleタグで、
<span style="text-decoration: line-through">***</span>
のように記述します。
現在のデザイン、構造分離のWEB業界の方針からは、
このような文字修飾は、できるだけスタイルシートを利用することが推奨されています。
例示
この記事で、
2019年5月16日木曜日
色指定時のルール
HTMLタグだけに問わず、
サイト作りのために、
ソースを手書きしていると、色指定をすることが多々あります。
(HTMLタグ、スタイルシート、JavaScript等)
<font color="#ffffff">
などがそれにあたります。
このようなfontプロパティのように、文字色指定の場合、
他にも背景色指定の場合、
場面は多々ありますが、
色の指定の書き方ルールは共通なので、今回ご説明します。
PC上での色は、
光の三原色、RGB、すなわち、レッド(赤)、グリーン(緑)、ブルー(青)の
3色の光の重ね合わせで全色を表現しています。
一昔前までは、
色数も16色や256色、という少ない種類しか表現できませんでしたが、
今は、High Color(16ビット)やTrue Color(24ビット)
といって、
65,536色
16,777,216色
までの色を表現できます。
この場合、スタイルシートやHTML等で色指定する場合、
通常、24ビットまでの表現域を前提として、
RGB各色256段階の指定により、色を表現します。
具体的には、
各値を0~255まで使い、それを16進法で、表現、00~ffとして、
頭にシャープ#をつけ
#ffffff (先頭2文字赤、次2文字緑、最後2文字青)
として指定。
また、単純に、各値を16段階で表現して、
#fff (それぞれ赤、緑、青に対応)
として、指定することもできます。
この指定方法と、
色の割合の変化による、実際の色合いがわかれば、
サイトデザイン等で、色にひと工夫可能になります。
なお、
このようなRGBの数値では色のイメージがわかない方は
http://www.colordic.org/
このサイトのように、色見表で欲しい色のRGBの数値をチェックするとよいです。
サイト作りのために、
ソースを手書きしていると、色指定をすることが多々あります。
(HTMLタグ、スタイルシート、JavaScript等)
<font color="#ffffff">
などがそれにあたります。
このようなfontプロパティのように、文字色指定の場合、
他にも背景色指定の場合、
場面は多々ありますが、
色の指定の書き方ルールは共通なので、今回ご説明します。
PC上での色は、
光の三原色、RGB、すなわち、レッド(赤)、グリーン(緑)、ブルー(青)の
3色の光の重ね合わせで全色を表現しています。
一昔前までは、
色数も16色や256色、という少ない種類しか表現できませんでしたが、
今は、High Color(16ビット)やTrue Color(24ビット)
といって、
65,536色
16,777,216色
までの色を表現できます。
この場合、スタイルシートやHTML等で色指定する場合、
通常、24ビットまでの表現域を前提として、
RGB各色256段階の指定により、色を表現します。
具体的には、
各値を0~255まで使い、それを16進法で、表現、00~ffとして、
頭にシャープ#をつけ
#ffffff (先頭2文字赤、次2文字緑、最後2文字青)
として指定。
また、単純に、各値を16段階で表現して、
#fff (それぞれ赤、緑、青に対応)
として、指定することもできます。
この指定方法と、
色の割合の変化による、実際の色合いがわかれば、
サイトデザイン等で、色にひと工夫可能になります。
なお、
このようなRGBの数値では色のイメージがわかない方は
http://www.colordic.org/
このサイトのように、色見表で欲しい色のRGBの数値をチェックするとよいです。
登録:
投稿 (Atom)